Week 8 : Visual Design

Visual Design is about planning how our web site will look. We design the interface of our website.

There are several things need to be considered when visualizing our Web Site which are :

• What colors will look good together on our site?
• What fonts or styles you will use for the written part of your web pages?
• What graphics and multimedia effects are needed?
• How will all of these elements be combined or arrange into an attractive layout?

Elements of User Interface

• A background that reflects the theme.
• Colours or Images
• Foreground elements that reflect the theme.
• Content and Links (title, headings, sub headings,body text, illustrations, captions)
• Other elements that support the theme.
• Text, images, buttons, navigation bars, animation,video, etc.
• Typography
• Keep it simple

General Issues in visual design :

• Limit number of fonts per page and per site
• Use the same fonts consistently throughout the site

Make good font choices :

• Sans serif vs. serif ?

• Commonly installed fonts

• Mood

• Readability

General application user interface guidelines: 

1. Always use cute icons, buttons, and graphics. Everyone loves big red hearts, pink bunnies, and yellow smily faces.
2. Don't be afraid to experiment with colors!
3. Your application should play fun sounds while operating to keep the users entertained.
4. Never, ever, under any circumstance use the OS-native graphical controls or widgets. Users get bored of the same old buttons, text boxes, and stuff.
5. When possible, disable window management and use unusual, oddly placed graphics for the windowing functions such as the window close option.
6. When writing your own controls or widgets, make absolutely sure they look and feel nothing like the OS-native widgets or anything else the user might expect. Otherwise you might accidentally make the user think that your application is actually designed for their OS.
7. Use your own creative ideas on how a "save as" dialog should look and work. Built in ones are always too limiting.
8. It is important that the user should never be able to tell the difference between a checked and unchecked check box or option box.
9. Always use obscure or poorly drawn graphics for your tool bar buttons, and never put text on them.
10. Avoid including a preferences or options dialog. Instead, let the user use the standard OS provided text editor or an editor of their choosing to edit text configuration files.
11. Users need time to think about what they are doing and get coffee. Your application should always take at least 5 minutes to load even on the fastest available computer.
12. Make sure an accidental double-click on a single-click item does something really nasty or unexpected.
13. Tool tips are the perfect way to display critical information.
14. To get the most screen space, force your application to always run maximized.
15. Always make the default positions of floating properties windows cover something important.
16. Use the most exotic fonts you can find.
17. Your application's user interface should be flexible and customizable to the point where if the user accidentally sneezes on the mouse or keyboard they will have to spend the next half an hour setting things back.
18. Let a 5-year old draw your graphics, including your corporate logo.
19. File browsing dialogs are not needed, users can easily remember and type in long file paths.
20. Design your application so it requires the user to set their tiny monitor to 10512 X 7430.
21. Always crash at a critical step and then display a fake apology to the user.
22. It is a mistake to make use of application hooks in the native desktop environment such as new file templates, file associations, or program menu icons.
23. The exception to the above is placing icons in the system tray. Place as many icons as you can in the system tray and make sure that the user can not remove them.
24. If your program implements keyboard shortcuts be original and make them completely different from any other applications.
25. Rent extra UI space in your application out for advertising. Advertising benefits the users and your wallet.
26. Never underestimate the power of nudity.
27. Don't forget to embed a hidden video game as an "easter egg".

 

 

SELF REVIEW

Visual design is about our website interface. How the templates and layout of the website look like. In this phase, we are going to planning on how our website is will look. This including the combination color that we used for our website, the font style for written part of pages, graphic and multimedia effects are needed, and how will all the elements be combined or arrange into an attractive layout. All those thing are very important for the visual design. Other than that, to make sure our website is very good in interface, there are some guidelines that we need to follow in order to produce a good website.