Vivian Dimitriadi - Designer for a day

Designers and developers seem to be seen as individuals from another planet. Entities with a totally different mindset but with a common goal: to collaborate harmoniously in order to create a successful digital project that will reflect the philosophy and values of a brand!
What happens though when a client reaches out to a developer for the whole thing, expecting both a creative result and an efficiently developed website? This is where we step in, to get through those 12 steps that will unleash your creative potential of both skill sets and become a designer for a day. Come learn how to think as a designer and own a project from the first client meeting up to the final delivery.

Transcript

1. WORDCAMP ATHENS, MEGARON DEC. 9-10, 2017
   Designer for a day
   IN 11 STEPS
   

   View Slide

2. Hi! I’m Vivian :)
   #DESIGNER_FOR_A_DAY
   

   View Slide

3. View Slide

4. Let’s talk about...
   #DESIGNER_FOR_A_DAY
   

   View Slide

5. DESIGNERS
   LIVE HERE
   DEVELOPERS
   LIVE HERE
   

   View Slide

6. ?!#$*!
   

   View Slide

7. Be a designer in 11 steps
   

   View Slide

8. Understand the client
   & ask for a brief
   #DESIGNER_FOR_A_DAY
   1
   

   View Slide

9. UNDERSTAND THE CLIENT & ASK FOR A BRIEF
   1
   What kind or project is it?
   

   View Slide

10. UNDERSTAND THE CLIENT & ASK FOR A BRIEF
    1
    e-shop blog
    corporate
    

    View Slide

11. UNDERSTAND THE CLIENT & ASK FOR A BRIEF
    1
    What is the brief?
    

    View Slide

12. UNDERSTAND THE CLIENT & ASK FOR A BRIEF
    1
    Type of product / service
    Wine production
    Values
    High quality but with a philosophical vision
    High inspiration
    Exotic Cycladic character
    A website that highlights the scarcity of products, surprising and challenging the visitor with
    imagery instead of words. This is not a typical corporate website, but rather something
    different and experimental. It doesn’t appeal to a mass audience, but to the few chosen who
    want to be initiated into the world of Toinos.
    Main goal
    

    View Slide

13. Websites that you like / or don’t
    www.chateau-margaux.com
    www.hellomonday.com
    Weaknesses
    There is no branding
    Technical specs
    Responsive
    Languages: Greek, English
    Strengths
    Unique terroir
    Differentiated
    High quality
    T-OINOS CASE STUDY
    

    View Slide

14. My Visual Brief
    MYVISUALBRIEF.COM
    

    View Slide

15. Create moodboard
    and prototypes
    #DESIGNER_FOR_A_DAY
    2
    

    View Slide

16. Awwwards
    AWWWARDS.COM
    

    View Slide

17. Designspiration
    DESIGNSPIRATION.NET
    Site Inspire
    WWW.SITEINSPIRE.COM
    Mindsparkle Mag
    MINDSPARKLEMAG.COM
    

    View Slide

18. CREATE MOODBOARD & PROTOTYPES
    2
    How to make a moodboard?
    

    View Slide

19. T-OINOS CASE STUDY
    

    View Slide

20. Create the basic
    structure
    #DESIGNER_FOR_A_DAY
    3
    

    View Slide

21. CREATE THE BASIC STRUCTURE
    3
    How to build a sitemap?
    

    View Slide

22. View Slide

23. Writemaps
    WRITEMAPS.COM
    

    View Slide

24. CREATE THE BASIC STRUCTURE
    3
    Create your wireframes
    

    View Slide

25. T-OINOS CASE STUDY
    

    View Slide

26. Mockflow
    MOCKFLOW.COM
    

    View Slide

27. Find the concept
    #DESIGNER_FOR_A_DAY
    4
    

    View Slide

28. FIND A CONCEPT
    4
    What is a concept?
    

    View Slide

29. ?!#$*!
    

    View Slide

30. 1 2 3
    T-OINOS CASE STUDY
    wine genesis atmosphere
    

    View Slide

31. Choose fonts
    #DESIGNER_FOR_A_DAY
    5
    

    View Slide

32. CHOOSE FONTS
    5
    How to pair fonts?
    

    View Slide

33. Font Pair
    FONTPAIR.CO
    Fonts Great Simple
    FONTS.GREATSIMPLE.IO
    Typ.io
    TYP.IO
    Google Fonts
    FONTS.GOOGLE.COM
    

    View Slide

34. Dafont
    DAFONT.COM
    Font Spring
    WWW.FONTSPRING.COM
    Myfonts
    MYFONTS.COM
    Fontsquirrel
    FONTSQUIRREL.COM
    

    View Slide

35. What Font Chrome extension
    PLEASE VISIT GOOGLE PLAY OR APPSTORE
    

    View Slide

36. CHOOSE FONTS
    5
    In order to choose fonts, yοu need:
    Main title
    Subtitle
    Body copy
    Links
    Numerics
    Button
    MEANLINE
    BASELINE
    

    View Slide

37. T-OINOS CASE STUDY
    

    View Slide

38. Article on typography
    MEDIUM.MUZ.LI/TYPOGRAPHY-THAT-SACRED-COW-EA7A5909CA70
    

    View Slide

39. Choose colours
    #DESIGNER_FOR_A_DAY
    6
    

    View Slide

40. CHOOSE COLOURS
    6
    How to choose colours?
    

    View Slide

41. CHOOSE COLOURS
    6
    The basics of colour psychology
    PURPLE
    #Royalty #Spirituality #Luxury
    #Mystery #Moodiness
    BLUE
    #Tranquility #Security #Integrity #Peace
    #Loyalty #Intelligence #Coldness
    TURQUOISE
    #Spiritual #Healing #Protection
    #Sophisticated
    GREEN
    #Environment #New #Money #Earth
    #Envy #Fertility
    PINK
    #Happy #Feminine #Sweet #Playful
    #Immaturity #Weak
    RED
    #Love #Passion #Energy #Power
    #Strength #Warning #Anger
    ORANGE
    #Courage #Confidence #Friendly
    #Vibrant
    YELLOW
    #Bright #Warm #Energy #Happy
    #Joy #Danger #Alert
    

    View Slide

42. CHOOSE COLOURS
    6
    tranquil luxurious
    dark
    

    View Slide

43. Adobe Kuler
    COLOR.ADOBE.COM
    

    View Slide

44. Coolors
    COOLORS.CO
    

    View Slide

45. Your own
    colour library
    

    View Slide

46. #D35983
    

    View Slide

47. #D3B47D
    

    View Slide

48. #1A467D
    

    View Slide

49. T-OINOS CASE STUDY
    #2D2B25 #968D60
    ambience excellence
    Creating an enchanting ambience
    and a bold identity
    Highlighting the nature
    of this cycladic island
    Emphasizing on the strong
    character of this wine collection
    origins
    #D7EAED
    

    View Slide

50. Place the photos
    #DESIGNER_FOR_A_DAY
    7
    

    View Slide

51. What the client think he has...
    

    View Slide

52. What the material actually is!
    

    View Slide

53. PLACE THE PHOTOS
    7
    Where to find good photos?
    

    View Slide

54. Unsplash
    UNSPLASH.COM
    

    View Slide

55. Stockio
    WWW.STOCKIO.COM
    Shutterstock
    SHUTTERSTOCK.COM
    Pixabay
    PIXABAY.COM
    Pexels
    WWW.PEXELS.COM
    

    View Slide

56. PLACE THE PHOTOS
    7
    How to stylise your photos?
    

    View Slide

57. PLACE THE PHOTOS
    7
    ORIGINAL
    

    View Slide

58. PLACE THE PHOTOS
    7
    HUDSON BRANNAN
    www.cssfilters.co
    

    View Slide

59. PLACE THE PHOTOS
    7
    GRAYSCALE GRAYSCALE
    & MULTIPLY
    www.cssfilters.co
    

    View Slide

60. T-OINOS CASE STUDY
    GRAYSCALE & MULTIPLY
    final result
    

    View Slide

61. PLACE THE PHOTOS
    7
    How to optimize photos?
    

    View Slide

62. Tiny PNG
    TINYPNG.COM
    

    View Slide

63. Smush wordpress plugin
    WORDPRESS.ORG/PLUGINS/WP-SMUSHIT
    

    View Slide

64. Add the icons
    #DESIGNER_FOR_A_DAY
    8
    

    View Slide

65. ADD THE ICONS
    8
    How to choose icons?
    

    View Slide

66. ADD THE ICONS
    8
    playful technological
    premium
    

    View Slide

67. ADD THE ICONS
    8
    Icons of different styling
    #Not
    

    View Slide

68. ADD THE ICONS
    8
    #Yes!
    Icons of the same look & feel
    

    View Slide

69. final result
    T-OINOS CASE STUDY
    

    View Slide

70. ADD THE ICONS
    8
    Where to find icons?
    

    View Slide

71. Icon Finder
    ICONFINDER.COM
    

    View Slide

72. Material.io
    MATERIAL.IO/ICONS
    

    View Slide

73. Say what you need
    in less words
    #DESIGNER_FOR_A_DAY
    9
    

    View Slide

74. View Slide

75. SAY WHAT YOU NEED IN LESS WORDS
    9
    What is the white space?
    

    View Slide

76. WHITE SPACE?!
    

    View Slide

77. #Not!
    

    View Slide

78. #Yes!
    

    View Slide

79. T-OINOS CASE STUDY
    

    View Slide

80. T-OINOS CASE STUDY
    

    View Slide

81. T-OINOS CASE STUDY
    

    View Slide

82. Play around and
    experiment
    #DESIGNER_FOR_A_DAY
    10
    

    View Slide

83. PLAY AROUND & EXPERIMENT
    10
    How to experiment?
    

    View Slide

84. PLAY AROUND AND EXPERIMENT
    10
    Be bold and daring! All in good measure
    See what’s out there
    Stay updated regarding all new technologies
    available.
    Go crazy end explore new options
    (test them properly though).
    Do not go for default solutions (except for
    cases where something default is needed).
    Think of ways to incorporate new
    technologies on your website but do not
    exaggerate.
    Discuss new options with your client.
    

    View Slide

85. PLAY AROUND & EXPERIMENT
    10
    Where to find examples?
    

    View Slide

86. Become a director
    and tell your story
    #DESIGNER_FOR_A_DAY
    11
    

    View Slide

87. BECOME A DIRECTOR AND TELL YOUR STORY
    11
    Stay aligned
    with the main concept
    Be coherent
    Small details
    make a big difference
    Look for ways to enhance your animations
    and get a unique result.
    Do not go for default solutions.
    Think of ways to incorporate your concept
    to the animations.
    Always keep in mind the kind of website
    you’re creating (corporate, fun,
    experimental).
    All animations must have a common base
    (eg. horizontal movement, gradual, rapid).
    Think of the overall direction.
    

    View Slide

88. Codepen
    CODEPEN.IO
    

    View Slide

89. View Slide

90. The importance of design
    for a project
    #DESIGNER_FOR_A_DAY
    

    View Slide

91. A COMMON TEMPLATE
    WON’T MAKE ANY DIFFERENCE TO YOUR CLIENT
    

    View Slide

92. ALL TEMPLATES LOOK THE SAME
    

    View Slide

93. THERE’S NO COMPETITIVE ADVANTAGE
    IN YOUR WORK
    

    View Slide

94. THERE’S NO DIFFERENTIATION
    FROM THE COMPETITION
    Is this what
    you’re looking for?
    #Not
    

    View Slide

95. Let’s do the “Tada!”
    together
    #DESIGNER_FOR_A_DAY
    

    View Slide

96. #DESIGNER_FOR_A_DAY
    A designer...
    

    View Slide

97. #DESIGNER_FOR_A_DAY
    ...and a developer
    

    View Slide

98. #DESIGNER_FOR_A_DAY
    Together!
    

    View Slide

99. #DESIGNER_FOR_A_DAY
    DESIGNERS DEVELOPERS
    

    View Slide

100. Resources directory
     BRIEFS
     MY VISUAL BRIEF
     Automated questions that will help you prepare
     a proper brief
     INSPIRATION
     AWWWARDS
     A collection of awarded websites
     SITE INSPIRE
     List of inpirational websites categorised by style,
     type, subject of platform
     DESIGNSPIRATION
     A vast database of inspirational items (photos,
     typography, websites, packaging, print etc)
     MINDSPARKLE MAGAZINE
     A list of inspirational designs, websites and
     videos
     MOODBOARDS
     INVISION
     Try InVision free to upload images and
     presentations, share them with your client and
     track comments
     PINTEREST
     A common website to use as inspiration storage
     HIGHTAIL SPACES
     A collaboration service that allows teams to share
     images, PDFs, presentations and comment on
     PROTOTYPING
     MOCKFLOW
     Design interactive prototypes for web projects
     BALSAMIQ
     A rapid wireframing tool
     FONTS
     GREAT SIMPLE FONTS
     Ready-made font combinations by Google
     GOOGLE FONTS
     High quality fonts for your website
     FONT PAIR
     It helps you pair Google Fonts together
     TYP.IO
     Look for perfect combinations for the font you like
     and get specific info on where to find it and how
     to use it
     WHAT FONT EXTENSION
     Chrome extension that allows you to inspect web
     fonts by just hovering on them
     WHAT FONT IS
     Upload your image and easily determine the font
     used on it
     1 of 3
     

     View Slide

101. FONT SQUIRREL
     Best data base of free fonts
     DAFONT
     Archive of freely downloadable fonts
     MY FONTS
     High quality fonts to buy (desktop + webfonts)
     FONT SPRING
     High quality fonts to buy (desktop + webfonts)
     COLOURS
     ADOBE COLOR CC
     Try, generate and save various colour schemes
     COOLORS
     Scroll through the page and save your favourite
     palettes
     COLOR HUNT
     Browse through thousands of four-colour
     combinations until you find the right one
     PICTACULOUS
     Upload your image and get a compatible colour
     palette
     PHOTOS
     UNSPLASH
     Incredibly beautiful and free pictures
     ZOOMMY APP
     Awesome free stock photos for your creative
     product or inspiration
     STOCKSY
     Beautiful and distinctive royalty-free stock
     photos
     PEXELS
     Get access to the best free stock photos
     STOCKIO
     Download free vectors, photos, icons, fonts and
     videos
     PIXABAY
     Browse and download high quality images under
     CCO license
     SHUTTERSTOCK
     Search millions of royalty-free stock photos,
     illustrations, and vectors
     TINY PNG
     Optimize your PNG images by 50-80% while
     preserving full transparency
     SMUSH
     Image compression and optimization plugin for
     WordPress
     Resources directory 2 of 3
     

     View Slide

102. ICONS / GRAPHICS
     ICON FINDER
     A powerful search engine for free icons which you
     may download in SVG or PNG format
     THE NOUN PROJECT
     Black and white simple icons and glyphs (it
     requires to give credit)
     VECTEEZY
     A large collection of free vector art, vector
     graphics, clip art, wallpaper backgrounds,
     silhouettes and more
     CSS FILTERS
     Visual playground for generating CSS for custom
     and Instagram like photo filters
     CSS REFLEX
     For image effects like blurring or color shifting
     EXPERIMENTING
     CODEPEN
     The place to build and deploy a website, show off
     your work, build test cases, and find inspiration
     ILLUSTRIO
     Customizable beautiful icons and illustrations
     Resources directory 3 of 3
     

     View Slide

103. Thank you!
     #DESIGNER_FOR_A_DAY
     WWW.KOMMIGRAPHICS.COM/WORDCAMP_2017
     Did you like the presentation?
     

     View Slide