LOW-FI WIREFRAMES
For my UI project I decided to design a study app that allows students to connect with each other and share files. With many education systems creating virtual platforms, I believe students will need a place they can connect and get feedback from peers without having to meet in person. I decided to call the app Link.
Try the Low-fi prototype @ https://marvelapp.com/prototype/f0g82ee
MID-FI WIREFRAMES
At this point I began drafting the wireframes in Adobe XD. To execute vital features of the app I developed the following design elements:
Menu
A hamburger menu will live in the top right corner of every page.
Symbols
Numeric symbol notifications will populate here
Labels
Descriptive titles on the profile and home page
Progress Indicators
Progress bars, percentages, and checkmarks
Tabbed Controls
A small triangle will move under the current tab as well as the tab header will turn bold
MOODBOARD
The project brief for Link calls for a friendly, welcoming, and inviting feel. To keep the imagery relatable and inclusive I made sure to use photographs of culturally diverse students.
HI-FI WIREFRAMES
THE LOGO
MOCKUPS
STYLE GUIDE
My style elements are straightforward just like the app itself. When choosing fonts and elements for Link I wanted them to be minimal and recognizable. One of the most important aesthetic elements is the color choices. The project brief called for the color green to be used and I wanted to choose in accordance with that. The palette is a great blend of blues and greens complimented by a blush colored neutral. This group of colors is vibrant while the neutrals add an air of professionalism and readability. This palette is also accessible to potential colorblind users.
ANIMATED LOGO
To brush up on my animation skills I decided to animate the Link logo in Photoshop. This animation will serve as a welcoming introduction on the splash page.
PROTOTYPE
Link to XD prototype:
