When I started with web development and UI/UX design, I didn't really care much about pre-production. I was always thinking.. What a waste of time! I don't have to plan anything, when I already have it all planned out in my head. And I did, but then when I started making and designing my prototype for mobile or actual website, I got lost after few minutes.
I forgot about important features and basics to make it accessible to as many users as possible or I made layout so complicated, users would never figure out how to get from point A to point B.
All of this trouble could be avoided, if I would just do little bit of those mock-ups.
1. Plan your thing for the mobile FIRST
Why? Because.. First, it is easier to start with smaller screen and then make it bigger. Second, most people these days view websites on mobile first or they simply download the app. As the time goes, users don't turn on their computer every single time they want to the access internet and go to your website. At least not anymore.
Plan out your layout with not many details in it. Focus on main features you want to include in your app/website/game. Where is gonna be navigation? How large pictures are going to be there? What are the pathways - how can you get from main page to contact page?
2. Make more versions of wireframes
One version is not enough? No, unfortunately no. You start with one version of wireframes and you may think "Wow, it's perfect!". And it can be, however you always want to produce more versions, where you may try include some more accessible features, different navigation style, or you simply add some details you maybe miss out in the first one. Usually, the more you produce, the better they get.
This is also helpful while presenting your ideas for future app/website/game to your employer or clients.
3. Think of responsiveness
This is another point, why is planning so important and why it will save your time, if you make your wireframes beforehand.
Instead of thinking about designs in your head, look through your previously created wireframes for mobile and then start making the layout for desktop. Questions to help you start sketching can be "How content resizes on bigger screen?" and "What are some important features that must be included desktop version?".
Usually what makes the biggest difference in desktop version is the navigation and size of content. Images and text is larger, hamburger menu disappears and becomes banner on top of the screen instead.
Website for desktop also can contain more animations, decorative buttons and interesting features to "blow away" the users, like hover animations and transitions.
So, when you actually start making your prototype, you can always revisit your wireframes to focus on those key elements you cannot miss out and have to incorporate.
Have a look on my newly created interactive story I made in Figma according to wireframes shown above. Just click on the image.
Was this article helpful? What do you want me to write about next? Do you have any helpful tips for others to share? :)
Comments