4 things I learned in becoming a web designer
Warning: the first couple of paragraphs are all about feelings. Feel free to skip
Recently, I had a conversation with a friend who reminded me about my growth as a designer. The growth that came from hours of watching YouTube tutorials, and being mentored by active professionals. The growth that lead to a web design career without a computer science degree. All of this growth came with the help of the design community.
And that’s what I’m writing for: to share the bit that I know in hopes of helping someone else as I’ve been helped.
Earn from Your Mistakes — Five Years a Failure
In order to grow I had to try things, fail, and continue. And that has lead me to my current workflow after over five years of failing. That workflow includes sketching, mocking up, and implementation.
Before, it was way longer: writing out personas, mapping the user flow, creating the site map, drawing wireframes, receiving approval for the previous steps, mocking up the site in Illustrator, receiving approval, implementing, and receiving approval for the implementation. Wash, rinse, and repeat.
I’m not the only one who has noticed the shift in our workflows. Jen Simmons, Designer Advocate at Mozilla (she’s way smarter than I am), mentioned on March 11, 2017 how we’ve gone from a conceptual design process to a content-first design process. In “How Webflow fits in the modern design process,” John Moore Williams wrote, “we’re spending a lot of time drawing PDFs to act as conceptual models for the websites, apps, and digital products we’re building — rather than deliverables founded in the stuff of the internet: HTML, CSS, and JavaScript.”
Though my old workflow was arduous and tedious — I was getting paid by clients to learn (who were ultimately satisfied with the final product).
And I’ve learned two important things:
- More steps won’t make you more professional. Pros take the fewest steps, but know all the steps that they skip.
- Iterate quickly, and communicate often.
These lessons are what shape my current workflow.
1. Know Your Client Better Than They Know Themselves
Above all else, we want clarity. Being the best web designer for your client means knowing them better than they know themselves. Speak with key stakeholders about the web design project to clarify their role in the process. Ask questions like, “How can this website help you?” or “What don’t you like about the current website?”
Having stakeholders talk about the web project will help you know what can be improved, and give you a good idea of the problems they face when navigating their current website. This portion of your research will show how the new website can address their specific needs. Ultimately, our clients have goals, and we’re trying to help their customers down a path to achieve those goals.
2. Sketch Your Ideas, and Try to Poke Holes
Draw out all of your ideas with a pencil and paper. Fight off the temptation to jump into your software of choice (Sketch, Illustrator, Adobe XD, Photoshop, etc.). I don’t always listen to this kernel of knowledge, but it helps me greatly when I do as it prevents me from getting too far down a design rabbit hole without thinking about as many options as I can. It becomes too easy to start tinkering with colors and fonts before the layout is somewhat hashed out.
I will even look at high-fidelity mockups on Pinterest or Dribbble, and sketch out layouts that solve similar problems as the one I’m trying to solve. More often than not, I will come across an issue, or solution, that I didn’t initially think of. Sketching quickly shows me the gaps in my design logic.
Okay, now we’ve got a sketched layout. What’s next?
Try to poke holes in the layout. Will the layout work on a phone? Can the goal be reached in fewer steps? Is it intuitive? Show your mum. Does it make sense to her? :-) Research is critical.
3. Iterate, Iterate, Iterate
Next comes the fun stuff! Jump into your software of choice (mine is Affinity Designer) and iterate like a crazy person. A wise sage (good ole Aaron Draplin) once said, “Vectors are free.” No point in being stingy with the artboards. Create a layout on one artboard; copy that artboard, and change color if it’s not to your liking; or, rearrange the layout; maybe even remove/add elements.
The whole point is to take your initial idea, build upon it with the freedom to go as deep as you like, or change directions.
Vectors are free.
It sounds like chaos, but during this process you are still maintaining some order. All H1s within an artboard are the same size, weight, and line height; all paragraphs tags are the same; and all CTA buttons are the same with the same hover interactions.
Now, that we’ve just gone bonkers with our creativity and decided on a layout — it’s time to organize the craziness. At this point, we’ve set ourselves up to easily create something pretty special: a style guide. This will include things like our colors, font sizes, buttons, and generic elements. Check out how to set up an awesome style guide.
4. Quickly Create in Webflow
Finally, the moment we’ve been waiting for: turning our design into pixel perfection with Webflow. But first, we have another temptation to fight off.
We must fight off creating the home page first—that beautifully crafted home page we’ve been doting over—and instead create our style guide page (you’ll thank me later). It’s not as fun, but it’s the best way to make your website more easily manageable, cohesive, and get you and your client on the same page (show them — keep that line of communication open).
Above all else, we want clarity.
My style guide page consists of a container, and all the elements within that container. Headings, colors, generic elements, logos, paragraphs, and buttons (dark and light versions) all in one place. So if you need to make an update to all your headings, you can do it there. Even if you create other headlines in your website that are combo classes from your original headline (class=“main-headline thin-font”), they will be affected by the update, also.
Then, we’re off to creating all of our pages.
A Thing of Beauty
What’s even more beautiful about this blueprint is that it will grow with your knowledge. As you become more skilled, become a better communicator, and have a working knowledge of your goals, you may be able to skip sketching and mockups, and jump straight into Webflow. Ryan Morrison, Senior Visual Designer at Webflow, talks about his shift from creating conceptual designs in Sketch to starting his workflow with, “creating and manipulating code, without writing any of it.”
That’s mind blowing! An even more streamlined workflow. One day I’ll be that good. :-)
