This document is an introduction to a web design course that teaches students how to make their websites look professionally designed using techniques like proper typography, color selection, image placement, icon usage, layout, and user experience design. It provides tips and best practices in these areas and encourages students to get inspired by studying other successful website designs. The goal is to help students create visually appealing websites that optimize the user experience and conversion rates. The document recommends constant practice and continuing to learn new skills.

1. WELCOME TO THIS COURSE

2. • Make text look professionally designed
• Use the power of colors
• Get and use amazing images, fonts and icons to make
your website shine
• Create a layout using whitespace and visual hierarchy
• Keep yourself inspired to learn more and more

3. WATCH THE LECTURES IN HD

4. ASK ALL YOUR QUESTIONS

5. hello@webdesigncourse.co
@jonasschmedtman
facebook.com/
jonas.schmedtmann

6. Do you have any quesIons? Please ask them in the
course forum, I will be glad to help!
hello@webdesigncourse.co

7. INTRODUCTION TO WEB DESIGN

8. GO DOWNLOAD
THE E-­‐BOOK
NOW

9. THE DESIGNER CREATES THE LOOK AND FEEL.
THE DEVELOPER BUILDS IT.

10. iOS6 iOS7

13. Do you have any ques9ons? Please ask them in the
course forum, I will be glad to help!
hello@webdesigncourse.co

14. BEAUTIFUL TYPOGRAPHY

15. Typography is the art and technique of
arranging type to make wri7en language
readable and beau:ful.
“

16. 1. USE A FONT-­‐SIZE BETWEEN 15 AND 25 PIXELS
GOOD
22px

17. 1. USE A FONT-­‐SIZE BETWEEN 15 AND 25 PIXELS
BAD
30px
BAD
14px

18. 2. USE (REALLY) BIG FONT SIZES FOR HEADLINES
60px
32px

19. 2. USE (REALLY) BIG FONT SIZES FOR HEADLINES
90px

20. 3. USE LINE SPACING BETWEEN 120 AND 150%
GOOD
150%

21. 3. USE LINE SPACING BETWEEN 120 AND 150%
BAD
200%
BAD
100%

22. 4. 45 TO 90 CHARACTERS PER LINE
GOOD
78 chars

23. 4. 45 TO 90 CHARACTERS PER LINE
BAD
141 chars
BAD
36 chars

24. 5. USE GOOD FONTS
• Tradi:onal purposes
• Storytelling
• Long reading
• More neutral
• Clean
• Simple
• Modern websites

25. 5. USE GOOD FONTS

26. 5. USE GOOD FONTS
Open Sans
Lato
Raleway
Monsterrat
PT Sans

27. 5. USE GOOD FONTS

28. 5. USE GOOD FONTS
Cardo
Merriweather
PT Serif

29. 5. USE GOOD FONTS
HOW TO CHOOSE A FONT?
1. Chose a font which reflects the look and feel you
want for your website
2. Decide: sans-­‐serif or serif typeface?
3. Use a good font
4. Use only that one typeface

30. Do you have any ques;ons? Please ask them in the
course forum, I will be glad to help!
hello@webdesigncourse.co

31. USING COLORS LIKE A PRO

33. 1. USE ONLY ONE BASE COLOR

34. 1. USE ONLY ONE BASE COLOR
Base color

35. 2. USE A TOOL IF YOU WANT TO USE MORE COLORS

36. 2. USE A TOOL IF YOU WANT TO USE MORE COLORS

37. 3. USE COLOR TO DRAW ATTENTION

38. 4. NEVER USE BLACK IN YOUR DESIGN

39. 5. CHOOSE COLORS WISELY

40. Do you have any ques:ons? Please ask them in the
course forum, I will be glad to help!
hello@webdesigncourse.co

41. WORKING WITH IMAGES

42. 1. PUT TEXT DIRECTLY ON THE IMAGE

43. 2. OVERLAY THE IMAGE

44. 2. OVERLAY THE IMAGE

45. 2. OVERLAY THE IMAGE

46. 2. OVERLAY THE IMAGE

47. 3. PUT YOUR TEXT IN A BOX

48. 3. PUT YOUR TEXT IN A BOX

49. 4. BLUR THE IMAGE

50. 4. BLUR THE IMAGE

51. 5. THE FLOOR FADE
WITH FLOOR FADE

52. 5. THE FLOOR FADE
WITHOUT FLOOR FADE

53. GET YOUR
IMAGES HERE

54. Do you have any ques:ons? Please ask them in the
course forum, I will be glad to help!
hello@webdesigncourse.co

55. WORKING WITH ICONS

57. 1. USE ICONS TO LIST FEATURES/STEPS

58. 1. USE ICONS TO LIST FEATURES/STEPS

59. 2. USE ICONS FOR ACTIONS AND LINKS
1. Icons should be recognizable
2. Label your icons

60. 3. ICONS SHOULD NOT TAKE A CENTER STAGE

61. Sta'c image 300% Vector icon font 300%
4. USE ICON FONTS WHENEVER POSSIBLE

62. GET YOUR
ICONS HERE

63. Do you have any ques8ons? Please ask them in the
course forum, I will be glad to help!
hello@webdesigncourse.co

64. SPACING AND LAYOUT

65. With whitespace

66. Without whitespace

67. 1. USE WHITESPACE
• Put whitespace between your elements
• Put whitespace between your groups of elements
• Put whitespace between you website’s secCons
• But don’t exaggerate

68. 2. DEFINE HIERARCHY
Whitespace describes invisible
rela1onships between the
elements of your website

69. 2. DEFINE HIERARCHY
• Define where you want your audience to look first
• Establish a flow that corresponds to your content’s message
• Use whitespace to build that flow

70. Do you have any ques9ons? Please ask them in the
course forum, I will be glad to help!
hello@webdesigncourse.co

71. INTRODUCTION TO USER EXPERIENCE

72. USER INTERFACE IS THE
PRESENTATION OF A PRODUCT,
HOW IT LOOKS AND FEELS

73. USER EXPERIENCE IS THE OVERALL
EXPERIENCE THE USER HAS WITH A
PRODUCT

74. — Steve Jobs
It’s not just what it looks like and feels
like. Design is how it works.
“

76. USER’S
GOALS
BUSINESS’
GOALS

77. Do you have any ques8ons? Please ask them in the
course forum, I will be glad to help!
hello@webdesigncourse.co

78. GETTING INSPIRED: THE SECRET
INGREDIENT FOR STUNNING WEB DESIGN!

79. USE OTHER WEBSITES AS INSPIRATION
TO SEE WHAT OTHER LEADING
DESIGNERS ARE DOING RIGHT

80. • Collect designs that you like
• Try to understand everything about them
• Why do they look good?
• What do these sites have in common?
• How were they built in HTML and CSS?

81. STEAL LIKE AN ARTIST

82. GET YOURSELF
INSPIRED HERE

83. Do you have any ques>ons? Please ask them in the
course forum, I will be glad to help!
hello@webdesigncourse.co

84. SUPER EFFECTIVE WAYS TO IMPROVE
YOUR WEBSITE’S CONVERSION

85. 1. BUILD TRUST WITH YOUR FUTURE CUSTOMER

86. 2. REPEAT YOUR PRIMARY ACTION

87. 3. GRAB YOUR USER’S ATTENTION

88. 4. TELL YOUR USER THE BENEFIT

89. 5. DON’T ASK FOR TOO MUCH INFORMATION

90. 6. USE SOCIAL PROOF

91. 7. USE URGENCY

92. 8. USE SCARCITY

93. Do you have any ques?ons? Please ask them in the
course forum, I will be glad to help!
hello@webdesigncourse.co

94. WHERE TO GO FROM HERE?

96. PRACTICE, PRACTICE, PRACTICE

97. NEVER. STOP. LEARNING.

99. Do you have any ques7ons? Please ask them in the
course forum, I will be glad to help!
hello@webdesigncourse.co