Exercise 1: Skeuomorphic vs Flat
The topic I chose for the interface illustration is fitness. Using fitness as my topic, I thought of an
app that a user could log in to and see available and popular classes. UI elements include header with a menu, search, and logo, a stylized introduction text, and then three classes on skeuomorphic cards aligned to indicate swipes were displayed. Two popular classes are shown on skeuomorphic cards, showing class name, time, and price.
Process
As part of my creative process for developing fitness mobile applications, I created small thumbnail sketches to explore various design ideas. By experimenting with different layouts, color schemes, and features, I was able to generate a range of concepts that could potentially enhance the user experience. These sketches allowed me to visualize different possibilities and make informed decisions about the direction of the project.
First Submission
After discovering my UI elements, I designed my app theme, which included heading styles, links, typography within class cards, and a color scheme. I designed the theme to be reused for the flat design. As a result, it was very easy to transition from the skeuomorphic to the flat interface. I stripped the header of its styling properties. As I simplified each element, such as the cards, I removed drop shadows, inner shadows, and gradients, reducing them to a minimum of one color for cards without styling properties. As I watched the tutorials, it was interesting to see how to recreate the image in Illustrator by examining the detail of the image. I found it validating, as that is a method I use when creating real-life illustrations. I break the image into sections to examine the texture, shapes, and colors to decide on the recreation path.
Final Design
I continued to focus on the fitness industry and aimed to create an application that showcases a list of popular classes. The app's user interface design utilized a modular card layout with toggles. This was a change to the design from my initial submission. I identified UI elements to achieve the app's design and created a theme that included heading styles, links, typography within class cards, and a color scheme. My primary goal was to develop a sturdy and reusable design language to enhance the app's usability and streamline interaction.
