Download as PDF, PPTX
More Related Content
Similar to JONAS' RESOURCES FOR BUILDING BEAUTIFUL WEBSITES WITH HTML, CSS AND JAVASCRIPT
JONAS' RESOURCES FOR BUILDING BEAUTIFUL WEBSITES WITH HTML, CSS AND JAVASCRIPT
- 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.
- 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.
- 13. Do you have any ques9ons? Please ask them in the course forum, I will be glad to help! hello@webdesigncourse.co
- 14.
- 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.
- 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.
- 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.
- 65.
- 66.
- 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.
- 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.
- 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.
- 92.
- 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.
- 97.
- 99. Do you have any ques7ons? Please ask them in the course forum, I will be glad to help! hello@webdesigncourse.co