Designing for mobile screens is completely different to designing for desktop screens and has its own complications.
The obvious difference is the physical size of the screens, which means designing elements to a much smaller scale whilst still ensuring they are still easy to read, click and navigate. An other difference is the portrait orientation of a mobile screen in comparison to the landscape orientation of a desktop screen, this presents the issue of having to stack elements on top of each other, whilst still having to consider the reduced page fold heights (what is visible on the screen at any time before scrolling) and ensuring that important elements are placed correctly and easy to use.
App design is not just about how good something looks, but how well it performs and functions from a UX and UI perspective.
UX may seem like a 'techie' term and jargon to some, but it stands for User Experience, which means this is a process that is a constant consideration throughout the design phase of any project. It focuses on how the user will interact with the design and the functionality and looks at the most effective way to style and place elements to ensure the highest quality interaction between a user and the app and the impression they take away from the overall app experience.
UI goes hand in hand with UX to ensure the users interaction as simple and efficient as possible, in terms of accomplishing user goals. It focuses on anticipating what users might want to do and ensuring that the interface has elements in place that are easy to access, understand, and use, to facilitate those actions.
Before we start anything we make sure that we fully understand your brand and what you are trying to achieve from the new website.
We look at the completion in your market and consider the target audience to find the best way to make your brand stand out and make your website convert as effectively as possible.
To ignore the importance of how a website looks and responds to the vast array of screen sizes and devices in the current market would be naive. Current statistics show that 56% of all consumer traffic to websites is from mobile devices. For this reason we always look at how pages will respond to mobile devices and how the content will adapt to ensure the same high levels of user experience created with the desktop design.
We place the designs, which are still static images at this point, in online software that allows us to add basic usability to the app pages, such as making buttons and navigation links clickable and navigate to other page designs, as well as making it look and feel more like a live app with other features such as page transitions and splashscreens/loading pages.
We feel this is the best way to demonstrate the app designs to the client as it allows them to see the designs on their device, accessed through an app icon, exactly as they would do once the app is developed and published. It also helps to understand things like scaling, proportions and page fold heights.
A final sign-off is required as a confirmation that the client is 100% happy with the designs and styling of all the elements within the app templates. Only once we have been given the final sign-off confirmation will we move the designs into development.
The reason for the final sign-off is that once we move the designs into development, styling and layout changes take much longer to edit in code then they do to edit in photoshop. It means the developers can do what they do best, and focus on bringing to the signed off designs to life and not have to be distracted from their flow by going back to pages they coded weeks ago and having to recode them.