DEV Community

loading...
Cover image for How to apply UX to your website?

How to apply UX to your website?

rahxuls profile image Rahul ・2 min read

User Experience is a must on the website as that is the thing people experience first. There are 99% chances that the visitor will go whether you have amazing content but if you don't have good UX. Let's see how we can apply UX to our website.


Make use of convention

  • Logo placed on the top-left corner
  • Main navigation menu places highest up on the page, on the right side or centred
  • Contact included in the navigation menu
  • Call to Action button at the top
  • The search feature in the header
  • Social media links (as icons) in the footer
  • Sign-up form in the footer

Maintain visual & Typography Hierarchies

Typography Hierarchies
  • Title (h1)
  • Heading (h2)
  • Sub-heading(h3)
  • Paragraph / Body texts
Visual Hierarchy
  • Size
  • Weight
  • Color
  • Position
  • Type Contrast

Format text for the kids

  • Use as sens-serif font for better readability
  • Use plenty of headings
  • Keep paragraphs short
  • Use bulleted lists
  • Highlight key terms

Don't let your website shout

  • Use white-space
  • You don't need too many popups. Popups should notify, not annoy.
  • A simple, clean design always wins

If it should be clicked. make it obvious

Links & Buttons
  • A link is usually underlined and coloured. which changes on hover, focus and visited. Make sure the colours are set different for all of these different actions.
  • A button can be easily identified when they have shadow, different( darker), background-colour or bold text. The shadows can increase or colours can change on hover and click.

Omit needless words

People never read content, they scan !!

  • Remove everything that doesn't directly affect people's decisions
  • Don't want to overwhelm people with too much content

The deal is, people are visual

  • Use images, info-graphics, slideshows, videos and Gifs 🤩

Extra TIPS

  • Optimize your page speed
  • Use images (wisely
  • Keep your website pages consistent
  • Catch your 404s
  • Be responsive and mobile-friendly
  • Use main navigation - secondary(mega) navigation
  • Use footer navigation, Mobile navigation (Side Drawer), Bottom navigation bar, Tabs

🤩Thanks For Reading | Happy Coding ⌚

Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from Here

Discussion (0)

pic
Editor guide