{"id":286,"date":"2023-11-19T21:52:02","date_gmt":"2023-11-19T21:52:02","guid":{"rendered":"https:\/\/www.nua-ux.design\/hanley-whelpton\/blog\/?p=286"},"modified":"2023-12-06T12:21:23","modified_gmt":"2023-12-06T12:21:23","slug":"design-an-experience-prototyping","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/hanley-whelpton\/blog\/project-3\/design-an-experience-prototyping\/","title":{"rendered":"Design an Experience : Prototyping"},"content":{"rendered":"\n
The prototyping section definitely took me the longest out of all of them, as I wanted to make the filter completely interactive so that people could experience the webpage to the fullest extent.<\/p>\n\n\n\n
Scroll System <\/h2>\n\n\n\n
In order to do this, I first wanted to make my scroll systems interactive, however, I stumbled upon a few challenged as I went along. <\/p>\n\n\n\n<\/figure>\n\n\n\n
The scroll bar literally would not work! <\/p>\n\n\n\n
I had a few ideas as to why this could be:<\/p>\n\n\n\n
\n
Groups and Frames <\/div><\/summary>
\n
ou will need to group your elements together before adding the frame. Use auto-layout to space your elements evenly. To make the frame scrollable, you need to put the group inside a frame. <\/p>\n\n\n\n
\n
Select the Filter<\/strong> group, Option+Command+G to add a frame selection, rename your layer<\/li>\n\n\n\n
Drag the right side of the frame until it hits the side of the screen<\/li>\n\n\n\n
Do the same thing for the gallery frame but drag the bottom side of the frame until it hits the bottom of the screen This will limit the view of the content to only be visible within this section<\/li>\n<\/ul>\n<\/div><\/details>\n\n\n\n
Layers<\/div><\/summary>
\n
Figma will only scroll top level objects, so if your object is obscured by other layers, then it will not scroll at all. <\/p>\n<\/div><\/details>\n\n\n\n
Content Clip<\/div><\/summary>
\n
To make something scrollable, make sure to check the clip content option. Clip Content will adjust the content to fit within the frame so it doesn\u2019t exceed the width of the screen. When scrolling within the selected area, the view is displayed within the frame, which is something that I had to check before moving forward. It is also important for the frame to be around the items you want displayed. <\/p>\n<\/div><\/details>\n<\/div>\n\n\n\n
After I had looked into all of the different reasons, I finally created the scroll system that would work on all of my filter bars, in which I could copy and paste onto different slides. I originally had it slightly curved, however after some design recommendations, I did lower the curve on the sides so that the rectangles were slightly more present – as it was commented on that round shapes felt ‘safer,’ and not as thrilling. <\/p>\n\n\n\n
Components Part Two<\/h2>\n\n\n\n
I needed a fair few different components for this project, and I am glad that I looked into a lot of different methods of doing so, as it really helped me to develop the way I use and create smart components for projects. <\/p>\n\n\n\n
The first thing I needed to do was to create a nav bar for the home page, so that the user can easily get back to the home page if they need to, or to edit their favourites cart and pay. I did this by using a very simple hamburger navigation bar, as I felt the simplicity of it matched the design I was going for, and used a smart animation to create a cross for the user to then close the navigation bar when done. <\/p>\n\n\n\n<\/figure>\n\n\n\n
I then built this into a component so that it could be used within my design multiple times at the same size and dimensions. <\/p>\n\n\n\n
I then had to look into a heart tool so that the user could favourite their meals and in turn, gain some sort of signifier that they had completed that action. I felt as though a signifier was important, because it means that the user knows for sure that they have put something in their cart, saving time and energy. <\/p>\n\n\n\n<\/figure>\n\n\n\n
I used the colours from my design and made the original heart to match the style of my design system. The shape was common in most web design, as I felt a more rounded out approach maps the component in a way that is similar to peoples expectations. <\/p>\n\n\n\n
In theory, this should have worked, and for the slightly larger hearts, it did completely work really well, however, upon testing my prototype, the hearts within the components did not want to work for the life of me, and whilst I attempted to move them outside of the component, recreate the heart entirely, and even add it as a separate frame, nothing wanted to work. It turns out that the reason for this was that it was being tested in preview mode, so only the main animation moved – so start prototype viewing gin present mode !!<\/p>\n\n\n\n
I also wanted to create some sort of location selection tool for the user so that they can input their address at the start of the process. For this, I created a drop down menu with different addresses on so that the user could find their house number or name from a previously input address. <\/p>\n\n\n\n<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Similar to the one I had previously made, I wanted the user to be able to put their preferences into the website as to avoid any incorrect items on their menus. I made this very simple so that the signifier from the click is obvious enough, but doesn’t change the state of the component too much. <\/p>\n\n\n\n<\/figure>\n\n\n\n
Adding Noodles<\/h2>\n\n\n\n
After I had done this, it was time to Strat adding the prototyping noodles in order to connect different frames within my design. I began by using a written down system to see how many different filter selections I needed to create, and highlighted each one appropriately, before going one by one and connecting them all, making sure to include the back arrows at the top of the page. Below is the (somewhat chaotic) final image of that section that I had completed. <\/p>\n\n\n\n<\/figure>\n\n\n\n
The prototyping section definitely took me the longest out of all of them, as I wanted to make the filter completely interactive so that people could experience the webpage to the fullest extent. Scroll System In order to do this, I first wanted to make my scroll systems interactive, however, I stumbled upon a few … <\/p>\n
![\"\"](\"https:\/\/www.nua-ux.design\/hanley-whelpton\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-20.35.06.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.nua-ux.design\/hanley-whelpton\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-21.58.39-1024x609.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.nua-ux.design\/hanley-whelpton\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-21.57.35.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.nua-ux.design\/hanley-whelpton\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-21.57.54-1024x609.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.nua-ux.design\/hanley-whelpton\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-21.57.42-1024x829.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.nua-ux.design\/hanley-whelpton\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-21.34.18-764x1024.png\")
<\/figure>\n\n\n\n