1 / 13

Principle of effective web design - Hyper Effects

People on the web want information quickly, so it is important to communicate clearly and make their information easier to read and digest. Some principle of effective web design tips to incorporate into your web design include: organizing information using headlines and sub-headings, using bullet points instead of long curved sentences, and cutting waffles.

ConnorHunterhj
Télécharger la présentation

Principle of effective web design - Hyper Effects

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Principle of Effective Web Design 01

  2. Discussion Points Overview Purpose Communication 02 Typefaces Colours Images Navigation Grid-based layouts “F” Pattern design Load time Mobile friendly

  3. Purpose Good web design always meets user requirements. Are your web visitors looking for information, entertainment, any type of conversation, or transactions with your business? Each page of your website should have a clear purpose and should cater to a specific need in the most effective way for the users of your website.

  4. 04 People on the web want information quickly, so it is important to communicate clearly and make their information easier to read and digest. Some principle of effective web design tips to incorporate into your web design include: organizing information using headlines and sub- headings, using bullet points instead of long curved sentences, and cutting waffles. Communication

  5. Typefaces In general, sans serif fonts like Arial and Verdana are easy to read online (sans serif fonts are contemporary looking fonts without a decorative finish). The ideal font size for easy online reading is 16px and stick to a maximum of 3 typefaces in maximum 3 point sizes to keep your design streamlined.

  6. Colours A well thought out color palette can go a long way to enhance the user experience. Complementary colors create balance and harmony. Using contrasting colors for text and backgrounds will make reading easier on the eyes. Vibrant colors evoke emotion and should be used sparingly (eg buttons and call to action). Last but not least, white space / negative space is very effective in giving your website a modern and streamlined look.

  7. 07 Images A picture can speak a thousand words, and choosing the right images for your website can help in positioning the brand and connecting with your target audience. If you do not have high-quality professional photos available, consider purchasing stock photos to elevate the look of your website. In addition, consider using infographics, videos, and graphics as these can be more effective in communication than the best- written text.

  8. Navigation Navigation is about how easy it is for people to take action and move around your website. Some tips for effective navigation include a logical page hierarchy, using bread crumbs, designing clickable buttons, and following the 'three click rule', which means that users will be able to find that information within three clicks What they are looking for.

  9. Grid-based layouts PLACING CONTENT RANDOMLY ON YOUR WEB PAGE CAN LEAD TO A RANDOM APPEARANCE THAT IS A MESS. GRID-BASED LAYOUTS ORGANIZE CONTENT INTO SECTIONS, COLUMNS, AND BOXES THAT FEEL LINED AND BALANCED, WHICH LEADS TO A BETTER-LOOKING WEBSITE DESIGN.

  10. “F” Pattern design 10 Eye-tracking studies have shown that people scan computer screens in an "F" pattern. What most people see is the top and left sides of the screen and the right side of the screen is rarely seen. Instead of trying to force the visual flow of the audience, effectively designed websites will work with the reader's natural behaviour and display information in order of importance (left to right, and top to bottom).

  11. 11 Load time Everyone hates a website that takes ages to load. Tips to make page load time more effective include optimizing image size (size and scale), combining code into a central CSS or JavaScript file (this reduces HTTP requests) and HTML, CSS, JavaScript (their load Compressed to speed up time).

  12. Mobile friendly It has now become common to access websites from multiple devices with multiple screen sizes, so it is important to consider whether your website is mobile- friendly. If your website is not mobile- friendly, you can either recreate it in a reactive layout (meaning your website will adjust to different screen widths) or you can create a dedicated mobile site (specifically A separate website optimized for mobile users).

  13. Thanks for attending! We're here to support you! Visit our website http://hypereffect.com/ for comments or questions.

More Related