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.
Part of Web Design Week
This week our sister site ThemeForest launched a whole new category of items to sell that are particularly relevant to PSDTUTS readers – namely Photoshop Templates. The new category means you can now design and sell Photoshop designs, as well as regular Web Templates and WordPress themes to earn a side or even full income. And on the flip side if you’re coming up short on inspiration, you can get a kickstart by grabbing a PSD design from ThemeForest. So to give the new category the launch it deserves, all this week I’ll be bringing you articles and tutorials on web design as part of our PSDTUTS Web Design Week.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Collis
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
just feel it - More
Photoshop Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
hahaha dude, I’m loving the diagram, I’ll use it with my students
No single article has been as important as this. It is so often that designers focus on the aesthetic design aspects and the others suffer, breaking each down and tackling each of them interdependently is a great working method to success. Great article Collis, one of the most important subject matters of web design.
I love Web Design Week! Thanks Collis from an User Interface designer
Never knew of this one before and its very informative and detailed post too. Love how you describe them in diagram
I do know that this is today’s thing for designers, dont read this wrong, but how certain are you the actual user looks at website in the way you interprit in your post?
How certain are you that they even care about how the site looks / feels, all they want is the information right?
Have you conducted a survey to 1000+ average joes, to get the real facts?
@ Adam, I would think Collis has not interviewed the 1000 average joes. But a lot of other people have. I recommend Don’t Make Me Think by Steve Krug. It is a great book and covers this subject a lot more in depth. I would say for a fairly short post on the subject this is pretty spot on.
I would say that advice from a successful web entrepreneur and designer is probably OK advice, and in this case I can say it is great advice.
This is great, Collis. Short, simple and sweet. Looking forward to further installments.
Aesthetic, Informations and Interface – OK, got the point but c’mon people – it’s just a diagram, it’s not “that awesome”
Collis, simply put, you are the man.
Great tutorials, Collin. I would even like them be longer and more in depth, but whatever.. Great tutorials none the less! Love the Web Design week! ; D
Oh, sorry, I meant “Collis”. : )
Collis, I am glad to see your name as author of tutorial. Hope it will be here more often.
Great concepts! The only thing better than Colin’s Awesome Diagram is its intro paragraph =D
KUDOS, SIR
Well, development definitely plays into it all. Different circumstances require different technology.
this rocks. really great!
Excellent article! Very very useful stuff.
Quality stuff man. I love seeing stuff like this. I’m really looking forward to the more detailed posts.
Thanks man. Love reading these kind of articles.
As a learning webdesigner tips like these are invaluable.
Thanks Collis! Nice article
love it all, keep it up guys
I reckon this is pretty spot on. Designers/Developers may find that they are particular good at one or two of these areas in the triad, and teams would do well to look at themselves and ask “are we missing any of these specialist skills?”.
The kinds of people who are “one man web factories” that can make good products, are the kinds who have skills in all 3. I personally have good skills in information design, and user interface design. So tee me up with someone good at aesthetic design and we can produce great stuff. Overlap is also good as it strengthens the collaboration and refinement of the work.
One thing though, what sits on top of all of this is Product Development. Without this, the skills mentioned in this article have nothing to work on. So Product Development + the three specialities mentioned in the article = Freaking Awesome Results
That’s my take.
Very nice and useful article. Many designers overlook these components. I have written an article regarding designing the user interface on my blog.
My next article will be about designing the UI for children.
Feel free to come check it out!
http://cljdesign.com/blog/
Woot! web design week! I like the diagram too
As a graphic and web designer who uses Photoshop, Illustrator, HTML, CSS, and Javascript daily. there are parts of this article that I find confusing.
You say:
“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?”
And I’m sorry man, but that’s misguided. There are a ton of designers who will whip out a layout in Photoshop with absolutely no though as to how that design will translate onto the screen once rendered in (X)HTML/CSS and it can be a source of frustration for those who have to deal with unrealistic design elements. The best designers are (in my personal experience) the ones who can use Photoshop or jump right to hand coding. They tend to have a greater understanding of design, the web, and its nuances. Any monkey can whip something up in Photoshop, but translating that into its intended medium — the web — is where the challenge and the real design work comes into play.
Secondly. @ Adam. You say:
“I do know that this is today’s thing for designers, dont read this wrong, but how certain are you the actual user looks at website in the way you interprit in your post?
How certain are you that they even care about how the site looks / feels, all they want is the information right?”
Adam, if you were looking to buy a particular product or service, and you were researching companies that offered this prodict/service online, which company would you trust more: the one with a professional/appropriate design and an obvious care for their branding and image and copy; or, the company who obviously put little to no effort in their web presence and have a site with broken links, confusing navigation, and general fugliness?
Human psychology would dictate you would probably trust your money to the company that cares about its appearance enough to try and present itself appropriately.
And Collis, you missed a huge one: standards. The web standards we have in place to ensure design is semantic. If you don’t have that — your design is worth nothing. An impressive layout, if done in tables or some other innapropriate method — is worth nothing, regardless of its aesthetics.
I don’t know what interviewing “1000 average joes” has to do with anything, but maybe you’re the type of person who takes statistics at face value.
Web design week rocks! Great article Collis! Keep em’ coming…
Collis,
Great article. Brings you back to what design really is, and helps us that have been designing for some time to stay focused on the obvious and vitally important.
Thank You.
your site’s a great resource. We’re collecting information for our clients and I’ll be sure to add your site to the list.
thanks…s
Explication perfect.You seperate very well, easy to acces the informations, easy to use and estetich. I suppose I will use your document. But i have some doubts like aesthetic contain the others(interface,information).
This means that if I want to show my informations on the good place(for be red well), i have to make aesthetic according to be shown well my informations. At this point, how can i seperate like you these topics.
Not:i love design everytime!!!
Great article. Its funny how most user comments are how the aesthetic are more prominent. Finally someone who gets it and brings all three together
I think I agree with the last post here (Lubes) and I also believe that creativity in design also stems from how knowledgeable you are about all the technical stuff concerning web development and its rules.
Maybe that doesn’t apply to everyone but it does for me.
Dude, I think this should become a standard like once every 6 months or yaer or 3 months or something…I could really get used to these articles about web design.
Great article!
@ Adam and Liubes
Lubes, I’d like to tell you I’m on your side but the fact is there are more sites to back Adam’s “argument”. For example, look at Craig’s List or even Amazon for that matter. These are extremely successful sites, are they not? No one will say they are pleasant on the eye.
Yes, looks do matter. BUT if you look good but are not friendly to use then the good looks only exaggerates the guest’s frustrations. How many times have we met someone who on the surface we expected to be “user friendly” and we walked away thinking “What an a-hole?”. But web guests don’t nod and smile to be polite, they just bounce!
Adam’s point seems to carry more votes. The people have spoken many times and at the moment it still seems to be brains over looks – regardless of what the designers masses wants to believe. Unfortunate, many designers also tend to over emphasize design over IA, UI, UX, etc because it’s easy to get away with that hire-me strategy.
really a great article.
I love web design week, its very useful for graphic designers trying to get into web development. I like how you guys are combining some of the skill sets talked about on the family of sites and discussing how they relate to one another, because thats what we all do everyday. Keep up the good work!
Very useful, thanks a lot!
Even if many people agree here, I think your diagram is quite weak. The reason is mostly because the definitions of the core terms are weak. The design discourse has already established a better understanding of these terms than is revealed in your article.
As designers, we need to be more careful with these definitions, and — as you rightfully say — have “a firm grip”.
a) Aesthetic Design
It feels you did not look up any definition of aestetics. You will find that there is pratically no Design which is NOT based on aesthetics. So to call a particular Design to be “Aesthetic Design” is adding nothing to the meaning. And therefore I’d even say there is no such thing as “Aesthetic Design”.
What you intend to refer to is pretty basic and can practically be described with simpler and more common terms: “Look & Feel”, “Visual Appearance” or – more academic – “Formal-aesthetic Quality”.
b) Information Design
The term “Information Design” is also much more general than what you use in your description. In fact, what you describe usually is called “Information Architecture” (short: IA), which is focussing on “preparing the information on a website in the best possible way, so that users can efficiently and effectively find and digest information”.
Information Design is a much broader domain – including all sorts of activities. You can find better definitions for Information Design at the IIID: http://www.iiid.net/Definitions.htm
You can find definitions and resources about IA that I think backup my point at this fine collection:
http://www.xpert.com.au/portfolio/links/information-architecture/
c) Interface Design
What you are describing as “Interface Design” usually is called “Interaction Design”.
Interface Design should be regarded as a more basic notion describing the relation of humans and their actions to the artifacts. It is used often in context of human-computer-interaction topics (e.g. as in designing a graphical user “interface”). But in the broader meaning the term Interface relates to ANY for of man-made object and its connection to the body or the mind. The critics about this “broader meaning” though is that it mostly relates to “artifacts as tools” and therfore fails to correctly reference the cultural aspects of design (which does not mean that there are no such references).
In summary:
Correcting the terms will make your article much more useful for people that seek relevant information about the involved practices.
One last thought:
The most simple approach is to reflect any design problem (even a web design) to be a split-up task touching three domains:
1. Making sense with given CONTENT
2. Creating appropriate STRUCTURE
3. Finding the optimal FORM
The web-design related terminology I proposed in this comment naturally relate to these three terms – and there are very specific questions involved that a designer needs to answer:
Information Architecture:
“How does CONTENT interact with STRUCTURE?”
Interaction Design:
“How does STRUCTURE interact with FORM?”
Visual Appearance:
“How does FORM interact with CONTENT?”
Actually this is very common reason, most Graphic Designer would have known these three important aspect
Very good tutorial. For those who say design is not that important, I strongly disagree. Yes, craigslist is just a bunch of text links everywhere but its content has been separated into blocks that allow you to find what you are looking for quickly (Information Design), as far as the graphic design part of it, while is true that there’s not much design there, it is also true that it is also not horribly designed. It’s plain but not awful. It could be a lot worse and it could also be improved.
I recommend reading Web Redesign 2.0. It’s a great book that talks about the web design process in depth. After I read it, I changed the way I approach any web design project.
Absolutely loved the article. The quality of your article contains the same element for great design. Simplicity. Keep up the great articles!
Collis, I totally agree with you. There is more to design than just good looks. I would also say that XHTML and CSS is not Web Design but Web Development or Front-End Web Development if you wish to be more precise.
You are doing a great job with the Web Design series. Keep it up, it’s really appreciated.
Beautiful article and comments, I agree with almost everything that has been said… but to all our efforts to learn all the aspects and about the other industries related to web design, there is limited amount of customers out there who understand the real benefits… most think that web design is just about making a website pretty and these theories are just our ways to charge more… does it worth our time to teach the client?
Great article i also find that you are va mercy of the client who sometimes knows nothing about design but want it the way they think looks best
Great stuff, but it’s missing one of the key components of any design: communication design. What is the site trying to communicate at any given time? This plays into all areas, including interface, information and aesthetic, and is probably the component designers overlook the most.
I like how you broke thing up into 3 distinct sections. One could argue that you can then break other sections into there own 3 distinct parts. For example “Aesthetic Design” could be combination of “Style”, “Typography”, and “Color”. Anyway, thanks for the article.
Do’s anybody know this moddel?:
http://www.adaptivepath.com/ideas/essays/archives/000242.php
It involves everything about web stratagy,s
This is really a great Information.
Thanks it’s another interesting and well written article.
Great article with many important points.
A lot of ‘designers’ tend to forget that not everybody that uses the internet is looking for flashy Web 2.0 badges, the majority are looking for information on local businesses or simply want to make a purchase.