{"id":320,"date":"2024-02-07T12:32:29","date_gmt":"2024-02-07T12:32:29","guid":{"rendered":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/?p=320"},"modified":"2024-02-07T12:38:06","modified_gmt":"2024-02-07T12:38:06","slug":"app-wireframes","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/projects\/app-wireframes\/","title":{"rendered":"App wireframes"},"content":{"rendered":"\n<p>For the wireframes I first looked at my competitor apps to see how they structured the app. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"565\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-07-120208-1024x565.jpg\" alt=\"\" class=\"wp-image-321\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-07-120208-1024x565.jpg 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-07-120208-300x166.jpg 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-07-120208-768x424.jpg 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-07-120208-1536x848.jpg 1536w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-07-120208-2048x1130.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p> <\/p>\n\n\n\n<p>A lot of the apps were structured in a similar way with all of them having similar pages. I took inspiration from this because if a lot of them followed the same structure of ideas it must mean that it works or that it is needed in the app. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">My first ideas <\/h3>\n\n\n\n<p>For my first wireframe I designed a black and white wireframe.<\/p>\n\n\n\n<p>I thought about what the different processes are that I will need to include and decided on:<\/p>\n\n\n\n<ul>\n<li>Opening page\/ welcome page <\/li>\n\n\n\n<li>Front pages for students<\/li>\n\n\n\n<li>Front pages for tutors<\/li>\n\n\n\n<li>Finding a tutor process for a student<\/li>\n\n\n\n<li>The tutor process for a tutor<\/li>\n\n\n\n<li>Homework for student<\/li>\n<\/ul>\n\n\n\n<p>I considered the idea of having a menu but eventually decided that blocks at the bottom worked best for the app itself as it was easy to include on every page.<\/p>\n\n\n\n<p>They way I structured the app was quite spaced out so that it was easy to see the important information and get from one place to another. It was also structured neatly so that it showed it was professional and didn&#8217;t make users doubt that it was useful but also not boring. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"482\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-1024x482.png\" alt=\"\" class=\"wp-image-322\" style=\"aspect-ratio:2.12448132780083;width:470px;height:auto\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-1024x482.png 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-300x141.png 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-768x362.png 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-1536x723.png 1536w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image.png 1856w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"986\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-1-986x1024.png\" alt=\"\" class=\"wp-image-323\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-1-986x1024.png 986w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-1-289x300.png 289w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-1-768x798.png 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-1.png 1417w\" sizes=\"(max-width: 986px) 100vw, 986px\" \/><\/figure>\n\n\n\n<p>This design worked so I then decided to move on to adding colour.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Coloured wireframes<\/h3>\n\n\n\n<p>For the colours I first looked at what colours are used inside a classroom.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"273\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-2-1024x273.png\" alt=\"\" class=\"wp-image-324\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-2-1024x273.png 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-2-300x80.png 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-2-768x205.png 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-2-1536x410.png 1536w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-2-2048x546.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>All of the classrooms seemed to use really bright colours so I designed a colour scheme based on this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"758\" height=\"95\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-3.png\" alt=\"\" class=\"wp-image-325\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-3.png 758w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-3-300x38.png 300w\" sizes=\"(max-width: 758px) 100vw, 758px\" \/><\/figure>\n\n\n\n<p>These colours are what you would see in a school but also on schools websites, and tutoring apps. I also chose these colours because they stand out and will grab peoples attention. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"462\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-4-1024x462.png\" alt=\"\" class=\"wp-image-326\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-4-1024x462.png 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-4-300x135.png 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-4-768x346.png 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-4-1536x692.png 1536w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-4.png 1928w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"1022\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-5-1024x1022.png\" alt=\"\" class=\"wp-image-327\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-5-1024x1022.png 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-5-300x300.png 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-5-150x150.png 150w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-5-768x767.png 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-5.png 1300w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This was the end idea. I wanted to have different colours for the tutors side and the students side of the app because they are two completely different processes. However, where they overlap there is another joint colour as this more represents the app. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">With images<\/h3>\n\n\n\n<p>I then added images and gifs into the design so that it looked more and more completed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"979\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-6-1024x979.png\" alt=\"\" class=\"wp-image-328\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-6-1024x979.png 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-6-300x287.png 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-6-768x735.png 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-6-1536x1469.png 1536w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-6.png 1631w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"905\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-7-1024x905.png\" alt=\"\" class=\"wp-image-329\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-7-1024x905.png 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-7-300x265.png 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-7-768x679.png 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-7.png 1340w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"687\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-8-1024x687.png\" alt=\"\" class=\"wp-image-330\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-8-1024x687.png 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-8-300x201.png 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-8-768x515.png 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-8-1536x1030.png 1536w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/02\/image-8.png 1910w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>First I designed the calendars for both sides which pop up when you click on each date and the filled in dates are ones that have something happening on them.<\/p>\n\n\n\n<p>I also changed the colour schemes slightly. I made all of the colours slightly darker because I checked the contrast between the colours, background and text and these colours passed. I wanted the design to be as accessible as possible so it was very important that the colours were visible to everyone and didn&#8217;t cause any confusion.<\/p>\n\n\n\n<p>I also decided on the app name at this point, which is Ace, so the main colour is red to suit the idea of playing cards. <\/p>\n\n\n\n<p>I decided on the name Ace because it relates to being able to Ace your exams.<\/p>\n\n\n\n<p>I also added a donation and sponsorship flow for both students and tutors. This is because parents might be helping students use the app and be able to donate or sponsor through the app, or students might want to be sponsored and tutors might want to donate or sponsor. This part of the app was very important because it allowed those who need it to get free educational help where they might not normally be able to get it. <\/p>\n\n\n\n<p>I also added the idea of booking a session when a student finds a tutor so that they can meet them online and get to know them before starting to pay for sessions. <\/p>\n\n\n\n<p> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>For the wireframes I first looked at my competitor apps to see how they structured the app. A lot of the apps were structured in a similar way with all of them having similar pages. I took inspiration from this because if a lot of them followed the same structure of ideas it must mean [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts\/320"}],"collection":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/comments?post=320"}],"version-history":[{"count":1,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts\/320\/revisions"}],"predecessor-version":[{"id":331,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts\/320\/revisions\/331"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/media?parent=320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/categories?post=320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/tags?post=320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}