Visual hierarchy & spacing in webdesign

Gil Huybrecht, Ui & UX designer, Branding

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (1h 10m)
    • 1. Intro

      1:08
    • 2. Why is visual hierarchy important?

      1:18
    • 3. Different ways of visual contrast

      2:19
    • 4. My grouping principle

      2:58
    • 5. Whitespace and balance

      2:10
    • 6. Exercise: Briefing/Subject

      0:53
    • 7. Exercise: Wireframes

      4:13
    • 8. Exercise: Making the design

      50:00
    • 9. Class project

      0:57
    • 10. Round up

      0:46
    • 11. Bonus lesson: Making a dribbble shot

      3:19
71 students are watching this class

Project Description

For the class project i want you guys to do the same thing I did. Search for something you are interested in and use that as your subject. It could be a famous person, a soccer team, an athlete, a hobby, a game, it could be about anything really.

Use the same dimensions as I did to come up with a similar kind of design. Make your wireframes first and be sure to share them too! Think about what info you’re gonna work with, think about what could be important for the user. I used a featured product as something that could be important to the user.

For example if you’re working with an athlete you can work with the age and nationality or something like that. Then think about how you can make that information pop out.

Post your project here in the class and i’ll make sure to check them all out and give you guys some feedback.

I've attached the source file of the exercise I did, so you guys can check that out if you want. To start you can make your own new document or use the one i've attached here.

I’m looking forward to what you guys are gonna come up with. You guys can post anything you like. Your wireframes, some work in progress or a finished piece. And remember guys, have fun with it!

Student Projects

project card
Kjell Ruben
2 comments
project card
Kasia Koleczka
2 comments
project card
4 comments
project card
Ann Chichi
4 comments
project card
Michelle Li
2 comments
project card
Maksym Bardus
project card
Nina Alice
3 comments
project card
4 comments
project card
2 comments
project card
Ahmed Tareq
2 comments
project card
1 comment
project card
Gustavo Herrero
2 comments
project card
1 comment
project card
Alvaro Alvarez
1 comment