Click me
Transcribed

Visual Hierarchy Hacks for a Super-Cool Website Design

VISUAL HIERARCHY HACKS TO DESIGN A "SUPER-COOL" WEBSITE The last thing you want for your website is a visual chaos. You can't dump everything on the web pages and expect visitors to not bounce off. Function and aesthetics go hand-in-hand when it comes to user-interface and user-experience. This is where visual hierarchy comes into the picture. It is important to create a web design, which: Communicates Informs Appeals Entertains |VISUAL HIERARCHY IN WEB DESIGN What is it? What does it do? Arrangement of content to give direction to human eye Guides visitors through their buyer's journey Presentation of elements to put emphasis on information Helps readers focus on sections of a website Technique to structure visual aids and text on web pages Creates relationships between content Who is it for? Developers Businesses Goal: Use HTML and CSS Goal: Communicate to improve Ul and UX of your message in the your website best possible way Audience Designers Goal: Without a manual, Goal: Organize everything reach the intended using design elements parts of the website and principles What should you focus on? FOCUS: Title / Message | Subscription | Social media icons Publishing Portfolio FOCUS: Thumbnails | Press releases | Contact Ecommerce FOCUS: CTA buttons | Search bar | Sales offers Business FOCUS: Message | CTA button | Products FYI You can focus on what is important to you HOW TO GO ABOUT IT? The tactics used to make visual hierarchy a reality on your website. 1 PAGE SCANNING F Pattern > Applied to text-heavy web pages > Reading starts from left to right > Put your logo design on top left Z Pattern > Web layout follows letter "Z" shape > Center of web page should be striking > Works well on a page with one CTA Zigzag Layout > Add main content on 6-points of interest > Great for audience skimming a website > Divides web page in half: split-screen design Gutenberg Diagram > Website page is divided in 4 quadrants > Place triggers on top left and bottom right > Readers' eyes work diagonally on the page LOOK OUT Study your target audience before choosing a pattern Manuscript > An easy grid: single column layout Content in center of a vertical rectangle > Margin on left and right of the page 2 GRID IN PLACE Column Newspaper style: content in columns Offers adaptablity to arrange text and visuals Gutters add viewing breaks in overall design Modular > Creates modules with rows and columns > Works for websites with a lot of images Block-like structure appears vividly Hierarchical Column and row measurements vary Design is random with custom proportions Elements are placed asymmetrically THINK ON IT What do responsive grids look like? 3 COLOR HIGHLIGHTING Color Psychology Know color meanings and emotions Color Palette > Structures information on website > Offers consistency across web pages > Each color carries cognitive value Pastels don't work for call-to-actions Use color traits to accentuate content SUPER TIP Don't use more than 3 colors for your Ul design Top Color On The Web White Gives a clean and honest appearance Popularly used by minimalist designers > White space gives rest to the eye Blue Generally used for text with links > Gives a corporate appeal to site > It is cooling to the eyes of viewers Black > Used for text on light background > Gives a classic and elegant look > Emphasizes sections of content on page Red Used for web links and CTA > Adds energy, action and passion > Use tones and shades for variation EXCUSE ME! Use of color can differ according to business and audience 4 TYPOGRAPHY AT ITS BEST Type > Maximum two typefaces and vary font > Can be serif, sans serif or script > Font has moods and evokes feelings LOREM IPSUM DOLOR ABC SIT AMET Consectetur adipiscing elit. Phasellus sagittis lectus eget eleriso da lacinia. Aenean ABC Weight > How thick or thin letters are > Isolate headings with bold fonts > Avoid ultra-thin fonts for a lot of text Lorem ipsum dolor sit amet Consectetur adipiscing elit. Phasellus sagittis lectus eget metus malesuada lacinia. Aenean scelerisque Size > HTML tags (h1 to hó) structure text > Titles are bigger than body copy > Basic way to add visual hierarchy HEADING 1 HEADING 2 Lorem Ipsum adipiscing elit. Phasellus sagittis lectus eget metus malesuada lacinia. Phasellus sagittis lectus eget Levels HEADING > Primary:content that draws visitors to design Lorem ipsum dolor sit amet, consectetur adipiscing elit. (header, image deck, adverts) > Secondary: scannable content to help readers stay Phasellus sagittis lectus eget metus malesuada lacinia. Aenean scelerisque, urna eu (subheads, pull quote, navigation) > Tertiary: the smallest text on web page design (footer, quick links, body copy) How do you add visual hierarchy to your website design? Sources: http://newmedia.yeditepe.edu.tr/pdfs/isimd_10/eldeniz-kartopu.pdf https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ https://www.nimmal.com.au/web-design-principles-for-business/ https://www.designtoday.io/home/2017/2/23/6-principles-of-visual-hierarchy-for-designers https://webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-design-webdesign-687 http://vanseodesign.com/web-design/3-design-layouts/ Wilbert O. Galitz. The Essential Guide to User Interface Design: An Introduction to GUI Design Ina Saltz. Typography Essentials: 100 Design Principles for Working with Type Rob Carter, Philip B. Meggs, Ben Day. Typographic Design: Form and Communication ZILLION DESIGNS /ZILLIONDESIGNS y @ZILLIONDESIGNS in) /COMPANY/ZILLIONDESIGNS &+ +ZILLIONDESIGNS Litr NN

Visual Hierarchy Hacks for a Super-Cool Website Design

shared by ZillionDesigns on Apr 11
528 views
0 shares
0 comments
Don't want your visitors to run away? Use visual hierarchy strategies to make a website design your target market will love! This infographic has it all - from the questions you often think about to t...

Category

How To
Did you work on this visual? Claim credit!

Get a Quote

Embed Code

For hosted site:

Click the code to copy

For wordpress.com:

Click the code to copy
Customize size