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

Becoming a Modern Designer

Becoming a Modern Designer

In this two hours talk/workshop, I talk about what makes a good designer with a lot of tips and tricks, while explaining my own process. This workshop was presented for the first time to WordPress community in Pokhara, Nepal.


Emanuel Blagonic

March 20, 2018


  1. BECOMING A MODERN DESIGNER Emanuel Blagonic Tweet me back at

  2. I have a few rules…

  3. RULE #1 This is a stress-free environment.

  4. RULE #2 If you have a question – ask it.

    Don’t be afraid. Just raise your hand and I’ll point to you.
  5. RULE #3 I CAN talk for two hours. If you

    need a break – let me know.
  6. None
  7. What is “design”?

  8. “ Design is the creation of a plan or convention

    for the construction of an object, system or measurable human interaction. DEFINITION OF DESIGN
  9. SOME OF THE DESIGN DISCIPLINES — graphic design — visual

    design — web design — user experience design — interaction design…
  10. Design changes over time. It adopts. ACTUALLY…

  11. Are you a designer?

  12. ARE YOU A DESIGNER? Are you emotional about your designs,

    always trying to do better and trying to improve?
  13. ARE YOU A DESIGNER? Are you passionate about what you

    do, smile while you sketch, always developing new ideas?
  14. ACTUALLY… Designers need to be emotional. They need to care

    (about others). They need to be passionate about what they do. If you can’t be like that then it’s better to change your job.
  15. None
  16. My story…

  17. My first web page. 1997

  18. Journalism… 1999

  19. Started a business. I was a designer. 2003

  20. Discovered WordPress. 2004

  21. Web standards movement 2005

  22. Started Blagonic Brothers. 2009

  23. Started talking at conferences. 2010

  24. Started visiting conferences abroad. 2011

  25. My first WordCamp Europe as attendee. 2013

  26. Co-founded Croatian WordPress community. 2014

  27. Lead organizer 
 for the first 
 WordCamp Croatia. 2015

  28. Co-organizer of WordCamp Europe. 2016

  29. My first talk in a conference outside Croatia. 2016

  30. My process

  31. BEFORE WE TAKE A PROJECT — First contact — Client

    interview — Preparing a quote
  32. DURING A PROJECT — Wireframes and exploration — Design —

    Frontend development — WordPress development — QA
  33. AFTER THE PROJECT IS FINISHED — Continuous improvements — Partnership

  34. First contact

  35. FIRST CONTACT — Website — Email — Recommendation

  36. WEBSITE — You don’t know them — Based on how

    you “brand” yourself – that’s the type of jobs you’ll get — Detailed or simple contact form?
  37. EMAIL — Usually – more personal — Always send them

    a request for a “detailed brief”
  38. “ Client that doesn’t have two hours to answer your

    brief – has either enough money to pay everything you ask – or they won’t be committed to this project.
  39. RECOMMENDATION — It’s easier to close a deal through recommendation,

    because both sides know what to expect — 80% of jobs that I got through recommendations – were successfully agreed on and finished
  40. “ A job you get through a recommendation is usually

    similar to one that you worked on and that got you recommended in the first place. (including the price).
  41. WHAT TO BE AWARE OF WHEN COMMUNICATING — Professional communication

    is a must. Explain them everything they ask. Make sure you write their names correctly. — If you don’t want to work with them – tell them immediately
  42. “ If you feel the client is stupid, then you’re

    are probably the one who’s STUPID.
  43. AND DON’T FORGET — Remember that you’re the expert. If

    you forget that you can’t expect your client to treat you like you are. — Client is paying you to solve his problem. If they forget – remind them politely.
  44. Client interview

  45. “ Leave a good first impression. You are the professional,

    you know what you’re talking about. You have all the answers because you are an expert.
  46. “ Client interview is a way to see how the

    client feels about certain things and you can predict if there will be problems afterwards.
  47. Should we have the same goals with our clients? CLIENT

  48. Should we have the same goals with our clients? CLIENT

  49. “ If you share same goals there is a much

    better chance that a project will be a success. And this will eventually lead to a new recommendation.
  50. “ If your goals (and client goals) are well defined

    and documented, you will stop a client from “owning” this project by messing with your business and creative processes.
  51. Should I send the quote immediately after they ask for

  52. How can a client interview influence with preparing a quote?

  53. What if I don’t want to work with this specific

  54. “ If you are not happy with the work you’re

    doing – the client won’t be happy either.
  55. “ Interviewing a client before 
 starting a project will

 both you and the client.
  56. Preparing a quote

  57. Let’s talk about how to define your own prices PREPARING

 base hourly rate —

    $40 per hour
 when being booked for an entire week — $30 per hour
 when being booked for an entire month
  59. MY HOURLY RATE — $80
 base hourly rate — $70

    per hour
 when being booked for an entire week — $60 per hour
 when being booked for an entire month
  60. But what when clients can pay more? PREPARING A QUOTE

  61. “ Instead of sending them a higher price “because they

    can pay more” see what extra benefits you can offer them and use that to up-sell them some other services.
  62. How to define a budget? PREPARING A QUOTE

  63. HOW TO DEFINE A BUDGET? — 10% project management —

    30% design — 30% development — 10% SEO — 20% content (copywriting)
  64. What impacts the final budget? PREPARING A QUOTE

  65. IMPACT ON A BUDGET — Having the same goals with

    a client (I don’t want to be “code monkey”) — Assessment if the client will allow “creative freedom” — Has the client tried to bargain for a lower price?
  66. None
  67. Project is approved. Now what?

  68. Preparation phase A STEP BEFORE PROJECT STARTS


    prepare all the website content? — Does the client have a dedicated contact person for the project – someone who can make decisions?
  70. PREPARING YOURSELF — Prepare your own team (who will work

    on what; who is the best person for the job, etc.) — Define types of communication with a client (email, Skype, Teamwork, …)

  72. COMMUNICATION CHANNELS — Email — Voice and video conferences —

    Project management tools — Screencast
  73. EMAIL — Most used communication channel — It leaves a

    “written trail” — It helps preventing different views from the team and the client on certain decisions — Slower than a call
  74. VOICE AND VIDEO CONFERENCES — Always go for a video

    call — Calls are good because they help speed up the solution to a problem — After the call is over – always send notes over email
  75. PROJECT MANAGEMENT TOOLS: TEAMWORK — Many advanced options, although the

    user interface is quite clean and straightforward; can cover everything from smaller to bigger projects — It has time tracking — Starts at $9/user per month (billed annually)
  76. None
  77. PROJECT MANAGEMENT TOOLS: TRELLO — The best free PM tool

    “out there” — It uses cards instead of task — To each card you can add users, tags, checklist, deadline…
  78. None
  79. SCREENCASTS — It is a replacement for an “in-person session”

    — Ideal for when you have a problem explaining a certain problem to a client — Screencast archive is a good way to keep track of project’s progress
  80. None
  81. Communicating potential critical decisions

  82. CRISIS COMMUNICATION — You did more work than you were

    expected to — There will be delays in the project — There are communication problems within the project
  83. CRISIS COMMUNICATION — When you’re communicating critical decisions, ALWAYS communicate

    via video call (if you cannot meet in person) — When answering emails be polite; never point fingers towards a client
  84. Wireframes and exploration

  85. EXPLORATION — Ask your client about what websites they love;

    ask them why they love them – let them be detailed
  86. SITEMAP — Start by asking you client for a sitemap;

    if they don’t have any – work together to build one — When building a sitemap work closely together for a best final solution
  87. None
  88. INFORMATION ARCHITECTURE — Similarly to sitemap, working on a good

    information architecture of a webpage will make sure that end clients don’t get lost, eventually working towards a defined goal (more sales, etc.)
  89. None
  90. WIREFRAMES — Define main elements of a webpage; see which

    one are repeating on different subpages – these are the things you need to design — You can do wireframes however you like; on paper, in an app, on a whiteboard…
  91. None
  92. None
  93. None
  94. THINGS YOU NEED TO DEFINE — Who is client's target

    audience? — How will you approach them (what kind of content will you write; i.e. blog posts, focus on social media, etc.)? — What are the most important pages of 
 client’s website?
  95. — Why You Should Build A Sitemap Before 

    Your Site
 https://blog.kissmetrics.com/build-a-sitemap/ — Using Dropbox to help clients organize 
 their web sitemap
 http://www.emanuelblagonic.com/2014/01/21/using-dropbox-to-help-clients- organize-their-web-sitemap/ FURTHER READING
  96. — Complete Beginner’s Guide to Information Architecture
 http://www.uxbooth.com/articles/complete-beginners-guide-to-information- architecture/ —

    Information Architecture Basics
 https://www.usability.gov/what-and-why/information-architecture.html — Personas
 https://www.usability.gov/how-to-and-tools/methods/personas.html FURTHER READING
  97. — A Short Guide to Writing Good Copy
 http://www.copyblogger.com/short-guide-to-good-copy/ —

    7 Tips for Writing Effective Short Copy
 https://blog.crazyegg.com/2014/02/18/writing-effective-short-copy/ FURTHER READING
  98. Design

  99. DESIGN — Use client’s branding for visual inspiration (how are

    the photos used, what kind of colors client uses, what’s the message we need to send)
  100. DESIGN — Be emotional and passionate about what you design

    – emotion and passion is something the client will see from how you talk and present your design
  101. None
  102. HOW TO PRESENT YOUR CREATIVES — If you’re presenting a

    new creative or just hitting the milestone – you need to add extra effort — Whenever possible, do a presentation live, over Video conference call or via screen sharing; observe client’s reaction
  103. HOW TO PRESENT YOUR CREATIVES Presenting a creative is an

    important task. Don’t underestimate it as it can literally kill the project.
  104. None
  105. Frontend development

  106. None
  107. WordPress development

  108. SOME DEVELOPMENT TIPS — Define deadlines by adding 20% of

    extra time to each deadline — Do a weekly or a bi-weekly recap of the project together with a client
  109. SOME DEVELOPMENT TIPS — Do a constant communication so a

    client can have access to your development server and/or project management tool — If a project is too big – it’s better that only your project manager and client’s dedicated person be in touch
  110. QA

  111. SOME DEVELOPMENT TIPS — Don’t leave QA for the very

    end (although it is important to test at the end too) – test early, test often — I usually leave 10% of my time for QA and testing
  112. None
  113. Continuous improvements

  114. AFTER YOU’RE DONE — When you’re done with main project

    – offer some additional things – if they make sense — If you can do something “for free” and it won’t take much of your time – do it. You’ll win a client for good.
  115. Partnership

  116. MAKING A PARTNER FOR LIFE — If you are honest

    to your clients – they will be your partners in this and future project — Offer them bonuses – something that is small to you but can mean a lot to them (i.e. some small change on their website which you won’t charge)
  117. MAKING A PARTNER FOR LIFE — Making a partner out

    of your clients means they will have better understanding of you – as they are becoming part of the “family” — This also means that this partner is more likely to recommend you to its friends
  118. None
  119. Some other tools

  120. — Dropbox – For keeping all your files in one

 And synchronised with your team.
 https://www.dropbox.com — Toggl – To track your time
 https://toggl.com/ — Rescue Time – To see how are you spending your time.
 And to optimise it.
 https://www.rescuetime.com/ — 1Password – A place to keep your passwords safe
 https://1password.com/ GETTING YOURSELF ORGANISED
  121. — Optimizely – If you’re into running A/B tests

    — HotJar – Amazing analytics after you publish a website
 https://www.hotjar.com — Crazyegg – Create heat maps, scroll maps and more
 https://www.crazyegg.com/ OPTIMISATION
  122. — Google Analytics – Well, analytics ;)
 https://www.google.com/analytics/ — Page

    Speed Insights – Check how your page performs
 https://developers.google.com/speed/pagespeed/insights/ ANALYTICS
  123. — SurveyMonkey – Ask your visitors what they think

    — MailChimp – A perfect tool for sending emails
 http://mailchimp.com/ INTERACTION WITH VISITORS
  124. 1999 A MISSING YEAR

  125. None

    BIGGER PICTURE Photo by NASA on Unsplash
  127. Be passionate AS IF YOU DON’T HAVE PASSION 

    DEFINITELY DOING A WRONG JOB Photo by SH Lam on Unsplash

    Nicholas Sampson on Unsplash

    AND UNKNOWN Photo by Joshua Earle on Unsplash
  130. Always be learning. DON’T BE AFRAID TO LEARN Photo by

    Emma Frances Logan on Unsplash
  131. Do the RIGHT thing Photo by Ludovic Fremondiere on Unsplash

  132. Thank you @eblagonic