Mobile website design: Why is it important and what is the process?

"Alix decided to use her favourite health food ‘Macha’ as the subject to promote and develop" says Jones. "Students were not tasked to rebrand their chosen product, but Alix was keen to do so."

"Alix created a mood board using Photoshop to define a UI visual style for the screens and test the new identity in context," Jones explains.

"These images are quick drafts created by Alix of mobile website designs," Jones says. "She has looked into some text-led designs, minimalist design, and image-led designs, and, after discussion with tutors, opted for the latter." 

"I respond to photography more than anything, so I knew this was the approach I wanted for my website'," McGreggor adds.

"Our students learn about a wide range of small screen UI design principles during the course," Jones explains. "Alix was focusing on making information easy to find, making buttons large enough to work with different finger and thumb sizes, using fonts with good legibility and at appropriate sizes for clarity and keeping designs simple."

"These are all the UI designs for the pages," Jones says. "Adobe XD creates a map of how all the pages look, so continuity can be achieved. Alix tried to avoid too much scrolling and included the Macha logo as a footer on each page. Images were selected from the mood board and added appropriately."

"This image shows the prototype view of Alix's website, revealing the connections and transitions through the site," says Jones. "This looks very complicated but actually, in practice, Adobe XD makes this easy by allowing the user to drag links across the screen to the pages they wish to link to. When all the links are visible, the designer can see which elements link to which pages. 

"On the left, you can see the lime green pages, these are the navigation menu which pops out from the side when you select the hamburger icon. Alix wanted to make the whole page the menu to keep it clean, fresh and minimalistic, as otherwise the site is quite busy."

"Here are three example screengrabs of Alix's final mobile site promoting Macha," says Jones. "Students went on to make a larger desktop version of each site, making their designs truly responsive."

"Mia created the pages above during two digital workshops, one focusing on UI design and another working with technical aspects of prototype building," says Jones. "This set of designs were a trial run for Mia's chosen project.

"Mia wanted to create a site named 'Binge Me' focusing on the best of entertainment for a young adult age group," Jones explains. "The site has a particular focus on animated films, so Mia spent much time sampling images from cartoons and animations to create a graphic style that provided continuity through shape, colour and typography."

"This grab shows not only the high number of films featured within the site but also the mini TV player, which Mia created to showcase choices," Jones adds. "Adobe XD helps designers by creating a visual map of links that means multiple pages and links can be employed."

"Above are two screen grabs from Mia’s completed mobile site," says Jones. The first image has a Hamburger menu and a link to the mini TV, which showcases the films on offer. The right image is a screengrab from an animated Instagram story that promotes Mia's mobile site.