Back to top

Web Design 101

Online Design Resources

Zero To Mastery - Resources

Behance.net

GoodUI.org

Awwwards.com

Flaticon.com

TheNounProject.com

Unsplash.com

Inspiration for Design

How to Stay Inspired

You need to constantly stimulate your creativity

How to Find Online Inspiration

Style Guides

50 Meticulous Style Guides Every Startup Should See Before Launching

More Style Guides

Another Style Guide

UI Design

13 UI Design Principles

8 Websites with Great UI

4 Golden Rules of UI Design

10 Rules of Good UI Design to Follow on Every Web Design Project

  1. Hierarchy
    • Use colors that contrast with their background for higher hierarchy
    • Use size. Bigger items draw your eye first. Place large items where you want your customers to go first.
  2. Layout
    • Create more interest by having different blocks, sizes, shapes
    • There is an optimal line length. Around 40-60 characters per line.
    • Good layout chops up the content for you so you can take it in faster.
  3. Alignment
    • How you position your elements on the screen in relation to the other items.
    • One of the easiest ways to make your design look professional is to reduce the number of alignment points.
    • Have your title, content/body and button all line up on the left. Looks cleaner, it's easier to read, and looks more professional.
  4. White Space
    • Don't have too much going on in your design.
    • Instead of putting: new! 20% off, Only $19.99; Put a lot of white space with the a picture of the product and the price listed below along where you can buy it.
    • This makes your item look like it's worth more, it's elevated, and more professional.
  5. Audience
    • Think about what color scheme, font, design would appeal to your audience.
    • Have the flexibility in your design style to match what you are selling.

UX Design

  1. Simplicity
    • Keep things simple and minimalistic.
  2. Consistency
    • Keep your designs and functionality of your product consistent from page to page.
  3. Reading Patterns
    • F Pattern: First, across the top of the page to read important headlines. Then, down the left side of the page to view numerals or bullet points. Lastly, across the page again to read bolded text or subheadlines.
      • F Pattern is the go-to layout for text-heavy websites such as blogs and news sites. If there is a lot of content -- especially text -- users will respond better with the layout that designed according to the natureal scanning format.
      • F Shaped Pattern for Reading Content and Design
    • Z Pattern: First, people scan from the top left to the top right, forming a horizontal line. Next, down and to the left side of the page, creating a diagonal line. Last, back across to the right again, forming a second horizontal line.
  4. All Platform Design
    • You need to think about all screen sizes in your design.
    • You should refactor your website to work well on phones, tablets, laptops and desktops.
    • Test your design. You can pay professionals, or just ask friends and family to test it out.
  5. Ethics of Design: Don't Use Your Powers for Evil

Visual Design: Theory & Accessibility

Online Resources

Tools

Individual Figma Files

Figma Plugins

Extra Figma Files

Extra Articles/Websites & Resources