Thursday, December 4, 2008

9 Information Design Tips to Make You a Better Web Designer


It's probably the least glamourous part of web design, but information design is by no means the least important. Locating and consuming information is the quintessential web task, far surpassing buying, playing and communicating, all of which include a good portion of information design themselves. How users find and then avail themselves of all that information is affected by how it is structured and presented. Thus every web designer should be equipped to make qualified and informed decisions on just how to do this.

1 - Be methodical

Information design is a problem that gets more and more complex the bigger the website. However even a small website will benefit from a methodical, step by step process to figure out how to order and organise the site's content. Here are some simple steps you may wish to take:

    • Understand the Site's Content, Processes and Purpose
      It's pretty hard to organise a bunch of stuff if you don't know what that stuff actually is. So your first task is to skim through the site's content, processes and goals. A site's content means copy, images, video and other assets you've been given or briefed on that needs to go into the site. A site's processes are the tasks and workflows that users will need to complete to interact with a site. And the site's goals refers to both the client's goals and the user's.

      So for a simple restaurant example you might find that you have text for pages 1 through 20, you know that users will be attempting to complete some task such as making a reservation. You might also see that a user's goals on the site are to find out what the restaurant serves, where it is located and whether there are tables, and then hopefully make a reservation. Finally the client's goals might be to serve the user, but also to push them towards a set of specials they run.
    • Prioritize and Look for User Paths
      Once you've got a firm grasp of what's going into the site, you can begin to prioritize information and figure out how users will traverse the site. What paths will they take to accomplish their goals? What pages are the most important? Which should be seen right up front and which are just supporting information?

      Even with a simple example like our restaurant site, there are many ways of setting out the information. For example you might push specials straight away on the homepage, or you could tie them into the reservation process, or you might work them into the menus. Similarly you may find that given a client's goals, you will have a different priority on page content. Maybe the client tells you that no-one is ever able to find this restaurant, so you need to make a How to Get Here page and give it a high priority.
    • Organise the Information
      With an understanding of what is going into the site, and a clear grasp of how the different elements relate to each other, how users will want to work through them, and how important different sections are, you can now organise the information for the site. This organising involves not just categorizing pages - for example figuring out that 'about the company' fits under an 'about' tab - but even questioning and rearranging the content you've been given. Sometimes you may find that it's better to combine multiple pages, break up one long section, turn some text into a simpler diagramatical representation, or any number of other rearrangements.

      Develop a sitemap or plan of how the information will site in a heirarchical way. Although sitemaps are usually just a set of boxes indicating pages, you can work in all sorts of extra information explaining how the site is going to be set up, including things like quick links from the homepage, how different sections might tie in together, and paths a user might take through a sitemap.


2 - Think out of the Box

Sites with a reasonable amount of complexity can be rearranged and reorganized many different ways. One site that I've worked on organising and reorganising countless times is FlashDen. I've lost count of the number of times I've looked at that menu and rearranged it. In some instances we just move pages into different sets and groups so that they seem more logical, and in others we've introduced more out-of-the-box thinking.

For example some months ago the menu was becoming overly complex so we removed a whole heap of the more "fluffy" menu items and created a blog that now houses competitions, newsletters, subsite links and other pages that were cluttering up the menu.

Recently we've found we have many of what I call "stragglers" - that is pages without a home in the menu. From an information design point of view, stragglers are terrible - even I can't remember how to get to some of them! The solution this time is to build a wiki system, pipe top level content into the menu behind the scenes, and then use the wiki to house deeper levels of information with its own search, tagging and categorization facilities.

The point of my experiences with FlashDen is that organising information doesn't even necessarily have to be about putting it into menus and submenus. You may find that some information shouldn't be on a site, or that it requires a subsite, or that you need to do something else altogether. With FlashDen I have the advantage that it's been almost 3 years now that I've been looking at the content and still to this day I find new arrangements and solutions.

To be an effective information designer and to find the most optimal solutions often requires thinking out of the box. Of course saying "think outside of the box" is much easier to say than to do! Sometimes we are constrained in a box we can't even see. Some time ago I heard of an experiment where a bunch of jumping bugs were placed in a glass box and over time learnt to jump only so high. When the glass lid was removed the bugs continued jumping the same, restricted height not even realising they could if they wished get out.

So how do you overcome a box you can't see? Simple! With the help of others who aren't restricted by the same issues you have. For complex information designs I will often ask other people for organisational ideas giving them only the raw problem and not my own permutations. Getting say a programmer's ideas or a user's views will often surprise you as their perspectives are completely different from your own and unhindered by the same set ways of thinking.


When you do organise large sets of information, an obvious question that always arises is how deep or how wide should your navigation be. Depth refers to how many layers of categories and subcategories there are, while width is about how many of each level there are. The trick is to find the balance. If there are too many items on a single level - especially the top level - then you risk confusing the user. On the other hand if a user has to click many levels in, you risk losing them.

A good rule of thumb is to keep the number of options on a given level to 4 - 8. If you have 8 top level items, each with 8 subcategories, and each with 8 sub-subcategories, you'll have enough space for a 512 page site. Of course rarely do things automatically balance out so well. So again you have to be careful that you don't have a heavy side and a light side. For example, on a site with a couple hundred pages, if you put contact up on the top level somewhere, chances are it's not going to have 8 subcategories with 8 sub-subcategories. It's more likely that contact is going to be a pretty simple section - even for a complex site.

On the flip side if you don't put something like contact at the top level, you may get a more balanced depth of information, however you risk not having an important user task completed because it'll be hard to figure out how to find the contact information. A simple solution to this particular problem might be to add 'quick links' where you give a user a few options on the homepage to jump deeper into the structure without navigating the usual way.


4 - Design for Scanning, Skimming and Jumping

I don't know about you, but it is seriously rare that I will ever fully read a webpage. Whether it's to read instructions, terms and conditions, or just regular copy, most of the time I skim, scan and jump. Assuming I'm not the only one who does this, it makes sense to design pages to faciliate this way of consuming information.

Don't wrap key information in bundles of text - highlight it. Don't give users paragraphs on end - break them up with headings, subheadings, bullet points, diagrams, whatever it takes! Think about how a user will use your site and design it to facilitate their use.

A good example of designing for user consumption is on our sister site NETTUTS, a site that as most of you know, publishes tutorials about web development topics. Now on NETTUTS we noticed early on that most people, on first viewing a tutorial skip right through to the end, where they try to find a link to a demo and / or source code so they can decide if the tutorial is worth reading in the first place. Once we realised this, it was a simple matter to add special Demo and Source buttons and place them consistently at the top of the tutorials. This simple adjustment to match our design up to user consumption patterns has gotten us a lot of happy feedback.


5 - Design text that wants to be read

I'm not sure if I'm just getting older, or if spending all my time in front of a screen is just making me picky, but lately it really bugs me when I'm presented with text that doesn't compel me to read it. The aim of a site design is usually to transmit information and most of that is written text, so focusing on displaying it well should be a priority.

Using too-small font sizes, low contrast between text and background colour, or badly using light text on a dark background, are all design sins that we've all been guilty of (me on many on an occasion!) But beyond these, there are other ways that your design can make the visitor actually read. Aim to design such that your layout focuses visitors on the copy and leads them in with titles, subheadings, demarcations, pullquotes, and other techniques for pulling the eye.


6 - Guide the User both across pages and through pages

Earlier I mentioned User Paths - that is set ways that users will tend to traverse a website. Many of these will come about simply by the way people behave, but with planning, you can choose how a user will be guided both through a single page and across multiple pages. Once you know specific paths you can work in visual guides and links to help them move along that path.

For example on FlashDen, when a new user arrives, it is our aim to get them to register, find files, deposit money and then buy those files. So we first give them a summary of the four step process on the homepage, then at each stop there are pointers to direct the user onto the next step. In our next redesign I'm hoping to make this path even more obvious as it's essential to the site working as it should. Note that the path I'm describing is not 4 pages, but 4 tasks. For example finding files might involve the user looking at dozens of pages, but it's one discrete task. User paths don't need to be through set pages, they can just as easily encompass set tasks!


7 - Don't overcomplicate things

It should go without saying that simple is better for users than complicated. Nonetheless it's all too easy to overcomplicate designs. I know that I often make things seem more complicated so that I have more visual elements on a page to work with (bad Collis, bad Collis!) Another overcomplication sin is using unnecessary words on buttons and calls to action. Steven Krug in his excellent book Don't Make Me Think gives the example of a hypothetical employment site with a button that reads:

  • Jobs
  • Employment Opportunities
  • Jobs-o-rama

One of these is clear, one is reasonably obvious, and one is - well who knows.


8 - Visualize Information

As designers, we more than most, know the value of a good visual. And there are plenty of opportunities to diagram or visualize some data, concepts or information. This very article as you will remember begins with a very basic diagram of how interface design, information design and aesthetic design relate. These visuals not only break up text, but they are also more memorable and give you an opportunity to bring a page to life.

DoshDosh have an interesting article on information visualization, diagrams and what the author calls infographics that is worth checking out even if it's only to see the brilliant graphic examples.


9 - Analyse your Information Design

Information design is one of those things that is hard to get right on the first attempt. So once you've built a site you should be analysing it to see how people use and digest the information, how they behave and where you can improve your design.

A neat tool in this regard is Google Analytics. For example where I mentioned User Paths earlier, Analytics lets you track paths through pages using the Goals feature. You set up a sequence of pages and Analytics will report the %'s of visitors who make it through (and by extension click away) at each point.

Another Analytics feature you can use is search term tracking which lets you see what users are searching for on your own site's search field. Knowing what people are looking for tells you what information needs to be more readily available!

Tuesday, December 2, 2008

The 3 Components of Good Web Design

Good design isn't just about good looks, and nowhere is this truer than in web design. In fact it makes sense to think of web design as being made up of three major non-technical components: aesthetic design, information design and interface design. If you want to be a great web designer it's essential that you have a firm grasp of all three.

Aesthetic Design
Aesthetic design is all about getting the look right. If you are good at this it means you will be able to design sites that not only look good but are appropriately designed. Different designs convey different messages to an end user, so it's essential that a design matches the site's message.

The other day I was walking through a supermarket and saw a juice brand that had the visual design of a laundry detergent. There was just something about the way the box was done that I momentarily wondered why there was detergent in the fruit juice aisle. In the same way giving a website an inappropriate package for its content and message - even if it's a really good looking package, is a bad end result. This is why it's very important as a web designer that you don't simply follow fads and trends blindly. You must always be thinking not just how you can make a site design look good, but also look appropriate.

Out of the three components of web design, aesthetic design is surely the one that people most identify as being design. One thing I find interesting about aesthetic design is that it is deceptively difficult. I remember once designing a poster and showing it to a friend who commented "oh it's just a few lines and some text, you must have done this in about ten minutes" - ah the joys of being a designer!

Information Design
Information design is about preparing the information on a website in the best possible way, so that users can efficiently and effectively find and digest information. In larger sites, just finding information becomes challenging, but in sites both large and small, processing it is always a design problem.

A quick example of information design is in how you organise and format text on a page. Because people tend to skim through content on a screen, it's much better to organise it with headings and subheadings, diagrams and visual hooks, and general variation for the eye. Techniques like these make the information on a page much easier to digest. But information design isn't limited to what's on a single page, itis also about what structures you use to house the site's parts, how you lay out the menus and submenus and how you cross link different sections.

You may be interested to know that in larger and more complex projects and sites, there is in fact an entire profession dedicated to modelling and structuring information called Information Architecture. The most famous Information Architect that I know of is Jesse James Garrett who incidentally coined the term AJAX. He's pretty neat and you can read about him at Wikipedia.

Collis' Awesome Diagram
Since we're talking about information design, it seems like a good opportunity to turn 6 paragraphs of waffley text into a diagram, so I present to you my awesome diagram of the components of web design! Bask in its red and grey awesomeness!

Interface Design
Interface design is the arrangement and makeup of how a user can interact with a site. The word interface means a point or surface where two things touch. So a web user interface is where a person and a website touch - so menus, components, forms, and all the other ways you can interact with a website.

Good interface design is about making the experience of using a website easy, effective and intuitive. It's actually much easier to demonstrate bad interface design because that's when you really notice it. A simple example of interface design is the use of icons. Have you ever looked at an icon and thought "what is that meant to represent?!" - well that would be bad interface design. Using icons to label and signify different types of content or actions is just one part of interface design.

Incidentally another example of interfaces that you will likely encounter as a web designer is Application Programming Interfaces or APIs. An API is the set of functions and protocols by which you (or your program more precisely) can interact with whatever the API is for. So for example Google Maps provides an API which you can use to create applications or sites that work with Google Maps.

What about ...
Now you may be thinking, that's all very well and good Collis but where does CSS fit into this? Or what about Flash? Well as I say, these are the three non-technical aspects of web design. On the flip side there are all those technologies and skills like HTML/CSS, Flash, Javascript and so on. But I tend to think they are more a part of web development than web design. In the same way that it's important to separate HTML and CSS to keep information and presentation separate, you could argue that how you make a design come into reality is separate from the design itself. In simpler terms, is knowing a specific CSS hack anything to do with design?

Don't get me wrong, you need to know how to build things in order to design them appropriately. However when it comes to saying what makes up web design, my answer remains Interface Design, Information Design and Aesthetic Design.

What's your take? Have I missed some essential part of web design? Or do you think that web development is an essential part of web design itself?

Later this week you'll be able to read more in-depth articles of tips and tricks for each of these three components of web design - interface design, aesthetic design and information design. In fact the first one is going to go up in a few short hours.

Friday, November 14, 2008

Web Page Design Overview

Web Page Design Overview

This introductory-level article provides checklists to help with planning a new website. Tips include the effect background colors can have on site visitors and page length considerations such as using shorter pages to break up text by topic or using longer page lengths for ease of printing.
Designing a web page is a creative process. The page gives you the opportunity to express yourself or convey information using an interesting array of options including text, graphics, photos, video, sound, and animation. 

Like most creative endeavors, however, the process is not linear or step-by-step. Therefore, it's best to understand the elements necessary to create a page and then find the way that works best for you. 

Your page will change many times as your idea evolves into the final product. To begin, don't be afraid to keep it simple. Create a page with just text and a graphic to get a feel for how it all works.
 
So how to start?

Pick a Starting Point

So where do you begin? It is best to begin by planning and exploring. See web options in action by browsing the web and looking at what others have done. 

Once you have an idea for the page you would like to create, you can get down to work and begin to create the text file that will be the foundation for your page. The text file will contain the HTML codes that make it all happen.
 
Having a basic understanding of how the HTML codes work is very important. Even if you use a web editor to create your page, you will, at some point, need to correct the coding or go beyond the capabilities of the editor to customize your page. If you know how the codes work, the task won't seem so daunting.

Evaluate your Progress

Check the progress of your page as you go along by saving the file and then opening it in a web browser, such as Netscape. You don't have to be connected to the Internet to view your page.

Using Graphics

The most memorable elements of a web page are often the graphics. In order to use graphics on your page, you must consider how to acquire them and also understand the file formats and limitations dictated by the web. 

There are a number of ways to acquire graphics for your page. You can create them yourself, scan them, or buy commercial clipart. You can also copy graphics from other web pages, but this should be done only if you have permission, since most graphics on the web are under copyright protection.

Consider following methods for creating and designing your web page:

• The Process of Creating a Web Page
• Designing Your Site

Web Page Design Overview - The Process of Creating a Web Page

1. Formulate your idea

Why do you want a web page? 

What information would you like to present?

2. Explore the options

See what kinds of elements you can incorporate in your page by looking at other pages.

3. Gather your materials

Take inventory such as text and graphics that you can use.

4. Create the HTML coding

Behind every web page there are HyperText Markup Language (HTML) codes that makes the page appear the way it does.

5. Check your progress

As you develop the coding, open Internet Explorer to check your progress.

6. Transfer the files at one of the web-hosting site server

To make your page public, your HTML files must be uploaded to a  web-hosting site server.

7. Test, tweak, and publicize it

Open your web browser, and go through your page to make sure all the elements appear properly and test all links to make sure they work.

Web Page Design Overview - Designing Your Site

Topics to be covered:

I. Content 
II. Layout 
III. Text 
IV. Graphics 
V. Backgrounds 
VI. Temptations 
VII. Finishing Touches 

I. Content  
               
Select your content carefully

Content is the most important aspect of your website. Keep in mind that people come to your site to get information. No matter how many hours you've spent scanning or animating graphics, if you're not delivering the content that people want, they won't stay very long and they probably won't return.

Define your purpose

Before you start to plan your website, determine why you're developing a site and what you hope to achieve. After you design your site, or if you already have a site, look carefully at your site and ask yourself the following questions:

Why does this site exist?

Who am I trying to reach?

Can my visitors easily find what they need?

Why would my visitors return to this site? 

Update your site frequently
    
A website with a schedule of events from last year looks unattended. If your site features up-to-date information, include the date of your update.

Display important information prominently

Don't bury important information in long paragraphs or in pages embedded deep in your website.

II. Layout
                
Lay out the text first

Before you concern yourself with graphics, you should lay out the text of your web page first. The content and the layout of the text should then suggest the types of graphics you need and the best placement for them.

Use long pages for printing or downloading

Printing or downloading one page is easier than handling several pages. You can help your visitors read through a long page by creating a clickable table of contents at the top with internal links to specific sections on the page. You can also include a hypertext link, such as "Return to top of page," after each topic. The drawback of using long pages, however, is that they tend to go on-and-on. Also, a page of 40 Kilobytes (KB) or more may take a long time to fully appear on the screen.

Break up topics into shorter pages

To do this, design one index page with links that jump to shorter pages. Each page should treat one subject only. While shorter pages offer the advantage of less viewing time, they are harder to print than longer pages.

Provide navigational tools

If you have a complex site with multiple pages, you may want to have one- or two-word designations that allow your visitors to jump to other sections of your website. The most common links include a "home" or "top of page" link and "clickable" images or buttons.

Include links to other sites

The power of the web is its ability to link to other pages, but be careful. When a visitor arrives at your site, you don't want to send that person away too quickly. Also, remember to frequently check outside links to make sure that they still exist and have not moved.

Use descriptive page titles

The title of your page displays at the top line of your web browser. The title is important because it often shows up in search engines such as Google and as the bookmark name. Make sure your page title accurately describes your site by including keywords that people might use to find your page.

Web Page Design Overview - Text and Graphics

III. Text 
              
Condense your text

Edit your text to the minimum that you need to get your message across. Use white space to break up areas of text and avoid sections that contain only long paragraphs.

Use headline typefaces sparingly

Normal typeface looks more modest. Otherwise, you risk overkill. Don't use all caps or overuse the bold and italic styles.

Make sure your text is readable

Whatever color or texture you choose for your background, don't let the background overwhelm the text. Instead, select a background that subtly complements your text. If your visitors can't read the text, they won't stay.
 
Choose a high-contrast color for your text

For example, use light text on a dark background or dark text on a light background. Avoid using green text on a red background or vice versa. Red and green have the same value (lightness or darkness), so people who are red/green color blind cannot differentiate between the two. If you expect people to print your page, consider using standard black text on a white background.

Be consistent

Don't mix and match fonts or colors. Decide on the font style, size, and color and use the same style consistently, even on subpages. The same guideline applies to textured and colored backgrounds. They can unify your pages as long as you are consistent with your choices.

Proofread your text carefully

Nothing destroys the professional look of a site more than typos and spelling mistakes.

IV. Graphics
              
Avoid using large images 
                 
The larger the image, the longer it takes to load the page. The longer it takes to load the page, the more likely your visitors will go somewhere else. 

In general, you should avoid using a graphic larger than 30KB. You should also try to limit the total size of your images on one page to less than 40KB. Web browsers are usually set to automatically display images. Don't make your readers wait too long to see them.

Web Page Design Overview - Backgrounds, Special Effects and More

V. Backgrounds          

Choose background colors carefully

Many websites today use a simple white background so that text is easy to read, but you can choose any color. Be cautious, however. Research on color has shown that color can affect how people perceive information. For example, royal blue represents a conservative or traditional approach while gray evokes a feeling of being uninvolved. Red increases blood pressure and heart rate and indicates an urge to achieve results and succeed. Also, you should avoid using bright colors, such as neon tones, because they can be hard to look at for too long.

Avoid large backgrounds

There are lots of sites on the Internet where you can get free backgrounds for your site. Be careful though about selecting one of these backgrounds. Some are "too busy" and distracting and many are large and, therefore, take a long time to load. 

VI. Temptations
          
Use special effects sparingly
                               
This is one instance where the old saying "less is more" applies. Have you ever browsed a page with several blinking text items or animations going on simultaneously, or a page with five or six frames, each tiled with a different background image? Then you know that too many special effects can be irritating. Use special effects, such as frames and animations, conservatively and tastefully to enhance your web page. You don't want to overwhelm or annoy your visitors.

Avoid copyright violations

The current copyright laws and their application to the Internet continues to be a topic of debate. For example, just because art or information is on the Internet, it does not mean that you have the right to copy it. Also, you cannot copy text or images from books, magazines, or other sources and place them on your website. Even using clipart that you have purchased for print may be illegal for use on the web.

Instead, create your own text and, if possible, draw your own graphics. Also, consider purchasing clipart that you can use on the web. 

VII. Finishing Touches
            
Add horizontal lines

Horizontal lines are effective design elements that you can use to separate different elements on a page. Lines don't take any extra time to download, and you can vary their length and width. 

If you wish to spice up your page, consider using color lines. They take a few seconds to download, but they can add a strong design element to your page, especially if you coordinate the lines with the color scheme of your page. Avoid using different types of lines on the same page, and be careful -- too many lines can be distracting.

Include bullets

You can use bullets to set off lists or to break up the page visually. Color balls, arrows, and pointers are also available, but remember, a little color goes a long way.

Use markers

If you want to draw your viewers' attention to new items on your page, you can add colorful markers that identify the items as "New" or "Updated." Again, don't overdo it -- one or two markers per page is sufficient. More than that defeats the purpose.

Include an e-mail address link
         
Invite your viewers to contact you by including an e-mail address link on your page. This link will take your visitors directly to a window where they can type and send you an e-mail message.

This is how you can design your site. So what are you thinking? Get set go.

Sunday, November 9, 2008

Strategic Design: 6 Steps For Building Successful Websites

Web design isn’t art. It involves a whole collection of different skills — from copywriting and typography to layout and art — all fused together to create an interface that not only features a pleasant aesthetic but that communicates function and facilitates easy access to its content.
But in order to combine all these elements of Web design together and achieve successful results you must have a clear direction, a direction that will guide each and every aspect of your design towards common goals. You must think strategically.

What is strategic design?
Strategic design is the fusion of your organizational goals with every aspect of your design process. You aren’t simply designing a user interface that looks good and is usable and accessible. You’re designing an interface that will help you accomplish your organization’s objectives.

There are many websites out there that look fantastic and sport the latest trends in design yet often fail miserably in their intended function. Design trends are, of course, important because they give you fresh inspiration and new techniques, but the implementation of those techniques and styles needs to be intelligent and focused. For example, a blog isn’t a marketing brochure; you should focus on usability and readability rather than style. Similarly, a promotional website for a computer game should feature graphics and styles that portray a specific feel and style; the aesthetic is very important here.

When the designer simply implements a look and feel that is fashionable at the moment (think Web 2.0 trends) without any thought of how they fit the function of the website or the business behind it, the end result is unlikely to be very effective.

Web design is all about crafting an interface that communicates function, is usable and accessible and exudes the right emotion and feeling. Effective Web design needs all of these elements to be in tune with the goals of your website and in sync with the organizational objectives behind the website. Strategic design is all about identifying those goals and using them to guide your design.

Implementing Strategic Design
Let’s take a look at how we can use six steps to think strategically about a Web design project:
1. Establish your goals
One of the first things you need to do before starting work on a Web design project is to be clear about your client or organization’s goals. What are you trying to achieve with the new website or redesign? What is the website’s main purpose? Ask your client, your manager or yourself what those are. If they or you don’t know yet, then they should be discussed and agreed upon. A clear direction is essential if you want your design to have a purpose.

Remember that a website isn’t a piece of art; it’s an interface that serves a function. That function may be to sell products, to deliver informational content, to entertain, to inform or to provide access to a service. Whatever that function is, your design must focus on fulfilling it. Goals are also important, especially if you’re doing a redesign. Ask why you are doing the redesign: are you looking to grow the number of sign-ups, decrease the bounce rate or maybe increase user participation?

Take a look at the design of the New York Times website above. Its function is to deliver informational content. The minimalist interface serves this function beautifully by fading into the background.

In contrast to the New York Times, AdaptD is a Web design studio, so the goal is not to deliver a lot of content but to impress visitors with its design, showcase a gallery and advertise the company’s services. The visuals are very important here, and AdaptD delivers a browsing experience with beautiful imagery and strong colors.

2. Identify your audience
Who your audience is will play a big role in how your website should look and function. There are many demographics here that can influence your design, ones like age, gender, profession and technical competency. A computer game website for a younger audience needs a different style than that of a serious business journal. Usability should play a bigger role for older and less technically savvy audiences.

Who your audience is will not only influence the general aesthetic of the website but will also determine a lot of smaller details, like font sizes, so make sure you’re clear about who will be using your website.

This is the unsuccessful jQuery rock-star redesign. The designer went too far in trying to create excitement and so failed to cater to the more serious, techy audience. Since then, the rock-star graphic has been replaced with a more conservative look.

Disney’s target audience is kids. The intent is to entertain and involve this young audience, and the design does it by wrapping the content in a fun, colorful interface with a lot of visual and interactive elements.

3. Determine your brand image
A lot of designers tend to get a little too inspired by the latest trends and then implement them without thinking first about what sort of image they really should be conveying. Glossy buttons, gradients and reflective floors may work for some websites, but they may not be right for your brand.

Think about color. Think about the feel you want to achieve and emotions you wish to elicit. Your design should embody the personality and character of your brand. Everything has a brand; even if you don’t sell a product or service — for example, if you run a blog — your website still has a certain feel that makes an impression on your visitors. Decide what that impression should be.

Carbonica is a website aimed at helping people reduce their carbon emissions. The environmentally friendly image of the website is crafted using a lot of recycled paper images and textures, as well as earthy green and brown tones.

Restaurantica is a restaurant reviews website. Its design illustrates this by taking on the look and feel of an actual menu you would see in a restaurant.

4. Goal-driven design direction
You’ve established the purpose of your website, set some goals you want to achieve, identified your audience and determined your brand image. You can now proceed to implement it. So how do you make design decisions sync with your strategy? Let me illustrate this with a likely example.

Suppose your main objective is to increase the number of subscribers to your Web service. How can your design help accomplish this goal? I can see at least three things here that will make a difference:
Make the “About” snippet on your landing page as clear and concise as possible. Your visitors must not have any confusion about the function of your website.
Use color and contrast to make the registration button or link stand out. If people can’t find it, then you won’t get many sign-ups.

Streamline the registration process by removing unnecessary and optional elements; people can fill those out later. If the form looks long, people may be put off of filling it in.

These are just three ways you can lead your design towards accomplishing the goal of increasing the number of sign-ups to your service. Your goals may vary, but the strategy is the same: shape and focus all the design elements towards meeting those goals.

The same strategy applies to your brand and audience: design the aesthetic that best suits it. If your website’s focus is entertainment, then create an “experience.” You are free to use a lot of color and imagery to shape that experience. On the other hand, if you’re designing a website that is focused on information consumption, for example, a blog or a magazine, then focus on usability and readability. Create an interface that fades away and doesn’t distract the user from accessing the content.

Stubmatic is an online box-office application. Their external website has two purposes: explain what the service does and get people to sign up. New visitors may only remain on your website for a few seconds, so if you don’t want to lose them you must be concise. You can do this by:
Using large imagery and diagrams to illustrate the function of your product or service.

Showing screenshots of your application. People will want to see what it looks like before they commit to a download or sign up.

Providing a tour, using descriptive examples of how your service can help them solve a problem. Show a video if you can; the less effort people need to make to understand how your app works the better.

Having the sign-up link accessible from all pages.
To succeed, the website must make the best use of the very limited amount of attention visitors will be giving it by not only informing but educating them about what your product does, and selling the benefits it provides. Stubmatic uses design elements effectively to pursue those goals.

TechCrunch is one of the more popular tech blogs. Its new design removes every single unnecessary graphical element from the page. What’s left is just the content, advertising and navigation. Subtle lines and grey shades give the page structure, yet the interface is almost invisible and places content straight into the front row. For a blog that posts several new articles a day, this format is ideal because it facilitates fast and easy access to the content.

5. Measure results
Once you’ve designed and deployed your website, it’s time to measure your success. This is just as important as the first two steps because until you test how well your design performs, you won’t know whether or not it is effective in fulfilling your goals.

If your goal is to increase the number of sign-ups to your service, measure it and see if your changes are making a positive impact. If you want to increase the number of subscribers to your blog, check your RSS stats. If you want to increase user involvement, see if you get more comments or more forum posts or whatever else is relevant in your context.

You can, of course, also ask people for their feedback, and this is a very good way to check if you’re on the right track. Be careful though not to implement every suggestion people make. Everyone has different tastes and wants, so everyone is going to have a different opinion about what your website should look like. If you do collect feedback, look for patterns; see if there are common issues that crop up and deal with those.

Measuring various website metrics is a whole science unto itself and is beyond the scope of this article. But however in-depth your analytics are at this stage doesn’t really matter; the important thing is that at the very least you have some way of measuring your key objectives. You can use this information to see if you’re moving in the right direction with your design and with any future changes you or your client make.

Even if you’re on a tight budget, you can use free tools like Google Analytics to get a lot of data on how your website is being used, including overlays of your pages to see what links people click on most as well as the ability to track conversion funnels.

6. Kaizen
There is a Japanese philosophy called “Kaizen,” which focuses on continuous improvement using small steps. When you work on your website, you should be thinking of Kaizen because the version you’ve just published is not the final version. There doesn’t even have to be a final version.

You can always make improvements, and the very nature of a website will allow you to introduce these at any time. This is because a website isn’t a magazine that you print and sell: once a magazine copy is out of your hands, you cannot make any changes or fix any spelling mistakes or errors. A website, however, sits on your server: if you find a mistake, you can fix it right away. In the same vein, you can introduce gradual improvements and updates to make your website more effective in serving its function.

Using the results of your measurements, you can identify problem areas. Perhaps your visitors cannot find the RSS feed link, or your bounce rate is too high or an important page on your website isn’t getting enough visits. Whatever the problem is, there will always be a way to improve things.

Conclusion
The main gist of strategic design is simply common sense: you’re making something for a specific purpose, so of course it should fulfill that purpose through its design. But it is actually very easy to lose track of your goals and end up with something that is beautiful but ultimately doesn’t work in its context. It’s very easy to fall into the trap of implementing the latest design trends just because they look attractive or shaping a section of your website to resemble another website that you really like without first thinking about why you are doing it or how it fits in with the purpose of your project.

Avoid falling into these traps by thinking through every design decision you make. Why is this button this color? Why are we using tabs? Why should we use icons here? Once you get into the habit of questioning your every design decision, the whole process will become much more focused. Think about the product or organization you’re representing. Think about the target audience and your brand. What will work in this context? What is expected? How can you use design to best fulfill the website’s purpose? Don’t just build a beautiful website: make a website that really works.

Saturday, November 8, 2008

Important things to remember when creating an ecommerce website

One can say without a shadow of doubt that the internet has truly made business global. Thanks to ecommerce and the loads of money it is making for online businesses, the money making opportunity that exists in cyberspace is now being well and truly exploited by businesses. This has been helped by emerging technologies and trends that are making online shopping easy and pleasurable. Now, anyone can become a part of the world marketplace. All they need is a computer and a net connection!

All this may seem encouraging. For many businesses that have entrenched themselves in their niche, online business is roaring. However, it is important to remember that the percentage of highly successful online businesses is rather small. A large number of ecommerce websites are lying unseen and uncared for in the lonely stretches of the information highway. If you do not want the same thing to happen to you, it is important to keep certain points in mind while creating an ecommerce website.

Think before you leap. Before you can get your website developed, prepare a plan. Note down how you want your products to be listed and showcased. Think about the checkout process, and write notes about how you want it to work. You are the businessperson. So, you need to decide how your shop should look. Ideally, you should be able to guide the person who develops your website to follow through.

Encourage shopping by creating an atmosphere that is conducive to shopping. Remember how we like to go to a shop, touch things, pick them up, look them over and read about them before we make a purchase? Web purchasers feel the same way. So, allow them to see pictures and read testimonials whenever possible.

Online shopping is a little scary for many. What is the product does not arrive on time? Or, what if it is damaged, or not up to expectations? Allay the fears of your shoppers by having clear cut return and delivery policies. Leave nothing to the imagination. Have everything in black and white.

A secure merchant account is the lifeblood of your online business. So, you have to pay particular attention to it while creating your ecommerce website. Of course, you know that shopping carts conduct payment processing. But there is a lot more that they can do. For instance, many shopping carts produce SEO friendly code automatically, thus allowing your pages to be listed by search engines. Many have elaborate control panels that make it easy for you to list your products, edit information and so on. So, choose your shopping cart software wisely. Look for one that gives you maximum utilities at a reasonable cost.

Finally, your house is only as strong as the material you sue to build it with! So, choose your web host carefully. You need a company that is serious about giving you complete online support and backup. The more features you get, the easier and smoother it will be for you as well as your customers.

Tuesday, November 4, 2008

The Science of Web Design and Website Usability



Many people get into Web design and development because they secretly want to be designers. Think about it, when you first found the TextArt in Word, you fell in love. Every one of your documents had to have some fancy coding and pretty text or images, even if it was just the color of the text.

HTML and Web Development gives people who would normally be programmers working with code a chance to be more visually creative, and this is fun.

But there can be a science behind Web design. Your choice of font and the width of your page shouldn't just be based on "what you like". Follow these simple steps to be more scientific in your Web design:

Usability Testing
Usability testing can be as elaborate or simple as you need, but no matter whether you have your mom look at your pages or do a complete usability test scenario, you should have someone not familiar with your site look at it. If you can, try to be in the room while they test. Watch what they click on and what they ignore. If they're ignoring your buy button and you've created an ecommerce site this is a serious problem.

Browser testing
Never assume that because it looks fine in your favorite browser, that it will look fine in every other one. This also includes the same browser on another operating system. Check your Web page on every combination of browser and OS that you can get your hands on.
Learn from Desktop Publishing and Established Design Principles

Many new Web designers have never had any formal training in design and end up trying to reinvent the wheel when it comes to layout and style rules. Line lengths for readability, colors for emphasis, and margins for look are all basic principles of DTP and can be translated to the Web.

Use your log files
Log files can be very tedious, but the are a valuable tool for designers. Get a good log analysis tool and use it to find out thing like:

* where people go from your front page
* what they click on the most
* what pages are least successful

Once you have this information, you can modify your site to lead your customers where you want them to go.

Don't be afraid to redo
One of the biggest advantages to the Web is how easy it is to make changes. If you create a design and later it doesn't work as well as you'd planned, then change it.

Designing a Web site is a lot of fun, but bringing some structure and science into the design will help you create a page that your customers will find beautiful and usable.

Sunday, November 2, 2008

99 Useful Resources for Graphic Designers

I have used every one of these resources as a graphic designer and website developer and have hand picked all of these resources based on their usefulness and overall quality.

I hope you find these resources as useful as I do! Enjoy!

Organizations
1. http://www.gag.org/

The Graphic Artists Guild promotes and protects its members and is committed to improving conditions for all graphic designers and the whole industry. They also produce the well known Graphic Artists Guild Handbook which is an essential part of any designers library.


2. http://www.aiga.org/

AIGA, the professional association for design is dedicated to protecting and advancing design and its importance to society. AIGA now represents more than 19,000 designers through national activities and local programs developed by more than 55 chapters and 200 student groups.


Education
3. http://www.guidetoonlineschools.com/

Guide To Online Schools is an education directory that specializes in online degrees, online schools, and distance learning. They showcase a variety of accredited online schools that you can get your graphic design degree from.


4. http://www.getdegrees.com/

Getdegrees features the nations best online degrees from over 300 colleges. As as designer, you can find accredited art degrees online from such schools as The Art Institute of Pittsburgh - Online Division & Westwood College Online.


5. http://www.graphic-design-schools.org/

Graphic Design Schools is your unofficial guide to getting into a graphic design school.


6. http://www.artdesignschools.com/

Art Design Schools provides an extensive list of campus based and online art schools.


7. http://www.computer-schools.org/

Computer Schools is a great blog that focuses on helping people land careers in computers.
Generally Useful


8. http://www.lipsum.com/

This is a pretty famous site within the design community; you can generate dummy text on this site to put into your designs until the real copy is available.


9. Best Web Gallery

Best Web Gallery is a great website if you are looking for the best Flash and CSS websites.


10. http://www.csstype.com/

An incredibly useful site that shows you exactly how web fonts will look on your screen.


11. http://www.brandsoftheworld.com/

This is the ultimate branding library with thousands of the worlds most famous and popular logos. Great for researching corporate identity.


12. http://www.bloglines.com/

Bloglines is a great way to organize all the blogs you read into one place instead of having to visit a bunch of different websites and is a good time saver.


13. www.mozilla.com/en-US/

Arguably the best web browser out right now. I use it for most of my web browsing but don’t forget the other browsers when it comes to optimizing your website. Not everyone uses the same browser.


14. www.mozilla.com/en-US/thunderbird/

This is my favorite email client to use. It’s simple, efficient, and easy to use with solid email alert features. Very handy if you get important emails often.


15. http://www.adobe.com/

Home to the well known design software we all know and love. Good site to check out once in a while for updates and help regarding software such as Photoshop and illustrator.


Networking & Freelance Work
16. http://www.craigslist.org/

Craigslist is one of my favorite forums to use. There are tons of new design jobs and gigs added every day but the competition is stiff so bring your “A” Game.


17. http://www.getafreelancer.com/

If you are looking for an affordable but professional coder this is the place to go. Freelancers bid on projects you post.


18. http://www.linkedin.com/

Linkedin is a very popular site for professionals and is a valuable networking tool.


19. http://www.krop.com/

Krop.com has a database of jobs for designers, artists, and developers with an instant and easy to use search feature.


20. http://www.coroflot.com/

Corofloat.com is a site where you can promote and host your design portfolio, search for jobs and post to hire some one.


Stock Photography
21. http://www.istockphoto.com/

This stock photography site has incredible photographers and even better prices for illustrations and photos. It will make your life way easier as a designer and has many other benefits such as making money selling your illustrations and photography, networking with other design professionals, promoting your portfolio site, access to active forums and much more!


22. http://www.corbis.com/

Corbis is one of the leading stock photography sites with millions of images online, featuring historical, fine art, business, technology, celebrity, travel, sports and nature photography.


23. http://www.shutterstock.com/

Shutter Shock is a subscription based stock photography site with over two million royalty-free stock photos available.


24. http://www.bigstockphoto.com/

Big Stock Photo lets you upload and download low-cost digital stock photography. They have well over a million photos organized into categories.


25. http://www.gettyimages.com/

Getty Images offers a large searchable collection of rights-managed or royalty-free images and films. Getty Images is a great site if you are looking for current event and public figure related photography.


Color & Charts
26. kuler.adobe.com

Kuler is a useful site to go to find color themes for your projects. Users can submit their own themes to be rated and you can search for many type of color themes.


27. http://www.colourlovers.com/

Colour Lovers is a great site with user submitted color palettes and even cooler is their blog that creates color palettes based on each blog posts at the end of every post.


28. http://www.logoorange.com/


Nice chart that converts PMS colors to CMYK and RGB color codes for you.


29. http://www.ideo.com/

This extremely useful but simple web safe color chart lets you easily see exactly how different colors will look on your screen.


Inspirational Sites
30. http://www.cssbeauty.com/

CSS Beauty provides its users with a database of well designed CSS designed sites, as well as news and happenings related to the CSS Community.


31. http://www.thecoolhunter.net/

The cool hunter looks for the coolest and craziest stuff from around the world. Be sure to check out the design and art sections on the site.


32. http://www.logopond.com/

The Logo Pond is a great site to go to if you are looking for inspiration while designing a logo. You can even submit your own logo designs to be voted on and reviewed. Good way to get exposure for your studio or freelancing portfolio.


33. http://www.go2web20.net/

The Web 2.0 Design style is the big thing right now and many websites are redesigning their look to get with the times. This awesome site has a massive collection of all the new web 2.0 logos and links the websites.


34. http://www.cssvault.com/

CSS Vault has a collection of spectacular CSS websites and resources including: Articles, Demos, Layouts, Tutorials, and more.


35. http://www.stumbleupon.com/

After selecting topics of interest you can stumble upon quality sites related to those topics. I have found countless amazing sites doing this and not only is it great for finding new sites but it can be a killer way to promote and drive traffic to your own portfolio site or blog.


Portfolio Sites
36. http://www.altpick.com/

Altpic.com is a great portfolio website for artists and designers where many people come searching for the best oif the best. It is a great place to showcase your designs and talent.


37. http://www.portfolios.com/

Portfolios.com is a portfolio search site where viewers can easily browse through thousands of free artist and designer portfolios.


38. http://www.deviantart.com/

DeviantART is a large community of artists and designers who share their work with each other via an online portfolio. Many digital artists and illustrator flock to this site and you can even buy prints of your favorite artwork.


Design Magazines
39. http://www.printmag.com/

PRINT magazine is a very famous bimonthly magazine about visual culture and design.


40. http://www.howdesign.com/

HOW Magazine covers many areas of design such as the business aspect, new technologies, up and coming designers and is a place for creative inspiration.


41. http://www.idonline.com/

I.D. magazine is an International design magazine that covers products, graphics, environments, interactive media and other design related areas.


42. http://www.computerarts.co.uk/

Computer Arts is an informative site with free downloads, tutorials, galleries, competitions, a published magazine and much more.


43. http://www.maclife.com/

MacLife.com provides news and analysis of the popular Apple products and also has daily blogs from Mac Life magazine editors and a nice selection of articles to read.


44. http://www.pcmag.com/

This magazine is definitely handy for any designer. The hardware we use is the back bone of most of our work and PC Magazine has solid reviews of the leading equipment. I always look up products on their website before I buy anything.


45. http://www.pcworld.com/

PC World is a great place for Computer and Internet news and information, Resources, how-tos, downloads, products and more.


Fonts
46. http://www.dafont.com/

Dafont is an easy to use free font site with a large collection of fonts to download it. It has been around a while and is updated often with new fonts.


47. http://www.urbanfonts.com/

Urban Fonts is new to the font world but has quickly established itself as a leader in the free font community. It has an excellent design and is right up there with dafont.com in my book.


48. http://www.fontshop.com/

Font Shop offers great font collections on CD, free fonts, downloadable fonts, typography tips and more.


49. http://www.linotype.com/

Linotype has a massive collection of the most popular and well known fonts available for download. They also have a font lounge with many interesting font related resources.
Tutorials


50. http://www.pixel2life.com/

Pixel2life is one of the largest tutorial search engines on the internet providing great tutorials to graphic designers and programmers.


51. http://www.good-tutorials.com/

Good Tutorials is a massive tutorial website with tens of thousands of tutorials for Photoshop, Flash, Illustrator, and more.


52. http://www.w3schools.com/

If you need to brush up on your coding skills then this is the place to go. The information is accurate and up to date and its def worth taking all the tutorials.


53. http://www.tutorialoutpost.com/

Tutorial Outpost has a vast collection of thousands of tutorials for Photoshop, Illustrator, Flash, 3D Studio Max, and more!


Photoshop Brushes
54. http://www.brusheezy.com/

Brusheezy is a very useful site with lots of great sets of free brushes varying in style.


55. http://www.psbrushes.net/

PS Brushes is home to over 500 Photoshop brushes that are all free to download and categorized for easy searching.


56. http://www.getbrushes.com/

Get Brushes has sets of Photoshop brushes made up of various swirls, ornamental designs, and flourishes. flowers, dots, circles, and various other ornamentations.


Printers
57. http://www.4over4.com/

4over4 is a good balance between quality and affordability and can handle most of the print jobs you would require.


58. http://www.modernpostcard.com/

Modern postcard is known for its quality printing but can be a bit pricey compared to other sites. If you are looking for top notch printing though look no further.


59. http://www.vistaprint.com/

Vista Print provides custom full color printing services. You can print business cards, Christmas cards, stationery, postcards, magnets, brochures, address labels, and even more.


60. http://www.clubflyers.com/

Club Flyers is an easy to use online printing service with many options available and fast shipping times.


61. http://www.alocalprinter.com/

If you are looking for a way to help the environment as a graphic designer then check out the new age of eco friendly printing.


Blog Hosts
62. http://www.wordpress.com/

Wordpress is my blog host of choice. It’s free and easy to set up on a server and there are tons of great themes and widgets available to use. I use Wordpress for all my blogs.


63. http://www.blogger.com/

Blogger is another very popular blog host. It has many of the same features Wordpress offers.


64. http://www.twitter.com/

Twitter is a surprisingly fun, easy to use and useful site when it comes to letting people know what you are up too.


65. http://www.squidoo.com/

Squidoo is an easy way to put up a quick and free website page about any topic you want. It is very popular in the affiliate marketing industry.


66. http://www.tumblr.com/

Tumblr is another super easy blogging tool that is very similar to Squidoo and twitter and just as good as both of them.


Blogs
67. http://www.designobserver.com/

Design Observer is a well respected site in the design community that features writings related to all aspects of design and culture.


68. http://www.lifehack.org/

This great site is dedicated to hacking your life by providing you with tips and tricks to get things done quickly by automating, organizing and increasing your productivity.


69. http://www.ilovetypography.com/

I Love Typography is a great web site devoted to typography, type, fonts and typefaces of all kinds. If you love typography you will enjoy this site.


Web Hosting
70. http://www.hostgator.com/

Host Gator is a well known, reliable and affordable web hosting company. They have a wide range of hosting services to take care of all your websites bandwidth needs.


71. http://www.godaddy.com/

Go Daddy is one of the biggest and most affordable web hosting and domain registration services. They have excellent customer service and quality servers. It is also very easy to mange you domain names and this is important if you have a lot of them.


Web Design Forums
72. forums.digitalpoint.com


This is one of the biggest and most popular programming forums around; there are many thread topics raging from coding and servers to search engine optimization and graphic design. It’s a great place to ask questions, find help or promote your services.


73. http://www.webmasterworld.com/

This is a very active and informative forum on the world of web design. It is a great place to learn and have questions answered.


Graphic Design Forums
74. http://www.graphicdesignforum.com/

This is a discussion forum dedicated to all topics related to graphic design.


75. http://www.graphic-design-forum.com/

This is another active design forum that allows you to chat about graphic design and post designs for a review.


76. http://www.steeldolphin-forums.com/

This is a fine art and graphic design forum where many users showcase their work and discuss fine art and graphic design with fellow community members.


Keyword Research
77. http://www.freekeywords.wordtracker.com/

This is an extremely important free tool for keyword research. If you don’t use this tool before you launch a site or blog then your missing out. They also have a more extensive paid version.


78. http://www.wordze.com/

This is another powerful keyword research tool.


79. www.google.com/trends

Google Trends is another good way to research keywords. Some keywords tend to be seasonal so you can check to see if certain keywords tend to fluctuate traffic wise at certain times of the year.


Search Engine Optimization
80. http://www.seomoz.org/

SEOmoz serves as a central hub for search engine marketers worldwide, providing education, tools, resources and paid services related to search engine optimization and marketing.


81. http://www.thirtydaychallenge.com/

This is probably one of the most informative sites I have ever come across in terms of search engine optimization. It literally changed my life.


82. http://www.seroundtable.com/

SEO Roundtable reports on interesting threads taking place at the SEM (Search Engine Marketing) forums. They also write many articles on the topic of search engine optimization and marketing.


Advertising
83. www.google.com/adsense

Google Adsense is a powerhouse in the advertising industry. If you are looking for an easy way to monetize our website or blog then you will definitely want to check this site out.


84. http://www.adbrite.com/

Adbrite is a popular and easy to use text link advertising website where you can buy text link spots or make money by selling advertisement space on your site.


85. http://www.adengage.com/

A place to buy and sell text link ads on popular websites related to your website or blog.


86. http://www.text-link-ads.com/

This is another very popular and easy to use text link advertising site where people can easily purchase advertising space on your blog or website.


Computers & Electronics
87. http://www.apple.com/

Apple computers are a standard in the design industry and they are a great choice if you are looking for an alternative to personal computers.


88. http://www.newegg.com/

I love checking new egg for products because of their fair prices and customer reviews.


89. http://www.tigerdirect.com/

Another great site if you are shopping for anything electronic. They have affordable prices and a wide selection of products to choose from.


90. http://www.amazon.com/

Amazon is fast and reliable and is my favorite online store to buy books from. Delivery is always top notch.


Art Supplies
91. http://www.dickblick.com/

Dick Blick Art Materials has been providing artists with the best supplies since 1911. They have a huge selection of merchandise and good prices.


92. http://www.pearlpaint.com/

Pearl Paint is one of the world’s largest discount art suppliers and has a vast selection of art supplies at very affordable prices.


93. http://www.aifriedman.com/

A.I. Friedman is another great business that has been serving the artist community for over 70 years. Their products range from basic art supplies to studio equipment and furniture.


Graphic and Web Design Books
94. How To Be a Graphic Designer Without Losing Your Soul By Adrian Shaughnessy


95. Thinking with Type By Ellen Lupton


96. About Face: Reviving The Rules Of Typography By David Jury


97. Graphic Artists Guild Handbook By Graphic Artists Guild


98. HTML, XHTML, and CSS, Sixth Edition By Elizabeth Castro


99. Bulletproof Web Design By Dan Cederholm


Conclusion
I hope you have found all these resources helpful and inspiring and we look forward to brining you more resources in the future. Good Luck!!!