How to start sketching and wireframing
Before I start sharing my technique about how I started sketching and wireframing for a new project or a feature for a website (or an app), I’d quickly like to give some additional information.
I am an UX engineer. I build websites. But my background is also design related. I studied Web Design (german apprenticeship), where design and web development is part of the studies. After my exam I took the path as a
front-end developer. But I miss designing 😢. Or rather thinking about a flow. User-flow and wireframes. I wouldn’t consider myself as a good designer, but I have ideas I’d like to share and collaborate with a designer and UX researcher. In my job I’d like to go more in the direction of a wireframer & prototyper. For that I started to sketch and wireframe new projects or features.
I thought it’s a great opportunity to share my steps and help others to
start it too. Here we go…
Step 1. Choose your tools ✏️ 🗒
KISS. Keep It Simple, Stupid. I like to follow this principle. For me pen and paper works just fine. And I can tell you why.
It‘s really fast and you focus just on that. There is no distraction.
You, the pencil and the paper.
No notifications, no internet connection (needed), no overwhelming tool or too many option. I did some research and tried to find a tool for that. Even using a tablet for it, but for me it means: distractions. It takes longer to create boxes and position them. And I end up in designing instead of gathering ideas.
Speaking of gathering ideas.
Step 2. Get started 🤓
If you don’t have paper with a grid, no problem. It’s not the most important thing. But start drawing many boxes on a big sheet of paper. I recommend Din A3 (297 x 420mm). I use a post-it block, which has the perfect size for mobile screens, as a stencil to draw these mobile screens or canvas on the paper. After you created at least 8 canvas on your sheet, it’s time for the next step.
But before we go to step 3, here is something which you also should consider in this early stage of a new project. Feel good! What does that mean? For me it means: get into the mood of creating something new. I normally listen to some music. Music that activates my brain. 🎧
Here are some Spotify lists which helps me to focus and keeps my brain active and in the mood.
https://open.spotify.com/user/spotify/playlist/37i9dQZF1DWWQRwui0ExPn?si=uhRKbY0oS3awpVIz40BwmA (Lo-Fi beats by Spotify)
https://open.spotify.com/user/spotify/playlist/37i9dQZF1DXcYHsRTcIw5a?si=u_QgkzBsQKSsIBB-1KfUbg (Rocksteady by Spotify)
But whatever you prefer (music, coffee bar noise, or absolute silence), consider this should also work in a work environment. If you have the opportunity to go to a think tank, meeting room or do home office, great! Otherwise if you feel comfortable on your desk with people around you, that’s really good too.
Step 3. Sketch the hell out of it 📝
Start sketching and don’t stop even if you think you run out of ideas. Force yourself to keep drawing at least 3 more ideas in the prepared boxes.
Go crazy! Go Nuts! This step is important. Maybe the crazy idea isn’t that crazy and combining it with some other ideas will be a great product/website.
If you find it difficult to get even started, try to do some techniques to activate your brain. Like sketching 8 things in 8 minutes. This technique is used in design sprints and it’s called “the crazy 8”.
Stop thinking, start sketching.
Step 4. Highlights 🔆
Now you have your ideas. Wonderful sketches. Let’s find out what you really like. Use a black pen and a bright coloured pen, yellow if you like, but avoid colours like red or green, as we associate negative or positive things with these and you want to avoid that. Start highlighting bits and parts from the different canvas’ you like. If it’s just a small thing in one canvas and another detail in the other canvas is totally fine. You need to figure out which parts you like and combine those in the next step.
Step 5. Put things together 👩🍳
You highlighted parts and details from the sketches earlier, put those together and create a wireframe for your project. For me it’s a new wireframe and design for my personal website, because I still didn’t really like what I did before. I rushed things and went straight from an idea in my head into the code. Jumped over all the other steps.
If you have a wireframe (or more) ready, perfect. BUT, you are not done yet. Keep your hands away from the computer!
Step 6. Let’s bring it into a flow 🏄♀
What happens if a user clicks on this? What happens if the user scrolls? Will there be an animation? Where does the error message appear for the form field? What happens to the content, when the keyboard shows up?
Wow, ok, what? 🤔
What you need to create now is a user flow. Think about all the steps in between, which will happen when the user interacts with your website, or feature. If you are not sure how to do it , you can start with a flow chart first and go a step away from doodling, sketching and drawing.
Alexander Handley
Once you have mapped out that flow, you can go back to the wireframes and add them together. A flow chart itself might not help in running straight into the visual design. I recommend to first also sketch the different steps as a wireframe, to get a feeling for a flow. You might loose yourself in the design-details (which is good) if you run into the visual designing at this stage. And it’s not the time yet to think about it.
Once you‘re done with wireframing all the steps it’s time…
Step 7. Charge your device, here we go! 💻
…Time for the visualisation. Now you can focus on all the wonderful details for your design, because you focused on the initial idea and the flow earlier. Happy designing ❤
Some more thoughts and tips from me:
Over time you will become better and faster. So don’t worry if this sounds overwhelming or that it takes a long time. But for me, this is a crucial and important part of a new project and shouldn’t be under estimated or under valued.
If you have more practise you might remove some steps or merge them, as it will feel more natural to you to combine them into one, that’s fine too.
Also, using pen and paper helps a lot to reduce distraction. If you want to save time, digitalise them for documentation or want to present those to a stakeholder for instance, you can of course use wireframing tools. If the stakeholder is ok with paper sketches, you can even include the stakeholder in this process, once you present the first sketches.
I am happy for any feedback and open for knowledge sharing and reading about your experience. If you like this article, don’t hesitate to 👏.
Thank you 😊
