Join 17,000+ creatives receiving insider insights about brand and marketing design – featuring landing page and rebrand breakdowns, useful career content, and a behind-the-scenes look at running a Brand Studio team in tech.
Why I stay "lo-fi" for as long as possible
Hi Reader,
Today I’m sharing an excerpt from my marketing design book draft about wireframing on paper, a tool to help you drive more traffic from search results, and a set of hilariously realistic mockup templates.
Let's go!
Staying lo-fi for as long as possible
If you looked at the start of my web design process, you might think I’d outsourced it to my two year old nephew.
My messy initial wireframes are filled with badly-drawn rectangles, lines that aren’t straight, and scribbles indecipherable to anyone but me. But don’t let them fool you; they’re arguably the most important step in my design process.
Lo-fi scribbly wireframes are where I generate ideas and think through the flow of the page.
I used to be very self-conscious about my drawing abilities. No matter how hard I tried I just couldn’t draw things neatly. For my first year or so working as a designer I resisted breaking out a pen and paper as much as I could, for fear that if the other designers saw how terrible my drawings were I’d be outed as a fraud and my design career dreams would be crushed.
But that all changed when a senior designer working with us at Xero on a contract project got me involved in a brainstorming activity for a complex new project.
He handed me a large piece of paper and told me to fold in half, then in half again so there were eight visible frames when it was unfolded again. He set a timer, and said we were both going to come up with 8 different ideas for laying out the page information as quickly as we could. I can’t remember now how long our time limit was, but it was quick enough that there was no time for judgement of either the ideas or my drawing skills.
The first idea or two followed the typical zig-zag format so common in web design. A header, three short points in a row underneath, text on the left with an image on the right, then text on the right with an image on the left… you’ve seen that site before.
My next idea broke that pattern — even though as I was quickly sketching it up I knew it wouldn’t be a good solution. But that idea sparked another… and another… and before I knew it our time was up. I think I had filled only six squares on my paper, but combining our efforts we had more than a dozen different layout ideas in front of us to discuss and debate. I talked him through my scribbles, he talked me through his, and together we decided which ideas we’d explore further.
While these days I’ve swapped the Sharpie and paper for drawing on my iPad, this rapid-fire sketching is still the way I begin all my design projects. There’s a certain freedom in the time constraint and the messiness of it all that not only helps push past the paralysing ‘blank page’ but (excuse the cliché) pushes me to think outside the box and get more creative.
After the ideas have slowed down and I’ve forced out a few more, I review what I’ve drawn and mark the ideas that I want to explore further in a neater context. I’m looking for the design ideas that will best communicate the page content, and lead to the most engagement; whether that’s through interactive elements, different ways to create information hierarchy, or visual impact.
The beauty of a wireframe is that there’s nothing for us to judge other than the structure itself. It’s the foundation that will hold beautiful typography, color and visuals later on. But seeing just outlines in black and white puts our focus on the the flow of the information itself. This is important not just for us as designers to get the UX right, but it helps stakeholders who we need feedback from to focus on the content & structure too. As soon as you start including elements like placeholder images and color, there’s too much temptation to give feedback on these things instead.
So as easy as it is to mock up high-fidelity page designs these days: stick with the lo-fi for the initial stages and you’ll be set up for success later on.
How does your design process usually start?
I’m curious to know how you start visually arranging information. There’s no judgement here! The beauty of the design process is there is no one correct way to do things. So let’s see how Dispatch readers start a project.
Click on the option that best matches the beginning of your process to vote and I’ll report on the results in the next issue.
My process starts with…
1️⃣ Lo-fi wireframes with pen and paper or on a whiteboard
2️⃣ Lo-fi wireframes on iPad or other digital drawing tool
3️⃣ Lo-fi wireframes in a design tool
4️⃣ Mid-fi designs (using some design system components or color)
5️⃣ Straight to high fidelity baby!
Dispatch sponsor
Have you been frustrated with your Google traffic lately?
Are you tired of tools that make you search through millions of keywords and require a math degree to figure out which one to choose?
There’s an SEO tool called RankIQ that can help.
RankIQ gives you a list of the lowest competition high-traffic keywords in your niche, and they are all clear winners.
When you choose one of their hand-picked keywords, their AI takes over and gives you a simple report telling you what Google wants you to cover in your blog post.
Whether you have a new site or have been around for a while, RankIQ will take your Google traffic to a whole new level. They‘re ranked #1 on G2 for ease of use, and their founder’s blog gets 5 million monthly visitors from over 100,000 first-page Google rankings.
Go to RankIQ.com right now to lock yourself in at 50% off their monthly rate.
| Try RankIQ |
A realistic way to mock up how your designs will look in the real world
Fockups (f**ked up mockups) is a project by Dutch art director & designer Wytze Hoogslag that aims to give designers a way to see how their designs will really look when they’re in use, as opposed to the perfect, idealistic mockups we’re used to seeing.
Featuring a fallen-over sign, a folded-and-discarded flyer, a backwards flag, a torn poster and more; you can check out the project here. The set of Photoshop files starts from $8 for personal use.
What a fun idea!
I spent the weekend hanging out with a dear friend who I hadn’t seen since February 2020. All side projects and book writing plans were put on hold to spend time with her while she was here in Valencia.
Hope you have a great week ahead! I’ll be over here feeling like I need a weekend to recover from my weekend 😅
See you next week with those poll results.
Marketing Design Dispatch
by Charli Marie
Join 17,000+ creatives receiving insider insights about brand and marketing design – featuring landing page and rebrand breakdowns, useful career content, and a behind-the-scenes look at running a Brand Studio team in tech.