Download to read offline
More Related Content
Similar to PRINCIPLES-OF-WFSSSSSSSFFFEB-DESIGN.pptx
More from ZairaKimberlySantiag
PRINCIPLES-OF-WFSSSSSSSFFFEB-DESIGN.pptx
- 1. Basic Web Design Principlesand Elements
- 2. Basic Web DesignPrinciples The most important factor in web design is the end user. So, in designing your own web pages, remember the following principles:
- 3. Principle #1: VisualLanguage 1. Use a consistent template on each page with a uniform color scheme.
- 4. Principle #1: VisualLanguage 2. Create the most contrast in the area where you want more attention to.
- 5. Principle #1: Visual Language 3.Avoid too large or too small font size. Avoid too many typefaces too.
- 6. Principle #1: Visual Language 4.Use common font style to similar items across the web pages.
- 7. Principle #1: Visual Language 5.Make important links or menus more prominent in terms of color.
- 8. Principle #1: VisualLanguage 6. Use high-quality pictures
- 9. Principle #1: VisualLanguage 7. Images used should follow the rule of thirds as a rough guideline. “The rule of thirds states than an image is most pleasing when its subjects or regions are composed along imaginary lines which divide the image into thirds — both vertically and horizontally.”
- 10.
- 11. There should bea balance distribution of heavy and light elements on the page.
- 12. Proper alignment oftext and images in a web page helps maintain consistency in design.
- 13.
- 14. The size ofa button should be proportional to its expected frequency of use.
- 15. Group similar thingstogether in terms of shape, color or shading.
- 16. Create a patternwhich will make your page easier to use, remember and understand
- 17.
- 18. “Paradox of choice meansthe more choices you provide, the easier for others to choose nothing.” Hence, you should eliminate unimportant or distracting menus or options.
- 20.
- 21. Design around context ofthe multiuser in a multi-screen and in a multi- device.
- 22.
- 23. Know the purposeof your web page so you could match the content with the purpose.
- 24. Content should bespellchecked.
- 25. Content should beorganized.
- 26. There should be aclear delivery of content.
- 27.
- 28. Content should beupdated. Always add something new to your content. If you have nothing to add, you can pick some free articles or free e-books at: http://www.web-source.net/free_articles.htm or http://www.web-source.net/free_ebooks.htm • Just make sure to acknowledge the author or include the author’s resource box.
- 29.
- 30. Minimal design doesnot always mean an effective design. However, when choosing between simple and the opposite, the former is always a better choice than the latter. Hence, strive to have a simple design.
- 32.
- 34. Use minimal animatedgraphics.
- 35. Maintain a lookand feel across all the web pages.
- 36. Activity Directions: Create alogo of your section and apply the Principles of Design Principle #1: Visual Language Principle #2: Balance Principle #3: Paradox of Choice Principle #4: Focus on Content Principle #5: Simplify
- 37.
- 38. Web design elementsare building blocks of a webpage. Here are the basic elements that were handpicked and organized for you to consider in your web design:
- 39.
- 40. Illustrations include lines, shapes, texture andcolor which are fundamental elements that should not be overlooked.
- 41. Lines are usedto organize, connect, and separate information and design elements. Combined with shapes, color, and texture they give us a visual grammar which you can use to communicate.
- 42.
- 43. • Links arethe most basic interface on web pages. Links should be distinctive in color from other types of text in a webpage. Keep links and regular text styled consistently to avoid users from thinking whether or not the text is a link. • Make sure your links are working.
- 44.
- 45. • Just likelinks, buttons and menus are also essential to web pages and they too need consistent styles. • Buttons and menus should be well-organized. • Button labels and menus should be clear and easy to understand.
- 46.
- 47. • Images alsoaids in communicating your message to the viewers. Aside from being used as fillers, images also helps in leaving a lasting first impression.
- 48. • Use specificimages that are related to your content so that it will draw attention not only to the content but to your web page as a whole.
- 50. Web Templates and WYSIWYGPlatforms
- 51. WYSIWYG = “whatyou see is what you get” • In this kind of platform, no coding skills are required. Instead, you manipulate with design components using an editor window and get the chance to choose what elements are placed on your page.
- 52. • Web templatesare unique full page layout that contains generic information which can be replaced by the users with their own personal information.