Skip to content
This repository has been archived by the owner on Jun 22, 2020. It is now read-only.

Latest commit

 

History

History
131 lines (95 loc) · 4.42 KB

w04d3.md

File metadata and controls

131 lines (95 loc) · 4.42 KB

Week 04 Day 3

🗣 @sundeep-charan

Topics

Navbar

  • navigation bars are used for easy access to separate page sections
  • they make moving around a web page easy and user friendly for the end user
  • nav bar has stuff like:
    • page sections - /about, /contact, /careers, etc
    • a logo

Navbar tips

  • more than 5 common options are discouraged to use in design
  • if lot's of options one can hide them into drop down menu or something
  • as a rule of thumb limit font size to 16px in nav bar
  • for colors, flip/oppose them that is, use contrasting colors for better readability and visual appeal

Forms

Why

  • newsletters (service)
  • advertisements (offers)
  • data analytics
  • login
    • to know who is end user
    • adding a level of security to avoid scammy end users
    • authentication
    • "remember me?" option for easier access later
    • some examples from dribble.com

Making logical decisions

  • bounce rate - end user who visited web app without viewing content
  • making forms more intuitive with real time validation
  • using buttons according to usage scenarios or context
    • like create ac button is highlighted/attractive whereas cancel button is boring/neutral

Empty state of a web application

  • stuff that is shown to end user as soon as he visits a web app for the first time
  • 2 checks:
    • you as a developer has role to provide end user resources from server
      • status of website
      • loading screen or an intuitive prompt of what is going on
      • something to ensure the end user is kept engaged
    • end user part like if she/he doesn't have internet connection
      • prompt user with friendly "error message" prompt

Dashboard views

  • it depends on website we're working on
  • dashboard is admin panel which is hidden from "non-registered" user
  • building dashboards is good for flexing your development skills
  • rave about how great is razorpay.com 😅

Buttons and actions

  • actions vs buttons:
    • button make sure something interactive happens when one clicks on them, some state getting changed
    • action do something, like re-direction

Colors

  • very broad topic
  • it's foolish to take color scheme of a website lightly, they matter, a lot
  • goal is to use colors that invoke appropriate feels
    • like for calming effect use green/blue
  • like youtube, coke, netflix uses red since it has most wavelength -- these brands wants to pop out

Rule of thumb👍

  • think a lot before slapping a color pallete into your website

Typography

  • attention is an asset from end user, you need to use fonts such that attention is grabbed in a profitable manner
  • bold fonts catches eyes more easily
  • be consciously aware about font-sizes you choose

Tips for good typography

  1. understand font families
  2. use few fonts
  3. respect font integrity - do NOT distort font's shape or size beyond logic
  4. use hierarchical (arrange fonts in an ordered way) font structure

Modals

  • dialogs provide yes/no or two generic options, one changes stuff and one returns/stay in same area
  • pop overs are for informative in nature, like alert saying "access denied"
  • tabs are linking together seperate web pages based on their context
  • tool tips provides additional information about some page element when you hover over it
  • pagination limit amount of results at time to avoid server overload, like in amazon.in when one search mobile, out of 10,000 results just 10 or so are shown

Testing your design

  • 5 second test
  • first click test

Spacing and layout

  • important to make use of space to organize content such that it is visually pleasing
  • elements/page content must look easily differntiable so that end user doesn't get confused

Using charts and graphs

  • to add visual element and represent data in attractive manner since textual data is inherently boring

Using icons

  • icons enchance site interactivity, triggers user sense of familiarity, so that