Flux Free Web Design Course

Free Web Design Course 2020

Web design is a combination of graphic design (conveying a message using design, text, and images) and the web (how people interact, ux)

You need to understand the fundamentals before the tutorials.

Basic web design software

Software you need

• Image editing
• Vector editing
• Screen editing
• Animation (Bonus)

Adobe Suite

• Photoshop
• Illustrator
• Xd

Alternatives to Photosho

• Pixlr: http://pixlr.com
• Gimp: http://www.gimp.org

Alternatives to Illustrator

• Apache OpenOffice Draw: http://www.openoffice.org/product/dra…
• Inkscape: http://inkscape.org

Alternatives to Adobe Xd

• InVision: http://invisionapp.com
• Figma: http://figma.com
• Sketch: http://sketch.com

An alternative to After Effects

• Principle: http://principleformac.com

What’s the difference between image editing and vector editing?

• When editing images, you are editing pixels (small rectangles that make up the screen). When you make changes, the software remembers the colors of the pixels. In vector, there are no pixels. There are only trajectories that are recalculated. (This explanation still doesn’t make sense. But find a better explanation.)

All photos are in pixels. They are not calculations. An image is simply a record of colors. All images are edited in an image editing software.

Icons are easier to create and edit as vectors.

When you put images and vectors together to design your website, you use screen editing software.

Concepts that repeat themeselve in all softwares

Layers

• An image is made up of different layers, the order of which you can rearrange.
  • Always name your layers. This is best practice in design.

Style

• Maintain consistency with a lot of elements, esp. typography.
• Use a stylesheet.

Brief History of Web Design

Social context + technology of the day = design current state

1894 Art Nouveau

• First time when graphic design was used in a large commercial scale
• Reaction to rigid and academic art
• maximalist art

1959 Swiss Design/International

• Reaction to chaos of world wars
• clean, systematic, and clear design
• rigid and grid
• minimalistic

1992 David Carson Grunge

• Grunge design
• Reaction to rigid Swiss design
• Overlaying text and image
• Never went to design school
• Extreme and innovative
• Readability is not always necessary to communicate; sometimes, messiness communicates your message better

The state of design reacts to social context and constrained by available tech

In web design

1991

• Simple html
• Folders
• Images

1995

• Experiments on using background colors
• People were just exploring the web for creativity
• They didn’t apply graphic design rules

2000s

• People started applying graphic design rules to designing web pages
• Flash became popular, which allowed animation publishing.

2007

• iPhone was introduced and Apple did not support Flash leading to its decay in 2017

2009

• Zune created a flat design to their website in reaction to everyone trying to make cool interfaces
• Cleanliness and minimalism

2010s

• Basic guidelines for good design were popularized
• Mobile responsiveness
• Many tools now
• Accessibility

Take history classes (art history and web design history) to be a better designer.

Intro to Typography

The font must:

• Deliver information (legibility)
• Communicate values (aesthetics)

Two categories

• Serif
• Sans-serif

The differences were caused by the tools used in writing. Serif is older because old tools left unecessary marks. San-serif is newer because more precise tools allow us to write cleaner.

Other categories

• Script - handwriting

If you are communicating something modern, use sans-serif. If you are communicating something more established, use serif.

When designing, be mindful about hierarchies. What should readers notice first, second, third, etc.? By manipulating the width and styles of your fonts, you can design a hierarchical structure.

• Bolder more catchy
• Bigger font more catchy

Manipulating the space between fonts can change the feel of the page.

• Tracking - changes spaces between all letters
• Churning - changes space between two specific letters

Change line height (space between the lines in a paragraph).

• When text is too small, you need more space between the lines so you can read it.
• However, the gap between the lines shouldn’t be too big that you start to notice the gaps that you start to focus on them more than on the text.

Don’t create very long lines.

• This lessens legibility.
• People shouldn’t have to tilt their head just to read your work.
• Tip: Limit each line to at least 10 words.

What fonts should you use?

• There are tens of thousands of fonts.
• If you are a beginner, just start with some classics.

6 fonts to use (by Massimo Vignelli) - not premium fonts

1. Garamond
2. Bodoni
3. Century Expanded
4. Futura
5. Times New Roman
6. Helvetica

Use Google fonts

If you want to explore fonts beyond these 6, google their font alternatives and look for fonts that are similar to them.

What size of font will you use?

• Go to typeface.
• Play around and look for how they look in the website.

Headings

• You don’t need more than 3-4 headings.

Practice. Typography is a crafty skill. You have to manipulate stuff.

Exercise

• Go to a dictionary. Pick a word and its description. Then create a poster out of it. Share to social media. Change fonts and layout everyday.
• Design a daily quote from your favorite author and post it on social media every day.

Using the right image for your web design

3 steps

1. Choose the right style/genre
2. Pick the right image
3. Using it correctly

Styles

• Photography - very realistic
• Illustrations (handmade or vector) - more abstract, can tell more complex story in one visual
• 3D - similar to illustrations; combines real-world rendering (combines photography + illustrations)

Collect and categorize types of visuals that you like

Choosing the right image depends on your subject matter and brand.

For photography, where will you get the images?

1. Create those images yourself or hire someone.
2. Buy images or get it from stock photos.
   1. Shutterstock
   2. Pexels

Develop a fullstack developer mindset (learn as much as you can so you can just do them yourself).

When choosing an image, r where you are going to use it—the context, the text around it.

• Choose a high-quality image.
• The image must have a layout for itself (subject is clear; there is a space to position text).

Collect inspiration. Familiarize yourself with different styles.

• Awwards 4651 Landing Page Design Inspiration - Lapa Ninja

Find images that work with those designs.

Intro to Layout

Hardest skill to master

Layout must be both beautiful and easy to consume.

What makes a good layout?

• Clear, not confusing
• There is a hierarchy. You know what’s first, second, last.
• Interesting, not boring
• Helps user consume content

In any design, there is an element that is big, medium, and small. These contrasts allow for reorganization.

• Decide: Which is big, medium, and small?

Most designs can be broken down in this.

Grids

• Invisible line structures.
• Gives logic.
• Popularized by the book “Grid systems”
• 12 grids is popular because you can divide it by many numbers
• Gutter: space between grids
  • With text, you don’t want too narrow gutters that make text so close
  • With images, make them tighter
• Decide how wide your grid is
  • Most displays now are really wide. We don’t want to use the entire screen because people will have to scan it all.
  • Container: is where the grid is contained. Usually at the beginning. The grid does not get wider than the container

Exercise

• Do a daily practice.
• Do three different layouts.

How to Use Colors in Web Design

Steps

1. Choose a color based on the meaning of it.
2. Use a pallette generator to find complementary colors.
3. Find a way to combine the colors together.

What is the meaning of each color?

Use colors depending on their color

• Green and Blue: Nature
• Red = Love
• Black = Death and mourning (contrast: in East, white)

Meaning of Colors in Color Psychology

When I need to combine it with something, how much will I need of that color?

Create a pallette.

https://color.adobe.com/create/color-wheel

You can also upload your photo and the generator will create the pallettes.

How do you combine the colors together?

60:30:10 rule

• 60% primary color
• 30% secondary color
• 10% tertiary (accent) color

Why Hierarchy is So Important in Web Design

Hierarchy is important in guiding the eye of the visitor.

How to create hieararchy

1. Size
2. Color
3. Position (you will notice this in pricing sales pages)

How do you create hierarchy using size?

How do you create hierarchy using color?

How do you create hierarchy using position?

Ghost button - borderless button

Using Wireframes in Web Design

Wireframes are sketches of the structure of a page.

• How many titles do you need?
• Where do you put the button?
• How many images will you use?

Before you go to your design software, you want to make sure that what you are designing is the right thing.

Doing wireframes helps you focus on

• Structure
• Content

Focus on the most important thing: your message

Steps

1. Hand-drawing in your notebook
   1. Always start with this to keep your mind more open.
2. Convert your drawing into a high fidelity wireframe using software
   1. This step may not be necessary if you are just working for yourself. You can just jump into creating.

Tip: Use real text in your wireframe. Your real copy. Not just lorem ipsum. This will help you really see if your design is working.

UI kits

Platforma: http://platforma.ws

Invision Form: https://www.invisionapp.com/inside-de…

Creating a Good Hero for Your Website

The majority of your visitors will leave in 15 secs.

• They don’t understand where they are.
• This is not for them

Questions

1. What is this?
   1. Who are you?
   2. What is this website I’m visiting?
2. What do you do?
   1. Browse content ala Wiki
   2. What is the purpose of this website?
3. What’s in it for me?
   1. Why would I invest time on your website?

Website Content Structure

Steps

1. Understand the website goals
   1. Every element in the website must help achieve the goal.
   2. There will always be a high level goal and minor goals.
2. Brainstorm all the kinds of content that are going to help us achieve the goals.
3. Organize the content in a way that makes sense (sitemap).

• Use cards.
• Put all brainstormed content in individual cards
• Arrange them

Information architecture

• Your arrangement of information creates a unique experience to the visitor.
• What will be the right structure?
• How will navigating this site actually feel?

UX/UI Best Practices for Web Design

Navigation

Apple

• Uses a main navigation and subnavigation
• Then uses sticky menu to keep you track on where you are

Breadcrumbs is a good practice in complicated websites to remind you of structure

Purpose of navigation

1. To show the visitor their options
2. To show somebody where they are in the website.
   1. This is important particularly because some people will be visiting the site via an internal link.

Buttons

You want your buttons to be clear about what will happen if they click it. This will prevent them from hesitating to click.

You want to teach your visitor what does what. Consistency is the key.

• E.g., if blue text is linkable, all blue text must be linkable
• Peopl are browsing different websites and there are “social” rules like when its in a box, it’s a button or if it’s in blue, it’s a link.
• Do not design your website in a vaccum. It is part of a larger context.
• It’s okay to have multiple calls to action. But you have to create a hierarchy within them.
• You have to make sure that things that are clickable look clickable if you want people to click them.

Be very careful about giving names to pages, buttons, and sections in your website.

• instead of Talahardin, say notes

Contrast

Choose correct colors, especially with text. White on white is difficult.

Use overlays to solve contrast problem when photo background does not contrast enough with the text.

How to Find Web Design Inspiration to Stand Out

Two steps

1. Look at other websites.
   1. You want to see what other people in your niche have already done. You want to see what’s working and what’s not. Screenshot them.
2. Look at designs outside of websites.

You don’t want to do exactly what other people have done.

Website inspirations

Check website inspirations:

• Awwwards
• Lapa Ninja {title}

Look for typography, color, or layout you want to use.

Collect them in your Invision board.

Inspirations outside websites

Films

Books

History

Look for visual ideas embeded in your search terms or space

This assures that you are doing something outside of what has already been done.

Tools to Develop Your Website

Options

1. Code
   1. Code the website (ultimate customization)
2. Abstract
   1. Wix or Squarespace (no coding needed)
   2. not built in designers in mind
   3. tools for dummies (easy)
   4. things have been abstracted
   5. codes have been made into components
   6. lots of templates
   7. constricts your creativity in design
   8. what you get is not what you want to do
3. UI for code
   1. You use an interface to manipulate the code.
   2. You are almost using code but not really
   3. Spectrum
      1. Webflow
         1. It is almost like coding yourself but you don’t have to type the codes.
         2. Steeper learning code.
         3. You don’t have to write code but you need to think like a developer.
      2. Elementor
         1. Wordpress plug-in
         2. Powerful but not as powerful as webflow
      3. Editor X
         1. Built for designers.
         2. Not as powerful as webflow but not as dummy as Wix.

Where will you host it and manage content?

CMS

• Allows you to update content without changing the design of the site.