Full width home advertisement

Post Page Advertisement [Top]

Website Design Trends, Typography, Modern Website Design. and website design history.



In spite of its relatively short history, web design is now a fully developed science, complete with a vast quantity of information both newbie and experienced designers should learn. Here at Awwwards, we like to think we know a bit about web design, and when it comes to learning, we like to do it visually. Instead of sending you off to battle big boring blocks of text, we’ve gathered some of the most interesting and useful infographics on web design - both theory and practice. So sit back and get ready to learn tons of new things simply by clicking through our selection of colorful graphics.

We’ve broken the list into 8 categories:

  • 1. Web Design History
  • 2. Getting Started
  • 3. Design Principles, Techniques, Styles, Animation
  • 4. Color Theory and Psychology
  • 5. Typography
  • 6. User Experience, Patterns, Techniques
  • 7. Web Design Trends 2014
  • 8. Responsive and Mobile Website Design

Web Design History

Here to school you on the origins and evolution of the internet, these infographics will take you through past trends, design practices, coding languages and future directions:
  • 1. Past, Present And Future Of Web Design
    Useful Infographics for Web Designers
  • 2. The History Of Web Design
    Useful Infographics for Web Designers
  • 3. The History Of Web Design 2
    Useful Infographics for Web Designers

 

Getting Started

Because you’ve gotta start somewhere - a selection of the basic foundations everyone has to to keep in mind, whether we’ve been in the industry for a month or a decade:
  • 1. How To Start A Web Design Project
    Useful Infographics for Web Designers
  • 2. Behind The Scenes Of The Web Design Project
    Useful Infographics for Web Designers
  • 3. Why Good Website Design Is So Important
    Useful Infographics for Web Designers
  • 4. The Anatomy Of Effective Web Design
    Useful Infographics for Web Designers
  • 5. 26 Things To Note Before You Develop A Website
    Useful Infographics for Web Designers
  • 6. Designer’s Guide To What Clients Really Mean When Providing Feedback
    Useful Infographics for Web Designers
  • 7. What Makes Someone Leave A Website?
    Useful Infographics for Web Designers
  • 8. Is It Time To Rethink Your Website
    Useful Infographics for Web Designers
  • 9. Old SEO vs. New SEO
    Useful Infographics for Web Designers

 

Design Principles, Techniques, Styles, Animation

Battling the pixels to create beautiful, immersive and user-centred experiences online requires patience, an eye for detail and a lot of background knowledge. While we can't help you with the first two, here are some amazing resources on Design principles and Techniques:
  • 1. 7 Basic Concepts Of Flat UI Design
    Useful Infographics for Web Designers
  • 2. Eye Tracking TechnologyAnd Web Design
    Useful Infographics for Web Designers
  • 2. Animation Libraries For JavaScript / CSS3
    Useful Infographics for Web Designers
  • 3. Animation Performance Tips
    Useful Infographics for Web Designers

 

Color Theory and Psychology

As one of the most emotional components of any interface, colors set the tone, highlight details, and get the more subtle messages across (if used correctly, of course!). The following resources on Color Psychology and Theory will help you get it right:
  • 1. The 10 Commandments Of Color Theory
    Useful Infographics for Web Designers
  • 2. Quick Color Theory Tutorial
    Useful Infographics for Web Designers
  • 3. The Science Of Color
    Useful Infographics for Web Designers
  • 4. Color Harmony And Combinations
    Useful Infographics for Web Designers
  • 5. The Psychology Of Color
    Useful Infographics for Web Designers
  • 6. The Psychology Of Color 2
    Useful Infographics for Web Designers

 

Typography

Only a truly great Web Designer recognises the true importance of typography. From content hierarchy to readability, typefaces have a tremendous impact on user experience. This group of infographics will help you master the world of letters:
  • 1. What You Need To Know About Typography
    Useful Infographics for Web Designers
  • 2. Type Guide
    Useful Infographics for Web Designers 
  • 3. Serif vs. Sans
    Useful Infographics for Web Designers
  • 4. The Art Of Mixing Typefaces
    Useful Infographics for Web Designers
  • 5. So You Need A Typeface?
    Useful Infographics for Web Designers
  • 6. The 10 Commandments Of Typography
    Useful Infographics for Web Designers
  • 7. 90% Of Design Is Typography
    Useful Infographics for Web Designers

 

User Experience, Patterns and Techniques

You’ve made it through the essential elements and theory of web design, but now it’s time to adapt it to specific patterns of of a site.
  • 1. The Anatomy Of An Effective Homepage
    Useful Infographics for Web Designers
  • 4. 7 Ingredients To Create A Perfect Landing Page
    Useful Infographics for Web Designers
  • 8. The Perfect Contact Page
    Useful Infographics for Web Designers
  • 1. Quick Start Guide To UX Design
    Useful Infographics for Web Designers

 

Web Design Trends 2014

A lot has changed since the good, old days when drop-down menu was considered the ultimate way to navigate. Web design evolves quickly and continuously, which makes following current news on the latest design trends so essential. Here are some web designer infographics with the latest scoop on responsive design, UI, video content and more:
  • 1. 10 Web Design Trends For 2014
    Useful Infographics for Web Designers
  • 2. Web Design Trends 2014
    Useful Infographics for Web Designers
  • 3. Top 10 Design Trends For 2014
    Useful Infographics for Web Designers
  • 4. Color of The Year 2014
    Useful Infographics for Web Designers

 

Responsive and Mobile Website Design

Responsiveness is without a doubt the top concern for web designers today: with an ever increasing variety of devices on the market and a constantly evolving web, making your sites responsive is a necessity. These infographics will give you the why and the how of Responsive Website Design:
  • 1. Infographic: Responsive Images Problems And Solutions
    Useful Infographics for Web Designers
  • 2. How Responsive Web Design Works 
    Useful Infographics for Web Designers
  • 3. Top 5 Reasons To Use Responsive Website Design
    Useful Infographics for Web Designers
  • 4. Why Responsive Web Design Worth The Hype
    Useful Infographics for Web Designers
  • 5. How To Make Responsive Web Design Work
    Useful Infographics for Web Designers
  • 6. Best Practices Of Responsive Web Design
    Useful Infographics for Web Designers
  • 7. Web Design Overview
    Useful Infographics for Web Designers

2 comments:

  1. I got here much interesting stuff. The post is great! Thanks for sharing it! Webseiten Erstellen Berlin

    ReplyDelete
  2. Very informative article thanks for the post.

    ReplyDelete

Bottom Ad [Post Page]