Top Web Design Tricks

-Use font-size between 15 and 25 pixels

-Use big font sizes for headlines

-You may want to decrease font weight with extremely big font-size to make it light weight.

-Use line space between 120 to 150%

-45 to 90 characters per line

-Use good fonts (Google web fonts)

-Here heading is in Serif and rest of text is in Sans Serif.

-Use only one base color

Flat UI Colors

Choose a color pallete for your design like this

  • Red is a great color to use when power, passion, strength and excitement want to be transmitted. Brighter tones are more energetic and darker shades are more powerful and elegant.
  • Orange draws attention without being as overpowering as red. It means cheerfulness and creativity. Orange can be associated with friendliness, confidence, and courage.
  • Yellow is energetic and gives the feeling of happiness and liveliness. Also, it associates with curiosity, intelligence, brightness, etc.
  • Green is the color of harmony, nature, life and health. Also, it is often associated with money. In design, green can have a balancing and harmonizing effect.
  • Blue means patience, peace, trustworthiness, and stability. It is one of the most beloved colors, especially by men. It is associated with professionalism, trust and honor. That’s actually why the biggest social networks use blue.
  • Purple is traditionally associated with power, nobility and wealth. In your design, purple can give a sense of wisdom, royalty, nobility, luxury, and mystery.
  • Pink expresses romance, passivity, care, peace, affection, etc.
  • Brown is the color of relaxation and confidence. Brown means earthiness, nature, durability, comfort, and reliability.

Color gradient, Image overlay with colors

Floor Fade: image turns black towards bottom, it increases readability

Use CSS To Work With Images

Section 2, Lecture 10

To achieve the text-on-image effects I showed you before, you can use CSS for your websites. Here is example CSS code for some of the effects. Please change it according to your needs.

Overlay the image

.darken {

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(YOUR IMAGE HERE);

}

Example: http://jsfiddle.net/drpak8vy/1/

Put text in a box

.text-box {

background-color: rgba(0, 0, 0, 0.5);

color: #fff;

display: inline;

padding: 10px;

}

Example: http://jsfiddle.net/qg83m36p/

Floor fade

.floor-fade {

background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) ), url(YOUR IMAGE HERE);

}

Example: http://jsfiddle.net/gRzPF/409/

Let’s quickly summarize the main content of the course:

  • Most of your content will be text, so beautiful typography is a key element to a good looking website.
  • Images are getting more and more important in webdesign, so choosing great images and putting text on them is an essential part of your work.
  • Icons are also a good way of setting a friendly tone for your website, but use them carefully.
  • The adequate use of whitespace makes a website look professionally designed, so use it a lot, but in the correct way.
  • Build a layout by defining the visual hierarchy of your content. Whitespace is also important for this.
  • Your website should be designed in a way that ensures that both the user and the owner of the website achieve their goals. This is the user experience.
  • It is very important that you get inspired by studying well-designed websites from other designers.

The Ultimate Cheatsheet: All Guidelines In One Place

Section 4, Lecture 17

This cheat sheet is intended to serve as a quick reference for you.

It contains all the guidelines I showed you in this course.

It is very important that you have all of the guidelines in mind at the same time when you’re making your designs.

Beautiful Typography

1. Use a font-size between 15 and 25 pixels for body text

2. Use (really) big font sizes for headlines

3. Use a line spacing between 120 and 150% of the font size

4. 45 to 90 characters per line

5. Use good fonts

6. Chose a font which reflects the look and feel you want for your website

7. Use only one font

Using Colors Like a Pro

1. Use only one base color

2. Use a tool if you want to use more colors

3. Use color to draw attention

4. Never use black in your design

5. Choose colors wisely

Working with Images

1. Put text directly on the image

2. Overlay the image

3. Put your text in a box

4. Blur the image

5. The floor fade

Working with icons

1. Use icons to list features/steps

2. Use icons for actions and links

3. Icons should be recognizable

4. Label your icons

5. Icons should not take a center stage

6. Use icon fonts whenever possible

Spacing and layout

1. Put whitespace between your elements

2. Put whitespace between your groups of elements

3. Put whitespace between you website’s sections

4. Define where you want your audience to look first

5. Establish a flow that corresponds to your content’s message

6. Use whitespace to build that flow

Improve your website’s conversion

1. Build trust with your future customer

2. Repeat your primary action

3. Grab your user’s attention

4. Tell your user the benefit

5. Don’t ask for too much information

6. Use social proof

7. Use urgency

8. Use scarcity

CSS Grid

If we need to have different row and column gap then we use them separately as commneted code above. But if we need to keep them same then we can use Grid-gap.

We can use repeat to tell the number of rows or columsn

Grid-template-rows: repeat(10, 150px) it will create 10 rows each with 150px height.

Now the third column is 300px and first are 150px.

Lets see how we can update it to occupy full available space

For this puropse we need to use Fractional unit.

Fractional unit represents the fraction of available space.

Grid-template-column : 1fr 1fr 1fr;

Grid-template-column : 50% 1fr 1fr;

Grid-template-column : repeat(3, 1fr);

Here in the image below we are moving “1:Orange” div to second row and second column

Here we need to specify start and end.

Orange previous was at first place. Itst starting was 1 and ending was 2 so can be written as

1/2.

Note: 1 and 2 are line numbers not column numbers. So here we have a line before first “1:Orange” div and after it as well. Line before div is line 1 and and line after it is 2.

Start and end both can be replaced with 2 / 3 as highlighted in orange above.