Above is a video of my mid fidelity design animations for my website and app. The website and the app are functional both up to the login pages. Both the website and the app function in a very similar way and are just adapted to fit the user’s needs of being on a mobile or on a computer. The process of making a functioning app and website involves creating individual frames that act as the pages and adding elements such as text boxes and shapes to create the look of the website and app. Once the designing stage is done then it becomes time to wire frame the pages. My functioning website and app has a lot of wireframe connections because I made not only the call-to-action buttons function but the navigation bar. These are part of the core functions that need to always work in order for the user to get from the home page to the checkout page, and everything in between. These core functions will be updated and added upon when the high-fidelity version if the website and the app is created. Things like animations would be added. For example, fade in and fade out of some elements and the menu could use a slide animation to be presented when it is clicked. The Gallery is another example of what would be updated as I would animate and make the slideshow function when the buttons are pressed. The arrows used around the website and the app can also be animated when the user hovers over to give them some feedback. This can be done in several ways, one including making the arrow stretch out which can edge the user into clicking the button with excitement and curiousness. I used the logo to my advantage on all of the pages on the website and the app by making it a quick and easy one clicks button back to the homepage. This can be used by all users for a majority of reasons, for example refreshing the page or just needing to get back to the homepage to see an overall of the website again. The design of my call-to-action buttons makes them the most used function across both the website and the app because of how prominent they are and how quick it takes the user to click on them to go straight to a particular point on the website. One thing that needs fixing for the high-fidelity design is the function of the navigation bar on the app to move with the screen and always stay visible when scrolling.
Categories