Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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. 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
  2. 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
  3. CHOOSE FONTS 5 In order to choose fonts, yοu need:

    Main title Subtitle Body copy Links Numerics Button MEANLINE BASELINE
  4. 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
  5. 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
  6. 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.
  7. 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.
  8. 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
  9. 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
  10. 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