Wireframing & Prototyping
Initial Wireframing & User Flow Layout
When I initially opened Figma to start designing my travel application I began by creating a basic layout of typography and shapes to recreate the sketching I had previously done for this project, as I spent a lot of time developing my sketches and idea generation I felt like I had a solid understanding of what I wanted to create for this user interface. Personally I find creating detailed sketches more time efficient as opposed to creating digital wireframes so I try to do this as much as possible in projects like app design and web design, while drawing detailed sketches helps me figure out the layout of sections and the design of certain components bringing the design into a digital application like Figma allows me to experiment with the design further by adding colour and depth.
Check out my Idea Generation & Sketching
I have included a screenshot of my basic wireframe and initial user flow below to give you an idea on how I started to design a digital version of my travel application.
Once I had the basic layout of my initial pages I started to develop my wireframes further by introducing a touch of colour to help me create some visual hierarchy between the elements on the page, initially I wanted to use a peach colour as I felt this would be a good fit for a travel application but once I started to develop my designs further I noticed that the contrast between the peach colour and the white colour I was using for text wasn’t high enough which made the text difficult to read, I tried switching the text to black but I felt that this was too harsh on the lighter background.
I have included a screenshot of my wireframe developments and colour experimentation below.
Final Design
I initially wanted to use a peach colour for my application but this began to create issues with legibility and readability of text, this led to change the overall accent colour to a deeper blue tone which was inspired by a colour palette I saw on Instagram from Awsm Color, this was a much better option in terms of legibility and I felt that the blue colour still worked in giving the app a playful and fun personality. Once I started to develop the application further I noticed it became boring and almost corporate with the use of black text on a white background with a hint of blue as an accent colour, I decided to introduce a lighter shade of the blue colour to use as the background which made the application feel less corporate and also helped define the curved edges of the cards I had created.
I really enjoyed this project as I haven’t designed an application since I studied at Northern Regional College so it was good to get back into designing interfaces for mobile applications again, personally I think I still have a lot to work on when it comes to UI/UX design but I think this project would be a perfect portfolio piece to demonstrate my skills to potential employers while I develop my learning further.
I have included a screenshot of my final app screen designs below.
Prototyping
I have done some prototyping in previous projects throughout my study at Norther Regional College but the majority of this was on Adobe XD as opposed to Figma so this was all new to me, I had done some research on prototyping in Figma before and I know they have an interactive component feature that I wanted to try and incorporate into this project either in buttons, icons or full scale components. Another feature I want to look into is Figma Auto-Animate function which creates smooth animations and transitions within the application, I would also like to experiment with other variations of this to see what each option does. Overall I enjoyed prototyping in Figma but I did find some elements extremely difficult to get right, like transitioning cards into full screen displays, this is definitely something I need to work on but for my first time prototyping in Figma I think this project went really well.
I have included a short video clip of my travel app prototype below to demonstrate how the user may work their way through the different pages now the application.
NOTE: This is not my final application design as I still have a few elements to refine throughout the design but this is a good idea on how the app will work and how the user can navigate from section to section.