April 5, 2023 Training

Web Design for Beginners by Envato Tuts on Youtube

UX Design includes things like information architecture, user psychology, usability testing, content strategy, wireframes, interaction design, etc.

UI Design includes things like color, typography, spacing, sizing, shape, etc.

Web Design includes building the site. They often are UX designers, UI designers, or both.

Project briefs – an outline of what the site is and who it is for, includes clues to functionality, design cues, and scale

Then wireframe (ideally in whatever you will build the site in)

– a wireframe is a low res version that outlines the final website

Remember to use RGB. Remember color psychology.

– find good gradients at webgradients.com

– dribbble.com is also good for colors

Create a color palette – remember contrast and accessibility

Typography is deeply important. Remember Google Fonts and Adobe Fonts

The more fonts/font types you use, the slower the cite loads so be mindful

Readability should be a priority for buttons, menus, captions, and body text (places where text is often a bit smaller)

Establish heading guidelines. Make sure headings are always hierarchical

For sizing and spacing, keep those numbers as multiples of your base number

For font sizes, if your base number is 6, you could use 16 pt, 24 pt, and 32 pt font

Bootstrap icons, Font Awesome, for icons

Hero area needs to be the primary thing you want a visitor to take away

– is it an understanding of who you are? What product you offer? What is the vibe?

Remember similar looking buttons should share a similar purpose. Buttons with different purposes/functionalities should look different.

– Responsive design allows users to have a better idea of what they are doing on a site

A finger is larger than a cursor, so buttons need to be an appropriate size for touch devices

Images should never be stock

If the image is the focus (like a product image), you should allow users to see a larger version.

Headers and footers should be like checkpoints, places to offer a user information and direction without having to entirely renavigate the site

Be we read top to bottom, consider how this may change what someone needs from the footer versus the header