You are hacking on a side project, but you don’t have a designer to help you get started? You are running into situations where you have to deal with design decisions, but don’t know how? This presentation provides well-founded tricks to make your website look more professional and feel more user-friendly. Updated version from Evolving Web webinar (September 28t 2018)

1. 10
Design Tips
for non-designers

2. Web and UI/UX design for 10 years
Designer at Evolving Web in Montreal
Annika Oeser

3. Source: developer.mozilla.org

4. What is good web design?
Easy to use & read
Pleasant visuals
High conversion rates

5. What makes visual design good?

6. What makes visual design good?

7. What makes visual design good?

8. What is good web design?
Easy to use & read
Pleasant visuals
High conversion rates

9. What is good web design?
Consider your target audienceEasy to use & read
Pleasant visuals
High conversion rates

10. What is good web design?
Consider your target audience
Consider the goal of your website
Easy to use & read
Pleasant visuals
High conversion rates

11. What is good web design?
Consider your target audience
Communicate a message
Consider the goal of your website
Easy to use & read
Pleasant visuals
High conversion rates

12. Stick to the most important
design principles
And try out some of the following
tricks

13. Design principles
Readability
Grouping & hierarchy
Contrast & colour
Minimalism & balance
Clear & easy interaction

14. 1. Make your copy highly
readable
#Readability

15. Web Typography
Web design encompasses many different skills and disciplines in the production and maintenance of websites. The
different areas of web design include web graphic design; interface design; authoring, including standardized code
and proprietary software; user experience design; and search engine optimization. Often many individuals will work in
teams covering different aspects of the design process, although some designers will cover them all. The term web
design is normally used to describe the design process relating to the front-end (client side) design of a website
including writing mark up. Web design partially overlaps web engineering in the broader scope of web development.
Web designers are expected to have an awareness of usability and if their role involves creating mark up then they are
also expected to be up to date with web accessibility guidelines.
In 1989, whilst working at CERN Tim Berners-Lee proposed to create a global hypertext project, which later became
known as the World Wide Web. During 1991 to 1993 the World Wide Web was born. Text-only pages could be viewed
using a simple line-mode browser.[2] In 1993 Marc Andreessen and Eric Bina, created the Mosaic browser. At the time
there were multiple browsers, however the majority of them were Unix-based and naturally text heavy. There had been
no integrated approach to graphic design elements such as images or sounds. The Mosaic browser broke this mould.
[3] The W3C was created in October 1994 to "lead the World Wide Web to its full potential by developing common
protocols that promote its evolution and ensure its interoperability."[4] This discouraged any one company from
monopolizing a propriety browser and programming language, which could have altered the effect of the World Wide
Web as a whole. The W3C continues to set standards, which can today be seen with JavaScript. In 1994 Andreessen
formed Communications Corp. that later became known as Netscape Communications, the Netscape 0.9 browser.
Netscape created its own HTML tags without regard to the traditional standards process. For example, Netscape 1.1
included tags for changing background colours and formatting text with tables on web pages. Throughout 1996 to 1999
the browser wars began, as Microsoft and Netscape fought for ultimate browser dominance. During this time there
were many new technologies in the field, notably Cascading Style Sheets, JavaScript, and Dynamic HTML. On the
whole, the browser competition did lead to many positive creations and helped web design evolve at a rapid pace.[5]
1. Make your copy highly readable

16. Web design encompasses many different skills and disciplines in the production and maintenance of websites. The
different areas of web design include web graphic design; interface design; authoring, including standardized
code and proprietary software; user experience design; and search engine optimization. Often many individuals
will work in teams covering different aspects of the design process, although some designers will cover them
all. The term web design is normally used to describe the design process relating to the front-end (client side)
design of a website including writing mark up. Web design partially overlaps web engineering in the broader scope
of web development. Web designers are expected to have an awareness of usability and if their role involves
creating mark up then they are also expected to be up to date with web accessibility guidelines.
In 1989, whilst working at CERN Tim Berners-Lee proposed to create a global hypertext project, which later
became known as the World Wide Web. During 1991 to 1993 the World Wide Web was born. Text-only pages
could be viewed using a simple line-mode browser. In 1993 Marc Andreessen and Eric Bina, created the Mosaic
browser. At the time there were multiple browsers, however the majority of them were Unix-based and naturally
text heavy. There had been no integrated approach to graphic design elements such as images or sounds. The
Mosaic browser broke this mould. The W3C was created in October 1994 to "lead the World Wide Web to its full
potential by developing common protocols that promote its evolution and ensure its interoperability." This
discouraged any one company from monopolizing a propriety browser and programming language, which could have
altered the effect of the World Wide Web as a whole. The W3C continues to set standards, which can today be
seen with JavaScript. In 1994 Andreessen formed Communications Corp. that later became known as Netscape
Communications, the Netscape 0.9 browser. Netscape created its own HTML tags without regard to the
traditional standards process. For example, Netscape 1.1 included tags for changing background colours and
formatting text with tables on web pages. Throughout 1996 to 1999 the browser wars began,
as Microsoft and Netscape fought for ultimate browser dominance. During this time there were many new
technologies in the field, notably Cascading Style Sheets, JavaScript, and Dynamic HTML. On the whole, the
browser competition did lead to many positive creations and helped web design evolve at a rapid pace.
Web Typography
😲
1. Make your copy highly readable

17. Web Typography
Web design encompasses many different skills and disciplines in the production and maintenance of websites. The
different areas of web design include web graphic design; interface design; authoring, including standardized code
and proprietary software; user experience design; and search engine optimization. Often many individuals will work in
teams covering different aspects of the design process, although some designers will cover them all. The term web
design is normally used to describe the design process relating to the front-end (client side) design of a website
including writing mark up. Web design partially overlaps web engineering in the broader scope of web development.
Web designers are expected to have an awareness of usability and if their role involves creating mark up then they are
also expected to be up to date with web accessibility guidelines.
In 1989, whilst working at CERN Tim Berners-Lee proposed to create a global hypertext project, which later became
known as the World Wide Web. During 1991 to 1993 the World Wide Web was born. Text-only pages could be viewed
using a simple line-mode browser.[2] In 1993 Marc Andreessen and Eric Bina, created the Mosaic browser. At the time
there were multiple browsers, however the majority of them were Unix-based and naturally text heavy. There had been
no integrated approach to graphic design elements such as images or sounds. The Mosaic browser broke this mould.
[3] The W3C was created in October 1994 to "lead the World Wide Web to its full potential by developing common
protocols that promote its evolution and ensure its interoperability."[4] This discouraged any one company from
monopolizing a propriety browser and programming language, which could have altered the effect of the World Wide
Web as a whole. The W3C continues to set standards, which can today be seen with JavaScript. In 1994 Andreessen
formed Communications Corp. that later became known as Netscape Communications, the Netscape 0.9 browser.
Netscape created its own HTML tags without regard to the traditional standards process. For example, Netscape 1.1
included tags for changing background colours and formatting text with tables on web pages. Throughout 1996 to 1999
the browser wars began, as Microsoft and Netscape fought for ultimate browser dominance. During this time there
were many new technologies in the field, notably Cascading Style Sheets, JavaScript, and Dynamic HTML. On the
whole, the browser competition did lead to many positive creations and helped web design evolve at a rapid pace.[5]
1. Make your copy highly readable

18. 1. Make your copy highly readable
Web design encompasses many different skills and disciplines in the production
and maintenance of websites. The different areas of web design include web
graphic design; interface design; authoring, including standardized code
and proprietary software; user experience design; and search engine
optimization. Often many individuals will work in teams covering different
aspects of the design process, although some designers will cover them all. The
term web design is normally used to describe the design process relating to the
front-end (client side) design of a website including writing mark up. Web design
partially overlaps web engineering in the broader scope of web development.
Web designers are expected to have an awareness of usability and if their role
involves creating mark up then they are also expected to be up to date with web
accessibility guidelines.
In 1989, whilst working at CERN Tim Berners-Lee proposed to create a global
hypertext project, which later became known as the World Wide Web. During
Web Typography

19. 1. Make your copy highly readable
Web design encompasses many different skills and disciplines in the production
and maintenance of websites. The different areas of web design include web
graphic design; interface design; authoring, including standardized code
and proprietary software; user experience design; and search engine
optimization. Often many individuals will work in teams covering different
aspects of the design process, although some designers will cover them all. The
term web design is normally used to describe the design process relating to the
front-end (client side) design of a website including writing mark up. Web design
partially overlaps web engineering in the broader scope of web development.
Web designers are expected to have an awareness of usability and if their role
involves creating mark up then they are also expected to be up to date with web
accessibility guidelines.
In 1989, whilst working at CERN Tim Berners-Lee proposed to create a global
hypertext project, which later became known as the World Wide Web. During
Web Typography

20. 1. Make your copy highly readable
Web design encompasses many different skills and disciplines in the production
and maintenance of websites. The different areas of web design include web
graphic design; interface design; authoring, including standardized code
and proprietary software; user experience design; and search engine
optimization. Often many individuals will work in teams covering different
aspects of the design process, although some designers will cover them all. The
term web design is normally used to describe the design process relating to the
front-end (client side) design of a website including writing mark up. Web design
partially overlaps web engineering in the broader scope of web development.
Web designers are expected to have an awareness of usability and if their role
involves creating mark up then they are also expected to be up to date with web
accessibility guidelines.
In 1989, whilst working at CERN Tim Berners-Lee proposed to create a global
hypertext project, which later became known as the World Wide Web. During
Web Typography
Larger title
for clear
hierarchy

21. 1. Make your copy highly readable
Web design encompasses many different skills and disciplines in the production
and maintenance of websites. The different areas of web design include web
graphic design; interface design; authoring, including standardized code
and proprietary software; user experience design; and search engine
optimization. Often many individuals will work in teams covering different
aspects of the design process, although some designers will cover them all. The
term web design is normally used to describe the design process relating to the
front-end (client side) design of a website including writing mark up. Web design
partially overlaps web engineering in the broader scope of web development.
Web designers are expected to have an awareness of usability and if their role
involves creating mark up then they are also expected to be up to date with web
accessibility guidelines.
In 1989, whilst working at CERN Tim Berners-Lee proposed to create a global
hypertext project, which later became known as the World Wide Web. During
Web Typography
Larger title
for clear
hierarchy
Paragraph spacing}

22. 1. Make your copy highly readable
Web design encompasses many different skills and disciplines in the production
and maintenance of websites. The different areas of web design include web
graphic design; interface design; authoring, including standardized code
and proprietary software; user experience design; and search engine
optimization. Often many individuals will work in teams covering different
aspects of the design process, although some designers will cover them all. The
term web design is normally used to describe the design process relating to the
front-end (client side) design of a website including writing mark up. Web design
partially overlaps web engineering in the broader scope of web development.
Web designers are expected to have an awareness of usability and if their role
involves creating mark up then they are also expected to be up to date with web
accessibility guidelines.
In 1989, whilst working at CERN Tim Berners-Lee proposed to create a global
hypertext project, which later became known as the World Wide Web. During
Web Typography
Larger title
for clear
hierarchy
16 px min. font
size for copy
Paragraph spacing}

23. 1. Make your copy highly readable
Web design encompasses many different skills and disciplines in the production
and maintenance of websites. The different areas of web design include web
graphic design; interface design; authoring, including standardized code
and proprietary software; user experience design; and search engine
optimization. Often many individuals will work in teams covering different
aspects of the design process, although some designers will cover them all. The
term web design is normally used to describe the design process relating to the
front-end (client side) design of a website including writing mark up. Web design
partially overlaps web engineering in the broader scope of web development.
Web designers are expected to have an awareness of usability and if their role
involves creating mark up then they are also expected to be up to date with web
accessibility guidelines.
In 1989, whilst working at CERN Tim Berners-Lee proposed to create a global
hypertext project, which later became known as the World Wide Web. During
Web Typography
Larger title
for clear
hierarchy
16 px min. font
size for copy
Generous line-height for
copy text ≈ factor 1.5
E.g. font-size: 16px
line-height: 16x1.5=24
}
Paragraph spacing}

24. 1. Make your copy highly readable
Web design encompasses many different skills and disciplines in the production
and maintenance of websites. The different areas of web design include web
graphic design; interface design; authoring, including standardized code
and proprietary software; user experience design; and search engine
optimization. Often many individuals will work in teams covering different
aspects of the design process, although some designers will cover them all. The
term web design is normally used to describe the design process relating to the
front-end (client side) design of a website including writing mark up. Web design
partially overlaps web engineering in the broader scope of web development.
Web designers are expected to have an awareness of usability and if their role
involves creating mark up then they are also expected to be up to date with web
accessibility guidelines.
In 1989, whilst working at CERN Tim Berners-Lee proposed to create a global
hypertext project, which later became known as the World Wide Web. During
Web Typography
Larger title
for clear
hierarchy
16 px min. font
size for copy
Generous line-height for
copy text ≈ factor 1.5
E.g. font-size: 16px
line-height: 16x1.5=24
}
Shorter line-length (45–90 characters )
Paragraph spacing}

25. 1. Make your copy highly readable

26. 1. Make your copy highly readable
IF I HAVE A VERY IMPORTANT HEADING, I
HAVE TO MAKE IT ALL UPPERCASE, RIGHT?
Web design encompasses many different skills and disciplines in the production
and maintenance of websites. The different areas of web design include web
graphic design; interface design; authoring, including standardized code
and proprietary software; user experience design; and search engine
optimization. Often many individuals will work in teams covering different
aspects of the design process, although some designers will cover them all. The
term web design is normally used to describe the design process relating to the
front-end (client side) design of a website including writing mark up. Web design
partially overlaps web engineering in the broader scope of web development.
Web designers are expected to have an awareness of usability and if their role
involves creating mark up then they are also expected to be up to date with web
accessibility guidelines.

27. 1. Make your copy highly readable
If I have a very important heading, I have to
make it all uppercase, right?
Web design encompasses many different skills and disciplines in the production
and maintenance of websites. The different areas of web design include web
graphic design; interface design; authoring, including standardized code
and proprietary software; user experience design; and search engine
optimization. Often many individuals will work in teams covering different
aspects of the design process, although some designers will cover them all. The
term web design is normally used to describe the design process relating to the
front-end (client side) design of a website including writing mark up. Web design
partially overlaps web engineering in the broader scope of web development.
Web designers are expected to have an awareness of usability and if their role
involves creating mark up then they are also expected to be up to date with web
accessibility guidelines.

28. 1. Make your copy highly readable
Web design encompasses many different skills and disciplines in the production
and maintenance of websites. The different areas of web design include web
graphic design; interface design; authoring, including standardized code
and proprietary software; user experience design; and search engine
optimization. Often many individuals will work in teams covering different
aspects of the design process, although some designers will cover them all. The
term web design is normally used to describe the design process relating to the
front-end (client side) design of a website including writing mark up. Web design
partially overlaps web engineering in the broader scope of web development.
Web designers are expected to have an awareness of usability and if their role
involves creating mark up then they are also expected to be up to date with web
Long titles in uppercase are hard to read,
especially if longer than one line
MAIN MESSAGE

29. 1. Make your copy highly readable
MAIN MESSAGE
Letter-spacing (for uppercase only!)
MAIN MESSAGE
No Letter-spacing

30. 2. Choose & mix typefaces
carefully
#Typography

31. 2. Choose & mix typefaces carefully
Sans serif Serif
SerifSans Serif

32. 2. Choose & mix typefaces carefully
Serif title
Sans-serif copy text. Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Sans serif title
Serif copy text. Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Sans serif title
Sans-serif copy text. Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
👍 😍 🤓

33. 2. Choose & mix typefaces carefully
Fjalla One – Sans serif 1
Futura – Sans-serif 2. Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla
pariatur.

34. 2. Choose & mix typefaces carefully
Serif title
Sans-serif copy text. Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Sans serif title
Serif copy text. Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Sans serif title
Sans-serif copy text. Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
👍 😍 🤓

35. 2. Choose & mix typefaces carefully
Source: awwwards.com

36. 3. Try monochromatic colour
palettes
#Colours

37. 3. Try monochromatic colour palettes
Safest way to create harmonious colour
schemes
Source: Hannah Dixon

38. 3. Try monochromatic colour palettes
Go to color.adobe.com
Choose “monochromatic”
Turn the wheel or enter colour codes to start

39. 4. Use colours with good
contrast
#Colours

40. 4. Use colours with good contrast
Colour contrast hell
EMAIL ADDRESS
johndoe@colorlover
PASSWORD
***************
Contrast is the difference in luminance or colour that makes an
object (or its representation in an image or display)
distinguishable. In visual perception of the real world, contrast is
determined by the difference in the color and brightness of the
object and other objects within the same field of view.
Please Enter a valid email address!
Hint #1: Don’t use red on green.

41. 4. Use colours with good contrast
^
Contrast is the difference in luminance or colour that makes an
object (or its representation in an image or display)
distinguishable. In visual perception of the real world, contrast is
determined by the difference in the color and brightness of the
object and other objects within the same field of view.
Please Enter a valid email address!
Colour contrast
EMAIL ADDRESS
johndoe@colorlover
PASSWORD
***************
Aim for a contrast ratio of at least 4.5:1 for normal
text and 3:1 for large text.

42. ^
Contrast is the difference in luminance or colour that makes an
object (or its representation in an image or display)
distinguishable. In visual perception of the real world, contrast is
determined by the difference in the color and brightness of the
object and other objects within the same field of view.
Please Enter a valid email address!
Colour contrast
EMAIL ADDRESS
johndoe@colorlover
PASSWORD
***************
4. Use colours with good contrast
Use your chrome dev tools to check

43. 5. Don’t use grey text on
coloured backgrounds
#Colours

44. 5. Don’t use grey text on coloured backgrounds
rgba (190,190,190,1) rgba (255,255,255,0.6)
rgba (167,241,241,1)
hsl (180,72,80)
OK
background color:
hsl (180,72,20)

45. 6. Not every button needs a
background colour
#Minimalism

46. 6. Not every button needs a background colour
CTA hierarchy
Source: refactoringui.com

47. 7. Use colour and weight
instead of size to create
hierarchy
#Minimalism

48. Book now
7. Use colour and weight instead of size to create hierarchy
Explore popular tourist destinations as well as
hidden local favourites.
Montreal Walking Tour
$17per person*
42 reviews
*Prices may vary depending on selected date.
Explore popular tourist destinations as well as
hidden local favourites.
Montreal Walking Tour
$17 per person*
42 reviews
*Prices may vary depending on selected date.
BOOK NOW
Bolder not
bigger
Lighter not
smaller

49. 8. Try fewer borders in your
interface
#Minimalism

50. 8. Try fewer borders in your interface
Source: refactoringui.com

51. 8. Try fewer borders – add extra spacing instead
Source: refactoringui.com

52. 9. Try bigger click
areas instead of tiny ones
#Clear interaction

53. ^
Sign up today
EMAIL ADDRESS
johndoe@colorlover.com
PASSWORD
***************
9. Try bigger click areas instead of
Sign up
I agree to the terms of service and privacy policy

54. ^
Sign up today
EMAIL ADDRESS
johndoe@colorlover.com
PASSWORD
***************
9. Try bigger click areas instead of tiny ones
Sign up for free
I agree to the terms of service and privacy policy

55. 10. Don’t blow up icons that
are meant to be small
#Minimalism

56. 10. Don’t blow up icons that are meant to be small
Intended Icon Size (20px) Icon Scaled Up (100px) Illustration Intended for
Large Size (100px)

57. 10. Don’t blow up icons that are meant to be small
Source: https://refactoringui.com/

58. Thank you!
Any questions?
@AnnikaOe
annikaoeser.design
evolvingweb.ca

59. Learn more! Typography:
www.canva.com/learn/typography-terms
webtypography.net/toc/