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