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
2. Hi! I’m Vivian :) #DESIGNER_FOR_A_DAY
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?
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
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
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?