Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

A717e9d055b2284e573b2412e32f5397?s=128

WordPress Greek Community

December 09, 2017
Tweet

Transcript

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

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

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

  5. DESIGNERS LIVE HERE DEVELOPERS LIVE HERE

  6. ?!#$*!

  7. Be a designer in 11 steps

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

  9. UNDERSTAND THE CLIENT & ASK FOR A BRIEF 1 What

    kind or project is it?
  10. UNDERSTAND THE CLIENT & ASK FOR A BRIEF 1 e-shop

    blog corporate
  11. UNDERSTAND THE CLIENT & ASK FOR A BRIEF 1 What

    is the brief?
  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
  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
  14. My Visual Brief MYVISUALBRIEF.COM

  15. Create moodboard and prototypes #DESIGNER_FOR_A_DAY 2

  16. Awwwards AWWWARDS.COM

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

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

  19. T-OINOS CASE STUDY

  20. Create the basic structure #DESIGNER_FOR_A_DAY 3

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

  22. None
  23. Writemaps WRITEMAPS.COM

  24. CREATE THE BASIC STRUCTURE 3 Create your wireframes

  25. T-OINOS CASE STUDY

  26. Mockflow MOCKFLOW.COM

  27. Find the concept #DESIGNER_FOR_A_DAY 4

  28. FIND A CONCEPT 4 What is a concept?

  29. ?!#$*!

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

  31. Choose fonts #DESIGNER_FOR_A_DAY 5

  32. CHOOSE FONTS 5 How to pair fonts?

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

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

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

  36. CHOOSE FONTS 5 In order to choose fonts, yοu need:

    Main title Subtitle Body copy Links Numerics Button MEANLINE BASELINE
  37. T-OINOS CASE STUDY

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

  39. Choose colours #DESIGNER_FOR_A_DAY 6

  40. CHOOSE COLOURS 6 How to choose colours?

  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
  42. CHOOSE COLOURS 6 tranquil luxurious dark

  43. Adobe Kuler COLOR.ADOBE.COM

  44. Coolors COOLORS.CO

  45. Your own colour library

  46. #D35983

  47. #D3B47D

  48. #1A467D

  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
  50. Place the photos #DESIGNER_FOR_A_DAY 7

  51. What the client think he has...

  52. What the material actually is!

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

  54. Unsplash UNSPLASH.COM

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

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

  57. PLACE THE PHOTOS 7 ORIGINAL

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

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

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

  61. PLACE THE PHOTOS 7 How to optimize photos?

  62. Tiny PNG TINYPNG.COM

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

  64. Add the icons #DESIGNER_FOR_A_DAY 8

  65. ADD THE ICONS 8 How to choose icons?

  66. ADD THE ICONS 8 playful technological premium

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

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

    & feel
  69. final result T-OINOS CASE STUDY

  70. ADD THE ICONS 8 Where to find icons?

  71. Icon Finder ICONFINDER.COM

  72. Material.io MATERIAL.IO/ICONS

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

  74. None
  75. SAY WHAT YOU NEED IN LESS WORDS 9 What is

    the white space?
  76. WHITE SPACE?!

  77. #Not!

  78. #Yes!

  79. T-OINOS CASE STUDY

  80. T-OINOS CASE STUDY

  81. T-OINOS CASE STUDY

  82. Play around and experiment #DESIGNER_FOR_A_DAY 10

  83. PLAY AROUND & EXPERIMENT 10 How to experiment?

  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.
  85. PLAY AROUND & EXPERIMENT 10 Where to find examples?

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

  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.
  88. Codepen CODEPEN.IO

  89. None
  90. The importance of design for a project #DESIGNER_FOR_A_DAY

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

  92. ALL TEMPLATES LOOK THE SAME

  93. THERE’S NO COMPETITIVE ADVANTAGE IN YOUR WORK

  94. THERE’S NO DIFFERENTIATION FROM THE COMPETITION Is this what you’re

    looking for? #Not
  95. Let’s do the “Tada!” together #DESIGNER_FOR_A_DAY

  96. #DESIGNER_FOR_A_DAY A designer...

  97. #DESIGNER_FOR_A_DAY ...and a developer

  98. #DESIGNER_FOR_A_DAY Together!

  99. #DESIGNER_FOR_A_DAY DESIGNERS DEVELOPERS

  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
  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
  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
  103. Thank you! #DESIGNER_FOR_A_DAY WWW.KOMMIGRAPHICS.COM/WORDCAMP_2017 Did you like the presentation?