A Web Design Lecture by Steven Choy
Overview: Setting site goals - Understanding the target audience - Check out the competition - Information Design - Organizing content and site diagrams - Navigation design - Planning website's look-and-feel
Introduction
- 7 steps to a great site
- Planning
- Design
- Writing and content gathering
- Building the site
- Testing
- Promotion
- Evolution
Setting site goals
- Before you begin planning out your website, make sure you have a good idea of what success will look like. Your goals for your website can lead to very different planning, design, and promotion strategies. (Source)
- Your goal should be clear and verifiable.
- What do you mean by success?
- What do you want your website to achieve?
- Decide on a short and clear goal for your website
- Focus on achieving your goal
- Some typical examples of website goals
- Provide current or potential customers with information
- To generate new leads
- To sell products
- To provide information to the public
- Attract new customers - Bring more visitors to your site by optimizing for keyword searches.
- Persuade visitors to buy - Show photos, lists, portfolios, case studies that demonstrate the quality of your products or services and the results you achieve for clients and customers.
- If you work for other company, you need to know your client. Here are the main aspects you should know about your client:
- Company/Client/Industry
- Current website (if available)
- Competition
- Target audience profile
- Products and services
- Available resources for the project
- Content requirements
- Visual requirements
- Technical requirements
- Reading: Creating a Site Design Plan - By Karen Morrill-McClure
- More examples:
Understanding the target audience
Check out the competition
- Take a look at your competitors' websites to see
- what they have done well and
- what they have done badly.
- Learn from other people's mistakes
- Beware - Don't copy your competitors' website contents
Information Design
- Information design is concerned with identifying, organizing and labelling the content and functions on a website so that they can be easily browsed, searched and navigated.
- This aspect of design is also known as information architecture.
- The major questions we need to answer at this stage are:
- What are all the pieces of content the site needs:
- What types of functionality are required (e.g. shopping cart, request catalogue)?
- How should the various pieces of content be organized or grouped?
4 types of web page
- Homepage
- Transitional page
- Content page
- Action page
Organizing content
Site diagrams
Navigation design
- Good navigation design allows your visitors to get the information they want in the shortest amount of time.
- What do you want people to do on your site?
- Remember: websites don’t come with user manuals. Point them in the right direction.
- It should provide enough information to answer the following questions from users:
- Where am I?
- Where can I go?
- How do I get there?
- How do I get back to where I started?
- Basic criteria that you must strive to satisfy in your navigation design:
You can tell where you are within the site at all times. All pages should also offer a link back to the homepage.
- Links are labelled clearly and their destination is obvious. If a link takes a user to a place other than where he thinks it should take him, you could lose his trust and earn his frustration instead.
- The navigation is located in a consistent location within each page. Don’t make your users look for it on every page!
- Users should get to information with a minimal number of clicks. However, most users won’t mind clicking through many levels of menus as long as it eventually leads them to the information they want.
- The 3 click rule of website design - "Don't put important information on your site that is more than 3 clicks away from an entrance page". This way you'll ensure visitors see the important content on your website before they leave.
- Reading: Designing for the Scent of Information
"what users do expect is that every click makes them more confident they’re on the right trail to get to the information they need. As long as users are confident they’re heading in the right direction, then they are not likely to abandon the site if it takes a click or two more to get where they’re going."
We will have a detailed discussion on links and navigation in our later lectures
Prepare your site map and plan your look-and-feel
A "wire frame" is a non-graphical layout of the proposed web page. When you are considering website content, think in terms of all the text elements that are contained on a single webpage.
Example (Source: totheweb.com)
- More resources:
- Mood boards
- An effective way to plan your site's look-and-feel is to create a mood board.
- A mood board will give you a good starting point for your site's design and can help communicate your ideas to other people. It should also give you ideas for colors, images, and typefaces.
- Mood boards facilitate more rapid visual prototyping
A mood board helps establish the branding, design components, typography, imagery, and color palettes that will be incorporated in the design. Much the way an interior designer will initially put together a swatch panel showing the fabrics and colors that will be used in designing a room, the mood board establishes the aesthetic direction of the site up front without negatively impacting the flow or structure of the site.
Mood boards help you:
1. Separate concept from final form
2. Build consensus in large groups
3. Involve more people in the design process
4. Prototype rapidly
5. Avoid bullshitting
"Words fail miserably when trying to translate design concepts"
"A picture is worth a thousand words, and mood boards are a great tool to create that picture for your client."
Thanks for Reading
If you would rather like to have this lecture note in printed format, please click the print action link in the top right corner.
If you find any problem in this lecture note, please feel free to tell Steven via steven [at] findaway.hk.
