I hear a lot of designers saying that it is good to start designing a website from mobile to desktop as it is easier to have the desktop if you have designed the mobile screen first. However, I have dealt with a lot of cases where clients require to see the desktop version first and then the mobile second. Also, it is quite common among UI designers to start it with the desktop and finish the website or the web app with the mobile.
It becomes challenging when you finally have finished the latest changes for the desktop. Then, when you turn to design the mobile UI, you notice that the flow isn’t that logical, and you have to use a lot of CSS to adapt the interface to the mobile screen.
These types of challenges made me think and then research and experiment about if there is a better way to design a website or a web app from desktop to mobile. In the end, I came out with three following crucial steps.
Step 01: Know the project
All the projects start with a project description or, as some call it, including me, a project brief. A project description, answers to some questions which help us in the research phase. One of them is the goal of the app that is not about completing a task in it but solving a problem. Finding out what type of issues the app can solve helps us to know the device/s people will use to access the app.
For example, if we are working on designing an app for flight ticket booking, in our research, we will find that agencies and most people prefer to access these types of web apps on laptops or desktop screens. The size of the screen on the desktop afford to access a lot of information simultaneously. Hence, people prefer more laptops or desktops rather than smartphones for using management apps. However, there are small tasks that people can complete on the go, and a smartphone is useful in these cases.
Step 02: Build the big picture
After we have got the head full of data about the audience, we go to our desk, open the sketchbook, and put all our ideas on paper. It could have been that simple as saying it, but first, you have to analyze some data after you finishing with the project brief and research. A simple way of analyzing data is writing down the information you have gathered during the research in a simplified keywords format. Sticky notes do a better job on that, and you can use colors to categorize ideas.
The next step is brainstorming design ideas by sketching screen variations. It is in this phase where we think about and build the basement of the big picture of the app. I call it the big picture because you are going to contemplate and sketch screen variations for desktop screens and mobile screens as well. If needed, even for the tablet screen. In the end, you are going to choose those desktop and mobile screen sketches that together create a consistency in UX and UI.
Step 03: Focus on the desktop
In the final step, you will skip building wireframes for mobile UI and continue with the desktop. You have a tight schedule, and you want to finish the UI of the desktop as soon as possible. A wireframe is just gray graphics or another monochromatic color you can use for it. You can use the final content or Lorem Ipsum for the titles and body, but you will use a default font for the UI of the app, which means no font, and there won’t be images and colors as well. Clients find wireframes confusing, as they are not able to see a lot of content and colors in it.
Wireframes help the designers to build the layout faster without caring too much for the UI. Wireframes are a way to refine the UX after brainstorming during the sketching phase. As you do most of the work during the sketching phase, you can finish the wireframes for the desktop with the mobile in mind and jump directly to the UI design phase.
Conclusion
The reality outside is not always as we plan it in our mind. It is common to deal with projects that require a fast-pacing work environment. Getting to know the project very well and building the big picture before getting your hands dirty in the UI will help you be confident to jump a few steps and finish the project with success.
You may be interested to read this as well: Scaling UI from Desktop to Mobile | Medium
Source: Booking Travel Online? Here’s Why Mobile Search Falls Flat (forbes.com)
