Published by Pearson (October 12, 2012) © 2013
Joe KraynakDiscover everything you want to know about web design in this easy to use guide, from the most essential tasks that youll want to perform, to solving the most common problems youll encounter.
Web Design In Simple Steps 2nd editioncovers every practical aspect you will need to master in web design that will help you to achieve immediate results.
- Covers all aspects from initial concept to final testing
- Covers planning and designing your site to maximise the user experience and navigation
- All areas of writing, editing, enhancing, testing & maintaining your website fully covered
This series of vibrant books will teach you exactly what you need to know using
- A friendly, visual approach
- Easy-to-understand language
- Practical hands-on tasks
- Full-colour large format screenshots
To build your confidence and help you to get the most out of your computer, practical hints, tips and shortcuts feature on every page:
§ Alert! Explains and provides practical solutions to the most commonly encountered problems
§ Hot Tips Time and effort saving shortcuts
§ See Also - Points you to other related tasks and information
§ Did you Know? Additional features to explore
What does this Mean? Jargon and technical terms explained in plain EnglishTop 10 Web Design Tips
1. Use a content management system (CMS)
2. Provide a service
3. Do not get too clever
4. Usability is paramount
5. The Web is an easily changeable medium
6. Make text more accessible with plenty of headings, subheadings, and lists
7. Check your work
8. Be consistent
9. Leverage the power of free online web developer tools
10. Remember, web design is supposed to be fun
1. Planning your website
- Review several sites services and self-interested goals
- Determine your sites purpose
- Narrow your purpose to one goal
- Identify your target audience
- Have a call to action
- Understand your constraints
- Identify a service you can offer users
- Make sure your ecommerce site offers a service
- When offering a service, make it relevant and valuable
- Gather requirements, even if you dont think there are any
- Create a use case diagram
2. Website architecture
- Translate the use case diagram into an outline
- Assign priorities to every outline element
- Translate the outline to a site map
- Follow the three-click rule
- Use sequential navigation when appropriate
- Use external links sparingly and prudently
- Do not let ads detract from your sites content
- Ensure your site has no dead ends
- Do not use under construction pages
- Ensure every page has a page header
- Ensure every page has a page footer
- Make hyperlinks and icons explicit
- Use breadcrumb trails when designing complex sites
- Always create a site map or site index
- Create a prototype navigation template
- Create a website framework, complete with blank pages
3. Writing your text
- Consider blogging
- Ensure your site contains quality content
- Chunk your information into bite-size pieces
- Write like a journalist
- Write descriptive headings and subheadings
- Persuade users with subtle techniques
- Prefer simple to complex and edit your writing
- Ensure meaning is intuitive on important items
4. Webpage layout and composition
- Place important information above the fold line
- Make pages printable
- Use grid theory
- Violate a pages grid to draw attention to an element
- Emphasise what is important
- Prominently display your purpose, or have a tagline
- Design for a maximum screen resolution of 1024x768
- Know the difference between fixed and flexible layout
- Use a centred layout
5. Using web colour effectively
- Have a basic understanding of colour values
- Understand colour theory essentials
- Use a tool to generate a colour palette
- Generate a colour palette from a photograph
- Use your colour palette consistently across pages
- Choose colours to match your sites mood
- Accept that colour choices may not appear as you wish
- Use text and background colour harmoniously
6. Texture
- Add texture with a repeating pattern
- Add texture with a non-repeating image
- Use pe