{"id":644,"date":"2024-01-28T16:50:52","date_gmt":"2024-01-28T16:50:52","guid":{"rendered":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/?p=644"},"modified":"2024-01-28T16:50:52","modified_gmt":"2024-01-28T16:50:52","slug":"high-fidelity-designs","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/2a-projects\/project-5\/high-fidelity-designs\/","title":{"rendered":"High-Fidelity Designs"},"content":{"rendered":"\n

This week, I really focused on getting the majority of the app fully designed, alongside making sure I had an essay draft ready for submission. I created component libraries, tweaked the colour use in the app and responded to user and tutor feedback.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

A main difference in the app at the end of this week is the introduction of a sky blue colour to more areas of the app, as a secondary colour alongside the teal to represent informational buttons or icons. The salmon pink\/red colour I had previously was too strong to be used as widely as it was, as it has connotations of stopping, inertia or negativity which was the opposite of many of the places I was using it. I’ve instead restricted it to navigational buttons and icons, as it is more subtle there – several informal user tests agreed. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I also tweaked and refined the journey search results page, displaying potential routes the user could take according to their chosen priority. I moved the toggle-able pills to the top just underneath the page header, helping this part of the interface to feel more connected and organised. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The above screens are secondary pages which are accessed from some of the buttons on the main pages. They’re less refined and not fully complete, but I’m pleased with the progress nonetheless. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Above and below are several currently not component-ified variants of subframes or pop-ups. The above is for the shortcut buttons accessible from the main app home screen, and the below frames are for the different stages of navigation the user would experience. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The left image displays search results for destinations and origins. The right image is an overview of the components and component sets I have created – these have been extremely helpful and beneficial in staying organised and have also made it easier to tweak elements of the design such as colours or font weights as I go. <\/p>\n\n\n\n

\n
\n
\"\"
The above two screens show search results for both destination (left) and origin (right) views. The left screen displays locations, stations and routes – as it will be possible to just look up a route without navigating there. The right screen only displays locations and stations though, as a destination has already been chosen. <\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Next week, I want to polish the prototyping aspect of the app, finish off any design bits and shift focus to Project 6. <\/p>\n","protected":false},"excerpt":{"rendered":"

This week, I really focused on getting the majority of the app fully designed, alongside making sure I had an essay draft ready for submission. I created component libraries, tweaked the colour use in the app and responded to user and tutor feedback.<\/p>\n","protected":false},"author":1,"featured_media":646,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,39],"tags":[],"class_list":["post-644","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-project-5","category-week-14"],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/posts\/644"}],"collection":[{"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/comments?post=644"}],"version-history":[{"count":1,"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/posts\/644\/revisions"}],"predecessor-version":[{"id":652,"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/posts\/644\/revisions\/652"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/media\/646"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/media?parent=644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/categories?post=644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/tags?post=644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}