Basic Web Design Principles and Elements PDF

Basic Web Click to edit Master title style Design Principles and Elements Prepared by: Mr. Joshua Merilo 1  Basic Web Design Click to edit Master title style Principles Web design principles are general rules...

Basic Web Click to edit Master title style Design Principles and Elements Prepared by: Mr. Joshua Merilo 1  Basic Web Design Click to edit Master title style Principles Web design principles are general rules for the design of web-based media that include basic guidelines for the design of layouts and intersection design. Design Principles are a set of guidelines that empower a team to make wise decisions and appropriate trade-offs when designing, building and innovating. 2 2  Basic Web Design Click to edit Master title style Principles An successful website design must achieve its purpose by communicating its specific message while also captivating the viewer. Several factors consistency, colors, typography, imagery, simplicity and functionality all contribute to a good website design. Optimized in the form of aesthetics and functionality. 3 3  Principle#1: Click to edit Master title style Visual Language Use consistent template on each page with a uniform color scheme. Use contrasting color between text and background in the place you want attention Avoid large and small font sizes and many typefaces. Make important links or menus more prominent in terms of colors. 4 4  Principle#1: Click to edit Master title style Visual Language Use pictures that are high quality. Use the rule of thirds for images (The image is divided into 3 regions both horizontally and vertically.) 5 5  Principle#1: Click to edit Master title style Visual Language 6 6  Principle#2: Click to edit Master title style Balance There should be a balance distribution of heavy and light elements. Proper alignment of text and images to helps maintain consistency in the web page design. Important information is placed near the top. Group similar things together in terms of shape, color or shading. 7 7  Principle#2: Click to edit Master title style Balance Create pattern which will make your page easier to use, remember and understand. 8 8  Principle#3: Click to edit Master title style Paradox of Choice “Means the more choices you provide, the easier for others to choose nothing.” This means that you should eliminate unnecessary designs. Focus on the needs of the user. 9 9  Principle#4: Click to edit Master title styleFocus on content Match the content of the web page with its purpose. Content should be ispellchecked and organized. Include images on your content not just pure text. 10 10 Principle#5: Click to edit Master title style Simplify Follow a simple design. Keep it simple but functional. Use minimal animated graphics. 11 11  Principle#6: Grid based Click to edit Master title style Layout Grids helps to structure your design and keep your content organized. It also helps to align elements on the page and keep it clean. 12 12 Click to edit Master title style 13 Click to edit Master title style 14  Principle#7: Click to edit Master title style Load Time Waiting for a website to load will lose visitors. Nearly half of visitors expect a site to load in 2 seconds or less and they will potentially leave a site that isn’t loaded within 3 15 15 Click to edit Master title style Basic Web Design Elements 16  Basic Web Click to edit Master title style Design Elements Web design is the process of creating websites. It encompasses several different aspects, including webpage layout, content production, and graphic design. The layout and appearance of the elements within a webpage are typically defined17 Element#1: Click to edit Master title style Navigation The website design should be easy to navigate. Menu items should easily accessible from any page. 18 Element#2: Click to edit Master title style Visual Design For the greatest impact, utilize flash intros, animation, and scrolling text sparingly in your web design and just to highlight a point. 19 Element#3: Click to edit Master title style Content This is the backbone of your website. Your website text should be informative and easy to read. It is the reason most visitors are seeking from your website. 20 Element#4: Click to edit Master title style Web Friendly It is important that your website work on all the major browsers, and that they utilize meta tags, alt tags, are fully versed in SEO (Search Engine Optimization). 21 Element#5: Click to edit Master title style Color Scheme Your color palette and fonts will directly inform your visitors’ opinion of your site and are what most novice designer start with. 22 Element#6: Click to edit Master title style Typography Good typography will establish a strong visual hierarchy, provide a graphic balance to the website, and set the webpage design overall tone. Typography should guide and inform your users, optimize readability. 23 Click to edit Master title style 24 24 Click to edit Master title style 25 25 Click to edit Master title style Thank You NEXT! 26