The Top Left Design Design Process


Published on

At Top Left Design we have perfected an amazing design process which ensures that our clients love the designs for their websites (and brands, brochures, stationary etc) and these websites are effective for their audiences too! This presentation shows you how we do it.

Published in: Technology, Business
1 Comment
1 Like
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • A sure fire method of ensuring you love your website's design
  • For this client we presented 3 different designs – this is design 1
  • This is design 2
  • This is design 3 – and the final one can be seen
  • Another example – 1st of the 3 designs we showed
  • 2nd design
  • 3rd design
  • This was the end result after our “Live Design Session”
  • We also showed a reversed out version. She chose the light background one though.
  • You can see the final site:
  • - Blogging – creating a content hub on your site
  • The Top Left Design Design Process

    1. 1. We ask questions about your brand, your audience, your key messages, what people believe about you now, what you want them to believe. We ask about your competitors and your design preferences. And more questions! First, we meet face to face, unless you are in another country!
    2. 2. And then, once we have gotten to know you, we get you to fill out our amazing design briefing questionnaire We need info
    3. 3. It’s easy, don’t worry. You just answer the questions.
    4. 4. When we design websites, we start with 2-3 different initial homepage concepts, all based on the design brief and what we have learned about you! Then we work on “look and feel” designs
    5. 5. You need to see and love your design before we build it.
    6. 6. Here are three concepts for our client, a restaurant in Clapham. You can tell they are all the same company but the layouts are different. Example: Carmen Bar de Tapas
    7. 7. In that meeting we did a “live design session”. This one involved radical variations, an exciting session where we combined elements of the 3 initial designs to make a completely new 4th design, which our client signed off. Check it out (see next slide!) Once we showed those first three designs we had our client from Carmen Bar de Tapas in for a design presentation meeting
    8. 8. By involving you in the “live design session” we combine our expertise with your input and knowledge of your business and clients. “Live Design Session” Involve You
    9. 9. The next example shows a wedding planner. In her brief she asked for a luxury feel and specified a dark background. So, we showed 2 concepts with a dark background, and one design with a light background. Example: Flutterfly Events
    10. 10. Then we had the client in for our “live design session” and in that session, we came up with this design:
    11. 11. As you can see it’s a light background image! But to be sure, we reminded our client that she had originally specified a dark background, and showed her this in the same “live design session” – to be sure!
    12. 12. She went home to think about it, and decided on the light background one!
    13. 13. So, one she signed off the design for the homepage we designed each inner page – every page is designed according to the purpose of that page.
    14. 14. As you can see there is consistency in the header, footer, positioning of the navigation and the footer design, but the content area of the page differs. We do this with all our bespoke designed sites.
    15. 15. This website has all the makings of a high end professional hairdressing salon – but with added personality! The salon owners have 2 dogs who feature on the site – as do all the stylists on a very comprehensive teampage. Each page is different. Example: Kell Skött Haircare
    16. 16. Popup windows on each of the team bios show who works at the salon.
    17. 17. The rest of the site is very informative and builds confidence and trust.
    18. 18. Kell Skött also has a strong social media presence, which is core to their marketing activities.
    19. 19. We also design for tablets and phones. Consider how many of your audience are using their phones or mobile devices to visit your website, see your social media posts, read your blogs, speak to you on social media. The following slides show one of our clients, Aspire Leadership – and how their site looks in a browser – and on a mobile phone.
    20. 20. Another example – Astute Property Search – you can see how his site looks in a browser, and then on an iPhone.
    21. 21. Sometimes we create single page sites – see some examples:
    22. 22. The next few slides show how a single page site can have a “content slider” – where different images and text either fade into each other or slide between each other, in the same place.
    23. 23. On a single page site, you can use a slider to show a number of images and key messages. To see it in action, visit
    24. 24. And more often than not, we design blogs into the website. This works best when it’s seamless – the blog is a part of the website, and doesn’t open up in a new window. We love blogs.
    25. 25. Integrate the blog into your website Plan content ahead of time Watch your formatting Always include a picture Post regularly Think of amazing headlines Share your posts on social media Superblogging tips
    26. 26. Visit our website: to ask us any questions. We are very nice and friendly!