SlideShare una empresa de Scribd logo
1 de 105
Web Design + Usability Computer Studio IV  Spring 2009
What  NOT  to Do
1.   The user must know what the site is about in seconds : attention is one the most valuable currencies on the Internet. If a visitor can not figure what your site is about in a couple of seconds, he will probably just go somewhere else. Your site must communicate why I should spend my time there, and FAST! 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
2. Make the content scannable : this is the Internet, not a book, so forget large blocks of text. Probably I will be visiting your site while I work on other stuff so make sure that I can scan through the entire content. Bullet points, headers, subheaders, lists. Anything that will help the reader filter what he is looking for. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
3. Do not use fancy fonts that are unreadable:  sure there are some fonts that will give a sophisticated look to your website. But are they readable? If your main objective is to deliver a message and get the visitors reading your stuff, then you should make the process comfortable for them. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
4. Do not use tiny fonts:  the previous point applies here, you want to make sure that readers are comfortable reading your content. My Firefox does have a zooming feature, but if I need to use on your website it will probably be the last time I visit it. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
5. Do not open new browser windows:  I used to do that on my first websites. The logic was simple, if I open new browser windows for external links the user will never leave my site. WRONG! Let the user control where he wants the links to open. There is a reason why browsers have a huge “Back” button. Do not worry about sending the visitor to another website, he will get back if he wants to (even porn sites are starting to get conscious regarding this point lately…). 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
6. Do not resize the user’s browser windows:  the user should be in control of his browser. If you resize it you will risk to mess things up on his side, and what is worse you might lose your credibility in front of him. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
7. Do not require a registration unless it is necessary:  lets put this straight, when I browse around the Internet I want to get information, not the other way around. Do not force me to register up and leave my email address and other details unless it is absolutely necessary (i.e. unless what you offer is so good that I will bear with the registration). 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
8. Never subscribe the visitor for something without his consent:  do not automatically subscribe a visitor to newsletters when he registers up on your site. Sending unsolicited emails around is not the best way to make friends. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
9. Do not overuse Flash:  apart from increasing the load time of your website, excessive usage of Flash might also annoy the visitors. Use it only if you must offer features that are not supported by static pages. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
10. Do not play music:  on the early years of the Internet web developers always tried to successfully integrate music into websites. Guess what, they failed miserably. Do not use music, period. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
11. If you MUST play an audio file let the user start it:  some situations might require an audio file. You might need to deliver a speech to the user or your guided tour might have an audio component. That is fine. Just make sure that the user is in control, let him push the “Play” button as opposed to jamming the music on his face right after he enters the website. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
12. Do not clutter your website with badges:  first of all, badges of networks and communities make a site look very unprofessional. Even if we are talking about awards and recognition badges you should place them on the “About Us” page. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
13. Do not use a homepage that just launches the “real” website : the smaller the number of steps required for the user to access your content, the better. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
14. Make sure to include contact details:  there is nothing worse than a website that has no contact details. This is not bad only for the visitors, but also for yourself. You might lose important feedback along the way. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
15. Do not break the “Back” button:  this is a very basic principle of usability. Do not break the “Back” button under any circumstance. Opening new browser windows will break it, for instance, and some Javascript links might also break them. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
16. Do not use blinking text:  unless your visitors are coming straight from 1996, that is. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
17. Avoid complex URL structures:  a simple, keyword-based URL structure will not only improve your search engine rankings, but it will also make it easier for the reader to identify the content of your pages before visiting them. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
18. Use CSS over HTML tables:  HTML tables were used to create page layouts. With the advent of CSS, however, there is no reason to stick to them. CSS is faster, more reliable and it offers many more features. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
19. Make sure users can search the whole website:  there is a reason why search engines revolutionized the Internet. You probably guessed it, because they make it very easy to find the information we are looking for. Do not neglect this on your site. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
20. Avoid “drop down” menus:  the user should be able to see all the navigation options straight way. Using “drop down” menus might confuse things and hide the information the reader was actually looking for. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
21. Use text navigation:  text navigation is not only faster but it is also more reliable. Some users, for instance, browse the Internet with images turned off. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
22. If you are linking to PDF files disclose it:  ever clicked on a link only to see your browser freezing while Acrobat Reader launches to open that (unrequested) PDF file? That is pretty annoying so make sure to explicit links pointing to PDF files so that users can handle them properly. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
23. Do not confuse the visitor with many versions:  avoid confusing the visitor with too many versions of your website. What bandwidth do I prefer? 56Kbps? 128Kbps? Flash or HTML? Man, just give me the content! 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
24. Do not blend advertising inside the content:  blending advertising like Adsense units inside your content might increase your click-through rate on the short term. Over the long run, however, this will reduce your readership base. An annoyed visitor is a lost visitor. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
25. Use a simple navigation structure:  sometimes less is more. This rule usually applies to people and choices. Make sure that your website has a single, clear navigation structure. The last thing you want is to confuse the reader regarding where he should go to find the information he is looking for. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
26. Avoid “intros”:  do not force the user to watch or read something before he can access to the real content. This is plain annoying, and he will stay only if what you have to offer is really unique. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
27. Do not use FrontPage:  this point extends to other cheap HTML editors. While they appear to make web design easier, the output will be a poorly crafted code, incompatible with different browsers and with several bugs. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
28. Make sure your website is cross-browser compatible:  not all browsers are created equal, and not all of them interpret CSS and other languages on the same way. Like it or not, you will need to make your website compatible with the most used browsers on the market, else you will lose readers over the long term. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
29. Make sure to include anchor text on links:  I confess I used to do that mistake until some time ago. It is easier to tell people to “click here”. But this is not efficient. Make sure to include a relevant anchor text on your links. It will ensure that the reader knows where he is going to if he clicks the link, and it will also create SEO benefits for the external site where the link is pointing. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
30. Do not cloak links:  apart from having a clear anchor text, the user must also be able to see where the link is pointing on the status bar of his browser. If you cloak your links (either because they are affiliate ones or due to other reasons) your site will lose credibility. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
31. Make links visible:  the visitor should be able to recognize what is clickable and what is not, easily. Make sure that your links have a contrasting color (the standard blue color is the optimal most of the times). Possibly also make them underlined. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
32. Do not underline or color normal text:  do not underline normal text unless absolutely necessary. Just as users need to recognize links easily, they should not get the idea that something is clickable when in reality it is not. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
33. Make clicked links change color:  this point is very important for the usability of your website. Clicked links that change color help the user to locate himself more easily around your site, making sure that he will not end up visiting the same pages unintentionally. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
34. Do not use animated GIFs:  unless you have advertising banners that require animation, avoid animated GIFs. They make a site look unprofessional and detract the attention from the content. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
35. Make sure to use the ALT and TITLE attributes for images:  apart from having SEO benefits the ALT and TITLE attributes for images will play an important role for blind users. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
36. Do not use harsh colors:  if the user is getting a headache after visiting your site for 10 consecutive minutes, you probably should pick a better color scheme. Design the color palette around your objectives (i.e. deliver a mood, let the user focus on the content, etc.). 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
37. Do not use pop ups:  this point refers to pop ups of any kind. Even user requested pop ups are a bad idea given the increasing amount of pop blockers out there. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
38. Avoid Javascript links:  those links execute a small Javascript when the user clicks on them. Stay away from them since they often create problems for the user. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
39. Include functional links on your footer:  people are used to scrolling down to the footer of a website if they are not finding a specific information. At the very least you want to include a link to the Homepage and possibly a link to the “Contact Us” page. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
40. Avoid long pages:  guess what, if the user needs to scroll down forever in order to read your content he will probably just skip it altogether. If that is the case with your website make it shorter and improve the navigation structure. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
41. No horizontal scrolling:  while some vertical scrolling is tolerable, the same can not be said about horizontal scrolling. The most used screen resolution nowadays is 1024 x 768 pixels, so make sure that your website fits inside it. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
42. No spelling or grammatical mistakes:  this is not a web design mistake, but it is one of the most important factors affecting the overall quality of a website. Make sure that your links and texts do not contain spelling or grammatical mistakes. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
43. If you use CAPTCHA make sure the letters are readable:  several sites use CAPTCHA filters as a method of reducing spam on comments or on registration forms. There is just one problem with it, most of the times the user needs to call his whole family to decipher the letters. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
What  should  I do then?
Principles Of Effective Web Design: In order to use the principles properly we first need to understand how users interact with web-sites, how they think and what are the basic patterns of users’ behavior. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
How do users think?  Users appreciate quality and credibility.  If a page provides users with high-quality content, they are willing to compromise the content with advertisements and the design of the site. This is the reason why not-that-well-designed web-sites with high-quality content gain a lot of traffic over years.  Content is more important than the design which supports it 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
How do users think?  Users don’t read, they scan.  Analyzing a web-page, users search for some fixed points or anchors which would guide them through the content of the page.   Notice how “hot” areas abrupt in the middle of sentences. This is typical for the scanning process 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
How do users think?  Web users are impatient and insist on instant gratification.  Very simple principle: If a web-site isn’t able to meet users’ expectations, then designer failed to get his job done properly and the company loses money. The higher is the cognitive load and the less intuitive is the navigation, the more willing are users to leave the web-site and search for alternatives. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
How do users think?  Users don’t make optimal choices.  Users don’t search for the quickest way to find the information they’re looking for. Neither do they scan web-page in a linear fashion, going sequentially from one site section to another one. Instead users satisfice; they choose the first reasonable option. As soon as they find a link that seems like it might lead to the goal, there is a very good chance that it will be immediately clicked. Optimizing is hard, and it takes a long time. Satisficing is more efficient. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
How do users think?  Users follow their intuition.  In most cases users muddle through instead of reading the information a designer has provided. According to Steve Krug, the basic reason for that is that users don’t care. “If we find something that works, we stick to it. It doesn’t matter to us if we understand how things work, as long as we can use them. If your audience is going to act like you’re designing billboard, then design great billboards.” 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
How do users think?  Users want to have control.  Users want to be able to control their browser and rely on the consistent data presentation throughout the site. E.g. they don’t want new windows popping up unexpectedly and they want to be able to get back with a “Back”-button to the site they’ve been before: therefore it’s a good practice to  never open links in new browser windows . 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
1. Don’t make users think According to Krug’s first law of usability, the web-page should be  obvious and self-explanatory . When you’re creating a site, your job is to get rid of the  question marks  — the decisions users need to make consciously, considering pros, cons and alternatives. If the navigation and site architecture aren’t intuitive, the number of question marks grows and makes it harder for users to comprehend how the system works and how to get from point A to point B. A clear structure, moderate visual clues and easily recognizable links can help users to find their path to their aim. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
1. Don’t make users think 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ Although the design itself is simple and intuitive, to understand what the page is about the user needs to search for the answer. This is what an  unnecessary question mark  is.  It’s designer’s task to make sure that the number of question marks is close to 0. The visual explanation is placed on the right hand side. Just exchanging both blocks would increase usability.
2. Don’t squander users’ patience In every project when you are going to offer your visitors some service or tool, try to keep your user requirements minimal. The less action is required from users to test a service, the more likely a random visitor is to actually try it out. First-time visitors are willing to  play with the service , not filling long web forms for an account they might never use in the future. Let users explore the site and discover your services without forcing them into sharing private data. It’s not reasonable to force users to enter an email address to test the feature. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
2. Don’t squander users’ patience 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ Stikkit  is a perfect example for a user-friendly service which requires almost nothing from the visitor which is unobtrusive and comforting. And that’s what you want your users to feel on your web site.
3. Manage to focus users’ attention As web-sites provide both static and dynamic content, some aspects of the user interface attract attention more than others do. Obviously, images are more eye-catching than the text — just as the sentences marked as bold are more attractive than plain text.The human eye is a highly non-linear device, and web-users  can instantly recognize edges, patterns and motions . This is why video-based advertisements are extremely annoying and distracting, but from the marketing perspective they perfectly do the job of capturing users’ attention. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
3. Manage to focus users’ attention 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ Humanized.com  perfectly uses the principle of focus. The only element which is directly visible to the users is the word “free” which works attractive and appealing, but still calm and purely informative. Subtle hints provide users with enough information of how to find more about the “free” product.
4. Strive for feature exposure Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. But from the design perspective these elements actually aren’t a bad thing. On the contrary, such  guidelines are extremely effective  as they lead the visitors through the site content in a very simple and user-friendly way. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
4. Strive for feature exposure 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ Letting the user see clearly what functions are available  is a fundamental principle of successful user interface design. It doesn’t really matter how this is achieved. What matters is that the content is well-understood and visitors feel comfortable with the way they interact with the system.
5. Make use of effective writing As the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing habits. Promotional writing won’t be read. Long text blocks without images and keywords marked in  bold  or  italics  will be skipped. Exaggerated language will be ignored. Talk business.  Avoid cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names. For instance, if you describe a service and want users to create an account, “sign up” is better than “start now!” which is again better than “explore our services”. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
5. Make use of effective writing 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ Eleven2.com  gets directly to the point. No cute words, no exaggerated statements. Instead a price: just what visitors are looking for.
6. Strive for simplicity The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information  despite  the design. Strive for simplicity instead of complexity. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
6. Strive for simplicity 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ Crcbus  provides visitors with a clean and simple design. You may have no idea what the site is about as it is in Italian, however you can directly recognize the navigation, header, content area and the footer.
7. Don’t be afraid of the white space Actually it’s really hard to overestimate the importance of white space. Not only does it help to  reduce the cognitive load  for the visitors, but it makes it possible to perceive the information presented on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information. Complex structures are harder to read, scan, analyze and work with.  10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
8. Communicate effectively with a “visible language” In his papers on effective visual communication, Aaron Marcus states  three fundamental principles  involved in the use of the so-called  “visible language”  — the content users see on a screen. 1. Organize : provide the user with a clear and consistent conceptual structure. 2. Economize : do the most with the least amount of cues and visual elements. 3. Communicate : match the presentation to the capabilities of the user. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
9. Conventions are our friends Conventional design of site elements doesn’t result in a boring web site. In fact,  conventions are very useful  as they reduce the learning curve, the need to figure out how things work. For instance, it would be a usability nightmare if all web-sites had different visual presentation of RSS-feeds. That’s not that different from our regular life where we tend to get used to basic principles of how we organize data (folders) or do shopping (placement of products). 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
10. Test early, test often This so-called TETO-principle should be applied to every web design project as usability tests often provide  crucial insights  into significant problems and issues related to a given layout. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
Good Design Examples
Best of CSS Design 2008   http://www.webdesignerwall.com/trends/best-of-css-design-2008/
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2009 Design Trends
1. Letterpress Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
2. Rich User Interfaces Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
3. PNG transparency Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
4. HUGE Typography Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
5. Font Replacement Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
6. Modal Boxes (Lightboxes) Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
7. Media Blocks Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
8. The Magazine Look Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
9. Carousels (Slideshows) Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
10. Introduction Blocks Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
THE END.

Más contenido relacionado

La actualidad más candente

Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Atos_Worldline
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Devicefilirom1
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhiCss Founder
 
Principles of web design
Principles of web designPrinciples of web design
Principles of web designdswebdesign
 
Design Concepts and Web Design
Design Concepts and Web DesignDesign Concepts and Web Design
Design Concepts and Web DesignMindy McAdams
 
November 2016 - ECN - You're Speaking Drupalese to Me
November 2016 - ECN - You're Speaking Drupalese to MeNovember 2016 - ECN - You're Speaking Drupalese to Me
November 2016 - ECN - You're Speaking Drupalese to MeEric Sembrat
 
10 principles of effective web design
10 principles of effective web design10 principles of effective web design
10 principles of effective web designananda gunadharma
 
Responsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersResponsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersBootstrap Creative
 
November 2016 - Georgia Tech - Building a Research Website
November 2016 - Georgia Tech - Building a Research WebsiteNovember 2016 - Georgia Tech - Building a Research Website
November 2016 - Georgia Tech - Building a Research WebsiteEric Sembrat
 
Basic Web Design Principles and Elements
Basic Web Design Principles and ElementsBasic Web Design Principles and Elements
Basic Web Design Principles and ElementsEromRamos
 
Apple pi preso_october_2019_final4
Apple pi preso_october_2019_final4Apple pi preso_october_2019_final4
Apple pi preso_october_2019_final4gvaughan
 
Webdesign New
Webdesign NewWebdesign New
Webdesign Newlyngdoh
 
Is your website user friendly?
Is your website user friendly?Is your website user friendly?
Is your website user friendly?studiokandm
 
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design PrinciplesMukesh Tekwani
 
Responsive Web Design - but for real!
Responsive Web Design - but for real!Responsive Web Design - but for real!
Responsive Web Design - but for real!Rudy Rigot
 
Basic webpage layout and design
Basic webpage layout and designBasic webpage layout and design
Basic webpage layout and designAndz Bass
 
Seven Steps To Better JavaScript
Seven Steps To Better JavaScriptSeven Steps To Better JavaScript
Seven Steps To Better JavaScriptDen Odell
 
How to optimize your blog for mobile traffic
How to optimize your blog for mobile trafficHow to optimize your blog for mobile traffic
How to optimize your blog for mobile trafficgroceryalerts
 
Accessibility with WordPress
Accessibility with WordPressAccessibility with WordPress
Accessibility with WordPressJoseph Dolson
 

La actualidad más candente (20)

Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhi
 
Principles of web design
Principles of web designPrinciples of web design
Principles of web design
 
Design Concepts and Web Design
Design Concepts and Web DesignDesign Concepts and Web Design
Design Concepts and Web Design
 
November 2016 - ECN - You're Speaking Drupalese to Me
November 2016 - ECN - You're Speaking Drupalese to MeNovember 2016 - ECN - You're Speaking Drupalese to Me
November 2016 - ECN - You're Speaking Drupalese to Me
 
Web Usability
Web UsabilityWeb Usability
Web Usability
 
10 principles of effective web design
10 principles of effective web design10 principles of effective web design
10 principles of effective web design
 
Responsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersResponsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for Beginners
 
November 2016 - Georgia Tech - Building a Research Website
November 2016 - Georgia Tech - Building a Research WebsiteNovember 2016 - Georgia Tech - Building a Research Website
November 2016 - Georgia Tech - Building a Research Website
 
Basic Web Design Principles and Elements
Basic Web Design Principles and ElementsBasic Web Design Principles and Elements
Basic Web Design Principles and Elements
 
Apple pi preso_october_2019_final4
Apple pi preso_october_2019_final4Apple pi preso_october_2019_final4
Apple pi preso_october_2019_final4
 
Webdesign New
Webdesign NewWebdesign New
Webdesign New
 
Is your website user friendly?
Is your website user friendly?Is your website user friendly?
Is your website user friendly?
 
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design Principles
 
Responsive Web Design - but for real!
Responsive Web Design - but for real!Responsive Web Design - but for real!
Responsive Web Design - but for real!
 
Basic webpage layout and design
Basic webpage layout and designBasic webpage layout and design
Basic webpage layout and design
 
Seven Steps To Better JavaScript
Seven Steps To Better JavaScriptSeven Steps To Better JavaScript
Seven Steps To Better JavaScript
 
How to optimize your blog for mobile traffic
How to optimize your blog for mobile trafficHow to optimize your blog for mobile traffic
How to optimize your blog for mobile traffic
 
Accessibility with WordPress
Accessibility with WordPressAccessibility with WordPress
Accessibility with WordPress
 

Destacado

Edward Tufte and Information Design for the Web
Edward Tufte and Information Design for the WebEdward Tufte and Information Design for the Web
Edward Tufte and Information Design for the Websprocketeer
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 
The Top 10 Tricks for Today's Successful Websites
The Top 10 Tricks for Today's Successful WebsitesThe Top 10 Tricks for Today's Successful Websites
The Top 10 Tricks for Today's Successful WebsitesBrian Hamlett
 
Polishing Interfaces
Polishing InterfacesPolishing Interfaces
Polishing InterfacesUX Booth
 
Weebly Education Website Building
Weebly Education Website BuildingWeebly Education Website Building
Weebly Education Website BuildingKeiser University
 
Tufte visual display-1
Tufte visual display-1Tufte visual display-1
Tufte visual display-1jgomez27
 
Web3.0 seminar wipro-session3-flokloreofuserexperience
Web3.0 seminar wipro-session3-flokloreofuserexperienceWeb3.0 seminar wipro-session3-flokloreofuserexperience
Web3.0 seminar wipro-session3-flokloreofuserexperienceNagaraju Pappu
 
Ajax Development With Dreamweaver
Ajax Development With DreamweaverAjax Development With Dreamweaver
Ajax Development With DreamweaverAndreCharland
 
Developing a Web Page
Developing a Web PageDeveloping a Web Page
Developing a Web PageFrank Fucile
 
Web Page Authoring 1
Web Page Authoring 1Web Page Authoring 1
Web Page Authoring 1yht4ever
 
GameBasedLearning&GamificationforLanguageClassrooms
GameBasedLearning&GamificationforLanguageClassroomsGameBasedLearning&GamificationforLanguageClassrooms
GameBasedLearning&GamificationforLanguageClassroomsTodd Vercoe, M.A.
 
David W. Deeds: Game-Based Learning & Gamification
David W. Deeds: Game-Based Learning & GamificationDavid W. Deeds: Game-Based Learning & Gamification
David W. Deeds: Game-Based Learning & GamificationDavid W. Deeds
 
Gamification in school (GWMSTHLM 2015)
Gamification in school (GWMSTHLM 2015)Gamification in school (GWMSTHLM 2015)
Gamification in school (GWMSTHLM 2015)Jan Bidner
 
Topic 11: Game-based Learning and Gamification in the Classroom
Topic 11: Game-based Learning and Gamification in the ClassroomTopic 11: Game-based Learning and Gamification in the Classroom
Topic 11: Game-based Learning and Gamification in the Classroombgalloway
 
Usability Introduction slide
Usability Introduction slideUsability Introduction slide
Usability Introduction slideKay Rules
 
Usability for Web Designers
Usability for Web DesignersUsability for Web Designers
Usability for Web DesignersBen Woods
 
Gamification for Second Language Acquisition
Gamification for Second Language AcquisitionGamification for Second Language Acquisition
Gamification for Second Language AcquisitionGeraldine Exton
 
Differences Between Games, Game-Based Learning & Gamification
Differences Between Games, Game-Based Learning & GamificationDifferences Between Games, Game-Based Learning & Gamification
Differences Between Games, Game-Based Learning & GamificationInfopro Learning, Inc.
 
Practical Usability Guidelines For Your Website (An Evening Of Web Usability ...
Practical Usability Guidelines For Your Website (An Evening Of Web Usability ...Practical Usability Guidelines For Your Website (An Evening Of Web Usability ...
Practical Usability Guidelines For Your Website (An Evening Of Web Usability ...Justin Mifsud
 

Destacado (20)

Edward Tufte and Information Design for the Web
Edward Tufte and Information Design for the WebEdward Tufte and Information Design for the Web
Edward Tufte and Information Design for the Web
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
The Top 10 Tricks for Today's Successful Websites
The Top 10 Tricks for Today's Successful WebsitesThe Top 10 Tricks for Today's Successful Websites
The Top 10 Tricks for Today's Successful Websites
 
Polishing Interfaces
Polishing InterfacesPolishing Interfaces
Polishing Interfaces
 
Weebly Education Website Building
Weebly Education Website BuildingWeebly Education Website Building
Weebly Education Website Building
 
Tufte visual display-1
Tufte visual display-1Tufte visual display-1
Tufte visual display-1
 
Web3.0 seminar wipro-session3-flokloreofuserexperience
Web3.0 seminar wipro-session3-flokloreofuserexperienceWeb3.0 seminar wipro-session3-flokloreofuserexperience
Web3.0 seminar wipro-session3-flokloreofuserexperience
 
Ajax Development With Dreamweaver
Ajax Development With DreamweaverAjax Development With Dreamweaver
Ajax Development With Dreamweaver
 
Developing a Web Page
Developing a Web PageDeveloping a Web Page
Developing a Web Page
 
Web Page Authoring 1
Web Page Authoring 1Web Page Authoring 1
Web Page Authoring 1
 
GameBasedLearning&GamificationforLanguageClassrooms
GameBasedLearning&GamificationforLanguageClassroomsGameBasedLearning&GamificationforLanguageClassrooms
GameBasedLearning&GamificationforLanguageClassrooms
 
David W. Deeds: Game-Based Learning & Gamification
David W. Deeds: Game-Based Learning & GamificationDavid W. Deeds: Game-Based Learning & Gamification
David W. Deeds: Game-Based Learning & Gamification
 
Gamification in school (GWMSTHLM 2015)
Gamification in school (GWMSTHLM 2015)Gamification in school (GWMSTHLM 2015)
Gamification in school (GWMSTHLM 2015)
 
Topic 11: Game-based Learning and Gamification in the Classroom
Topic 11: Game-based Learning and Gamification in the ClassroomTopic 11: Game-based Learning and Gamification in the Classroom
Topic 11: Game-based Learning and Gamification in the Classroom
 
Usability Introduction slide
Usability Introduction slideUsability Introduction slide
Usability Introduction slide
 
Usability for Web Designers
Usability for Web DesignersUsability for Web Designers
Usability for Web Designers
 
Gamification for Second Language Acquisition
Gamification for Second Language AcquisitionGamification for Second Language Acquisition
Gamification for Second Language Acquisition
 
Differences Between Games, Game-Based Learning & Gamification
Differences Between Games, Game-Based Learning & GamificationDifferences Between Games, Game-Based Learning & Gamification
Differences Between Games, Game-Based Learning & Gamification
 
Practical Usability Guidelines For Your Website (An Evening Of Web Usability ...
Practical Usability Guidelines For Your Website (An Evening Of Web Usability ...Practical Usability Guidelines For Your Website (An Evening Of Web Usability ...
Practical Usability Guidelines For Your Website (An Evening Of Web Usability ...
 
Adobe dreamweaver
Adobe dreamweaverAdobe dreamweaver
Adobe dreamweaver
 

Similar a Lecture 1: Web Design + Usability

Avoid Error Not Design
Avoid Error Not DesignAvoid Error Not Design
Avoid Error Not DesignMaximumHit Ltd
 
9 worst practices in ux design
9 worst practices in ux design9 worst practices in ux design
9 worst practices in ux designSachin Khatiwoda
 
Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with librariesChristian Heilmann
 
Unit 28 Week 13
Unit 28 Week 13Unit 28 Week 13
Unit 28 Week 13MrJRogers
 
Lab#10 navigation, links and hover rollovers
Lab#10 navigation, links and hover rolloversLab#10 navigation, links and hover rollovers
Lab#10 navigation, links and hover rolloversYaowaluck Promdee
 
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docxjeremylockett77
 
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO  - SMX 201410 Things Webdesigners tend to do Wrong in SEO  - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014Timon Hartung
 
The Web Design Summary.doc.doc
The Web Design Summary.doc.docThe Web Design Summary.doc.doc
The Web Design Summary.doc.docbutest
 
Be a Web Design Professional with the Right Skills.
Be a Web Design Professional with the Right Skills.Be a Web Design Professional with the Right Skills.
Be a Web Design Professional with the Right Skills.ACCHITABAJPAI
 
Web designing chapter 01
Web designing chapter 01Web designing chapter 01
Web designing chapter 01Farmanzaland
 
A career in web development | the user | web development essentials!
A career in web development | the user | web development essentials!A career in web development | the user | web development essentials!
A career in web development | the user | web development essentials!INNOCENT OGAH
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive WebMatt Carver
 
Solid Web site Design Guidance Any individual Could Utilize
Solid Web site Design Guidance Any individual Could UtilizeSolid Web site Design Guidance Any individual Could Utilize
Solid Web site Design Guidance Any individual Could Utilizenonstopverdict801
 
AIAS GRASSROOTS 2015 Technolog Track
AIAS GRASSROOTS 2015 Technolog TrackAIAS GRASSROOTS 2015 Technolog Track
AIAS GRASSROOTS 2015 Technolog Track.SKI
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websitesRachel Cherry
 
American Institute of Architect Students Grassroots 2015
American Institute of Architect Students Grassroots 2015American Institute of Architect Students Grassroots 2015
American Institute of Architect Students Grassroots 2015Rob Rozicki
 
web design
web designweb design
web designbutest
 

Similar a Lecture 1: Web Design + Usability (20)

Webdesign
WebdesignWebdesign
Webdesign
 
Avoid Error Not Design
Avoid Error Not DesignAvoid Error Not Design
Avoid Error Not Design
 
Ui and ux principles
Ui and ux principlesUi and ux principles
Ui and ux principles
 
9 worst practices in ux design
9 worst practices in ux design9 worst practices in ux design
9 worst practices in ux design
 
Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with libraries
 
Unit 28 Week 13
Unit 28 Week 13Unit 28 Week 13
Unit 28 Week 13
 
Lab#10 navigation, links and hover rollovers
Lab#10 navigation, links and hover rolloversLab#10 navigation, links and hover rollovers
Lab#10 navigation, links and hover rollovers
 
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
 
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO  - SMX 201410 Things Webdesigners tend to do Wrong in SEO  - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
 
The Web Design Summary.doc.doc
The Web Design Summary.doc.docThe Web Design Summary.doc.doc
The Web Design Summary.doc.doc
 
Be a Web Design Professional with the Right Skills.
Be a Web Design Professional with the Right Skills.Be a Web Design Professional with the Right Skills.
Be a Web Design Professional with the Right Skills.
 
Intro to SEO
Intro to SEOIntro to SEO
Intro to SEO
 
Web designing chapter 01
Web designing chapter 01Web designing chapter 01
Web designing chapter 01
 
A career in web development | the user | web development essentials!
A career in web development | the user | web development essentials!A career in web development | the user | web development essentials!
A career in web development | the user | web development essentials!
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
 
Solid Web site Design Guidance Any individual Could Utilize
Solid Web site Design Guidance Any individual Could UtilizeSolid Web site Design Guidance Any individual Could Utilize
Solid Web site Design Guidance Any individual Could Utilize
 
AIAS GRASSROOTS 2015 Technolog Track
AIAS GRASSROOTS 2015 Technolog TrackAIAS GRASSROOTS 2015 Technolog Track
AIAS GRASSROOTS 2015 Technolog Track
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websites
 
American Institute of Architect Students Grassroots 2015
American Institute of Architect Students Grassroots 2015American Institute of Architect Students Grassroots 2015
American Institute of Architect Students Grassroots 2015
 
web design
web designweb design
web design
 

Último

DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道yrolcks
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisPeclers Paris
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementMd. Shariful Hoque
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy ysrajece
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxNitish292041
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 

Último (20)

DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy y
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 

Lecture 1: Web Design + Usability

  • 1. Web Design + Usability Computer Studio IV Spring 2009
  • 2. What NOT to Do
  • 3. 1. The user must know what the site is about in seconds : attention is one the most valuable currencies on the Internet. If a visitor can not figure what your site is about in a couple of seconds, he will probably just go somewhere else. Your site must communicate why I should spend my time there, and FAST! 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 4. 2. Make the content scannable : this is the Internet, not a book, so forget large blocks of text. Probably I will be visiting your site while I work on other stuff so make sure that I can scan through the entire content. Bullet points, headers, subheaders, lists. Anything that will help the reader filter what he is looking for. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 5. 3. Do not use fancy fonts that are unreadable: sure there are some fonts that will give a sophisticated look to your website. But are they readable? If your main objective is to deliver a message and get the visitors reading your stuff, then you should make the process comfortable for them. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 6. 4. Do not use tiny fonts: the previous point applies here, you want to make sure that readers are comfortable reading your content. My Firefox does have a zooming feature, but if I need to use on your website it will probably be the last time I visit it. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 7. 5. Do not open new browser windows: I used to do that on my first websites. The logic was simple, if I open new browser windows for external links the user will never leave my site. WRONG! Let the user control where he wants the links to open. There is a reason why browsers have a huge “Back” button. Do not worry about sending the visitor to another website, he will get back if he wants to (even porn sites are starting to get conscious regarding this point lately…). 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 8. 6. Do not resize the user’s browser windows: the user should be in control of his browser. If you resize it you will risk to mess things up on his side, and what is worse you might lose your credibility in front of him. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 9. 7. Do not require a registration unless it is necessary: lets put this straight, when I browse around the Internet I want to get information, not the other way around. Do not force me to register up and leave my email address and other details unless it is absolutely necessary (i.e. unless what you offer is so good that I will bear with the registration). 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 10. 8. Never subscribe the visitor for something without his consent: do not automatically subscribe a visitor to newsletters when he registers up on your site. Sending unsolicited emails around is not the best way to make friends. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 11. 9. Do not overuse Flash: apart from increasing the load time of your website, excessive usage of Flash might also annoy the visitors. Use it only if you must offer features that are not supported by static pages. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 12. 10. Do not play music: on the early years of the Internet web developers always tried to successfully integrate music into websites. Guess what, they failed miserably. Do not use music, period. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 13. 11. If you MUST play an audio file let the user start it: some situations might require an audio file. You might need to deliver a speech to the user or your guided tour might have an audio component. That is fine. Just make sure that the user is in control, let him push the “Play” button as opposed to jamming the music on his face right after he enters the website. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 14. 12. Do not clutter your website with badges: first of all, badges of networks and communities make a site look very unprofessional. Even if we are talking about awards and recognition badges you should place them on the “About Us” page. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 15. 13. Do not use a homepage that just launches the “real” website : the smaller the number of steps required for the user to access your content, the better. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 16. 14. Make sure to include contact details: there is nothing worse than a website that has no contact details. This is not bad only for the visitors, but also for yourself. You might lose important feedback along the way. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 17. 15. Do not break the “Back” button: this is a very basic principle of usability. Do not break the “Back” button under any circumstance. Opening new browser windows will break it, for instance, and some Javascript links might also break them. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 18. 16. Do not use blinking text: unless your visitors are coming straight from 1996, that is. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 19. 17. Avoid complex URL structures: a simple, keyword-based URL structure will not only improve your search engine rankings, but it will also make it easier for the reader to identify the content of your pages before visiting them. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 20. 18. Use CSS over HTML tables: HTML tables were used to create page layouts. With the advent of CSS, however, there is no reason to stick to them. CSS is faster, more reliable and it offers many more features. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 21. 19. Make sure users can search the whole website: there is a reason why search engines revolutionized the Internet. You probably guessed it, because they make it very easy to find the information we are looking for. Do not neglect this on your site. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 22. 20. Avoid “drop down” menus: the user should be able to see all the navigation options straight way. Using “drop down” menus might confuse things and hide the information the reader was actually looking for. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 23. 21. Use text navigation: text navigation is not only faster but it is also more reliable. Some users, for instance, browse the Internet with images turned off. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 24. 22. If you are linking to PDF files disclose it: ever clicked on a link only to see your browser freezing while Acrobat Reader launches to open that (unrequested) PDF file? That is pretty annoying so make sure to explicit links pointing to PDF files so that users can handle them properly. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 25. 23. Do not confuse the visitor with many versions: avoid confusing the visitor with too many versions of your website. What bandwidth do I prefer? 56Kbps? 128Kbps? Flash or HTML? Man, just give me the content! 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 26. 24. Do not blend advertising inside the content: blending advertising like Adsense units inside your content might increase your click-through rate on the short term. Over the long run, however, this will reduce your readership base. An annoyed visitor is a lost visitor. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 27. 25. Use a simple navigation structure: sometimes less is more. This rule usually applies to people and choices. Make sure that your website has a single, clear navigation structure. The last thing you want is to confuse the reader regarding where he should go to find the information he is looking for. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 28. 26. Avoid “intros”: do not force the user to watch or read something before he can access to the real content. This is plain annoying, and he will stay only if what you have to offer is really unique. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 29. 27. Do not use FrontPage: this point extends to other cheap HTML editors. While they appear to make web design easier, the output will be a poorly crafted code, incompatible with different browsers and with several bugs. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 30. 28. Make sure your website is cross-browser compatible: not all browsers are created equal, and not all of them interpret CSS and other languages on the same way. Like it or not, you will need to make your website compatible with the most used browsers on the market, else you will lose readers over the long term. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 31. 29. Make sure to include anchor text on links: I confess I used to do that mistake until some time ago. It is easier to tell people to “click here”. But this is not efficient. Make sure to include a relevant anchor text on your links. It will ensure that the reader knows where he is going to if he clicks the link, and it will also create SEO benefits for the external site where the link is pointing. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 32. 30. Do not cloak links: apart from having a clear anchor text, the user must also be able to see where the link is pointing on the status bar of his browser. If you cloak your links (either because they are affiliate ones or due to other reasons) your site will lose credibility. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 33. 31. Make links visible: the visitor should be able to recognize what is clickable and what is not, easily. Make sure that your links have a contrasting color (the standard blue color is the optimal most of the times). Possibly also make them underlined. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 34. 32. Do not underline or color normal text: do not underline normal text unless absolutely necessary. Just as users need to recognize links easily, they should not get the idea that something is clickable when in reality it is not. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 35. 33. Make clicked links change color: this point is very important for the usability of your website. Clicked links that change color help the user to locate himself more easily around your site, making sure that he will not end up visiting the same pages unintentionally. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 36. 34. Do not use animated GIFs: unless you have advertising banners that require animation, avoid animated GIFs. They make a site look unprofessional and detract the attention from the content. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 37. 35. Make sure to use the ALT and TITLE attributes for images: apart from having SEO benefits the ALT and TITLE attributes for images will play an important role for blind users. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 38. 36. Do not use harsh colors: if the user is getting a headache after visiting your site for 10 consecutive minutes, you probably should pick a better color scheme. Design the color palette around your objectives (i.e. deliver a mood, let the user focus on the content, etc.). 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 39. 37. Do not use pop ups: this point refers to pop ups of any kind. Even user requested pop ups are a bad idea given the increasing amount of pop blockers out there. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 40. 38. Avoid Javascript links: those links execute a small Javascript when the user clicks on them. Stay away from them since they often create problems for the user. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 41. 39. Include functional links on your footer: people are used to scrolling down to the footer of a website if they are not finding a specific information. At the very least you want to include a link to the Homepage and possibly a link to the “Contact Us” page. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 42. 40. Avoid long pages: guess what, if the user needs to scroll down forever in order to read your content he will probably just skip it altogether. If that is the case with your website make it shorter and improve the navigation structure. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 43. 41. No horizontal scrolling: while some vertical scrolling is tolerable, the same can not be said about horizontal scrolling. The most used screen resolution nowadays is 1024 x 768 pixels, so make sure that your website fits inside it. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 44. 42. No spelling or grammatical mistakes: this is not a web design mistake, but it is one of the most important factors affecting the overall quality of a website. Make sure that your links and texts do not contain spelling or grammatical mistakes. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 45. 43. If you use CAPTCHA make sure the letters are readable: several sites use CAPTCHA filters as a method of reducing spam on comments or on registration forms. There is just one problem with it, most of the times the user needs to call his whole family to decipher the letters. 43 Web Design Mistakes You Should Avoid By: Daniel Scocco http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/
  • 46. What should I do then?
  • 47. Principles Of Effective Web Design: In order to use the principles properly we first need to understand how users interact with web-sites, how they think and what are the basic patterns of users’ behavior. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 48. How do users think? Users appreciate quality and credibility. If a page provides users with high-quality content, they are willing to compromise the content with advertisements and the design of the site. This is the reason why not-that-well-designed web-sites with high-quality content gain a lot of traffic over years. Content is more important than the design which supports it 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 49. How do users think? Users don’t read, they scan. Analyzing a web-page, users search for some fixed points or anchors which would guide them through the content of the page. Notice how “hot” areas abrupt in the middle of sentences. This is typical for the scanning process 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 50. How do users think? Web users are impatient and insist on instant gratification. Very simple principle: If a web-site isn’t able to meet users’ expectations, then designer failed to get his job done properly and the company loses money. The higher is the cognitive load and the less intuitive is the navigation, the more willing are users to leave the web-site and search for alternatives. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 51. How do users think? Users don’t make optimal choices. Users don’t search for the quickest way to find the information they’re looking for. Neither do they scan web-page in a linear fashion, going sequentially from one site section to another one. Instead users satisfice; they choose the first reasonable option. As soon as they find a link that seems like it might lead to the goal, there is a very good chance that it will be immediately clicked. Optimizing is hard, and it takes a long time. Satisficing is more efficient. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 52. How do users think? Users follow their intuition. In most cases users muddle through instead of reading the information a designer has provided. According to Steve Krug, the basic reason for that is that users don’t care. “If we find something that works, we stick to it. It doesn’t matter to us if we understand how things work, as long as we can use them. If your audience is going to act like you’re designing billboard, then design great billboards.” 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 53. How do users think? Users want to have control. Users want to be able to control their browser and rely on the consistent data presentation throughout the site. E.g. they don’t want new windows popping up unexpectedly and they want to be able to get back with a “Back”-button to the site they’ve been before: therefore it’s a good practice to never open links in new browser windows . 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 54. 1. Don’t make users think According to Krug’s first law of usability, the web-page should be obvious and self-explanatory . When you’re creating a site, your job is to get rid of the question marks — the decisions users need to make consciously, considering pros, cons and alternatives. If the navigation and site architecture aren’t intuitive, the number of question marks grows and makes it harder for users to comprehend how the system works and how to get from point A to point B. A clear structure, moderate visual clues and easily recognizable links can help users to find their path to their aim. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 55. 1. Don’t make users think 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ Although the design itself is simple and intuitive, to understand what the page is about the user needs to search for the answer. This is what an unnecessary question mark is. It’s designer’s task to make sure that the number of question marks is close to 0. The visual explanation is placed on the right hand side. Just exchanging both blocks would increase usability.
  • 56. 2. Don’t squander users’ patience In every project when you are going to offer your visitors some service or tool, try to keep your user requirements minimal. The less action is required from users to test a service, the more likely a random visitor is to actually try it out. First-time visitors are willing to play with the service , not filling long web forms for an account they might never use in the future. Let users explore the site and discover your services without forcing them into sharing private data. It’s not reasonable to force users to enter an email address to test the feature. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 57. 2. Don’t squander users’ patience 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ Stikkit is a perfect example for a user-friendly service which requires almost nothing from the visitor which is unobtrusive and comforting. And that’s what you want your users to feel on your web site.
  • 58. 3. Manage to focus users’ attention As web-sites provide both static and dynamic content, some aspects of the user interface attract attention more than others do. Obviously, images are more eye-catching than the text — just as the sentences marked as bold are more attractive than plain text.The human eye is a highly non-linear device, and web-users can instantly recognize edges, patterns and motions . This is why video-based advertisements are extremely annoying and distracting, but from the marketing perspective they perfectly do the job of capturing users’ attention. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 59. 3. Manage to focus users’ attention 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ Humanized.com perfectly uses the principle of focus. The only element which is directly visible to the users is the word “free” which works attractive and appealing, but still calm and purely informative. Subtle hints provide users with enough information of how to find more about the “free” product.
  • 60. 4. Strive for feature exposure Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. But from the design perspective these elements actually aren’t a bad thing. On the contrary, such guidelines are extremely effective as they lead the visitors through the site content in a very simple and user-friendly way. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 61. 4. Strive for feature exposure 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ Letting the user see clearly what functions are available is a fundamental principle of successful user interface design. It doesn’t really matter how this is achieved. What matters is that the content is well-understood and visitors feel comfortable with the way they interact with the system.
  • 62. 5. Make use of effective writing As the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing habits. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language will be ignored. Talk business. Avoid cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names. For instance, if you describe a service and want users to create an account, “sign up” is better than “start now!” which is again better than “explore our services”. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 63. 5. Make use of effective writing 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ Eleven2.com gets directly to the point. No cute words, no exaggerated statements. Instead a price: just what visitors are looking for.
  • 64. 6. Strive for simplicity The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 65. 6. Strive for simplicity 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ Crcbus provides visitors with a clean and simple design. You may have no idea what the site is about as it is in Italian, however you can directly recognize the navigation, header, content area and the footer.
  • 66. 7. Don’t be afraid of the white space Actually it’s really hard to overestimate the importance of white space. Not only does it help to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information. Complex structures are harder to read, scan, analyze and work with. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 67. 8. Communicate effectively with a “visible language” In his papers on effective visual communication, Aaron Marcus states three fundamental principles involved in the use of the so-called “visible language” — the content users see on a screen. 1. Organize : provide the user with a clear and consistent conceptual structure. 2. Economize : do the most with the least amount of cues and visual elements. 3. Communicate : match the presentation to the capabilities of the user. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 68. 9. Conventions are our friends Conventional design of site elements doesn’t result in a boring web site. In fact, conventions are very useful as they reduce the learning curve, the need to figure out how things work. For instance, it would be a usability nightmare if all web-sites had different visual presentation of RSS-feeds. That’s not that different from our regular life where we tend to get used to basic principles of how we organize data (folders) or do shopping (placement of products). 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 69. 10. Test early, test often This so-called TETO-principle should be applied to every web design project as usability tests often provide crucial insights into significant problems and issues related to a given layout. 10 Principles Of Effective Web Design Smashing Magazine http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 71. Best of CSS Design 2008 http://www.webdesignerwall.com/trends/best-of-css-design-2008/
  • 72.  
  • 73.  
  • 74.  
  • 75.  
  • 76.  
  • 77.  
  • 78.  
  • 79.  
  • 80.  
  • 81.  
  • 82.  
  • 83.  
  • 84.  
  • 85.  
  • 86.  
  • 87.  
  • 88.  
  • 89.  
  • 90.  
  • 91.  
  • 92.  
  • 93.  
  • 95. 1. Letterpress Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  • 96. 2. Rich User Interfaces Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  • 97. 3. PNG transparency Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  • 98. 4. HUGE Typography Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  • 99. 5. Font Replacement Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  • 100. 6. Modal Boxes (Lightboxes) Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  • 101. 7. Media Blocks Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  • 102. 8. The Magazine Look Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  • 103. 9. Carousels (Slideshows) Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  • 104. 10. Introduction Blocks Web Design Trends For 2009 Smashing Magazine http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/