$30 off During Our Annual Pro Sale. View Details »

Vivian Dimitriadi - Designer for a day

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.

WordPress Greek Community

December 09, 2017
Tweet

More Decks by WordPress Greek Community

Other Decks in Technology

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