Screen ideas with wire framing and design sprints

Before designing the digital screens in Adobe XD,  I created many different wireframes to try out different layout concepts and see what would work best. Wireframing is the process of creating mockups of the webpage, or app designs using simply outlines as the focus is on the layout, not the visual design.  Any text is written in basic fonts, and icons are substituted with generic shapes so that there is no focus whatsoever on the design. This meant I could focus on making sure the layout was the best user experience it could be. It also meant I didn't waste time on stylistic changes and could try out lots of different layout concepts reasonably quickly.

Some of my wireframes below

 There are many different ways to make wireframes; however, I used website Called wireframe Pro as it made it quick and simple to create a set of wireframes. The site had a side panel with all of the default wireframe graphics needed such as generic icons, lifts, search bars and image frames.  this let me think of ideas and visually mock them up as I went along,  it was a very quick process. 

 As part of my workload, I like to hand sketch ideas and wireframes on large sheets of paper. This allowed me to also come up with Concepts even quicker than I did digitally. It was, however, easy to get proportions wrong and overestimate the size of text and lists so the digital aspect was also incredibly useful. I tried out a method called design sprints which I learnt when learning for Firefly Learning, an ed-tech startup that makes software for schools. It involves splitting up the page into 8 sections and quickly churning out ideas for UI designs. They didn't have to be good or too accurate, they just had to be different.  This process meant in a rapid amount of time I had lots of ideas to go out and try.

adammarsh.org.jpg

Using a combination of physical sketches and digital wireframes I have something to work with one going into XD. Next, I started the mock-up one of the navigation menus based on the wireframe exactly. Although I didn't use this screen in the end design I did use some of the other wireframes that I created at this early stage. 

FMP, PracticeAdam Marsh