Providing Designers A Platform to Learn About Their Tools
Aiming to practice applying visual and interaction design elements I learned from reading the Material Design Guide, I created a personal project to design a prospective app/web platform that organizes and provides information about the different types of softwares designers might use in their daily work.
I chose not to focus on color use or imagery in the design to challenge myself in creating interfaces that are inherently intuitive.
REASEARCH & SKETCHING
- Acquired the majority of content and research from web searches looking for premier softwares made for designers
- Was pleasantly surprised to see the organization and layout naturally come together in two categories as I read through and took notes on content from websites
In the past I have fallen into the trap of developing too many ideas and trying to upscale the project far beyond what was necessary, only to realize it needed to be scaled down and condensed halfway through the project. I made a specific point to avoid such pitfalls here, keeping the concept and ideas of the interface simple.
- Division of research into 2 categories (By Position & By Process)
- 3 elements in each category helped keep the simplicity in mind to stay within a certain level of fidelity.
- Natural progression of a vertical layout, with some unique design elements I picked up from Pinterest searches.
- Also included a few annotations on how the screens would interact.
When in the predicament of needing some inspiration for how to start a design, I like to turn to Pinterest and Dribbble. While able to get a few ideas in mind through some targeted searches, too much visual content presented in my searches made it difficult to determine which direction to go.
I decided to take a step back and just start sketching the most basic way I could think of to split up 2 categories, stacked boxes. This led to the development of a vertical layout, evidenced in the sketches above and in the wireframes below.
WIREFRAMES & ANNOTATIONS
- Tap Position, Process box slides down out of screen
- Tap Process, Position box slides up out of screen
- Category header slides up into box just below App
- Each element expands into own box to form next screen ( far right)
- Each box will have a reduced opacity picture related to respective title
- Once selected depending on location, box will slide up to create info box in next screen (below left)
- Non-selected boxes will slide out of screen, replaced by incoming elements from next screen (below left)
- 3 small squares represents icons of the processes that can be tapped to filter software boxes below
- 6 pills represent software elements in different colors that will give indication of software info/capabilities (referenced in small bar at bottom of software boxes)
- Sketch App visuals are introduced in the background of the interface
- Intro video with quick run through of design interface and some key features
- Selecting an info square expands it while pushing other squares partly out of screen
This web portal aims to describe the app's capabilities, main features, and provide call to actions to download the app on mobile devices. Through a very simplistic, clean, and targeted layout, I was able to hone in and focus on the aspects of Material Design I wanted to practice: introducing elevation for clickable elements from the base layer as well as succinctly detailing written content.
I feel great progress was made in my understanding of how interfaces exist in several layers dimensionally as well as learning the ability to quickly and effectively engage the user. Visually my abilities were tested as the focus to create intuitive interactions were explored without utilizing color or much content.
Material Design principles go a long way in this regard as a user-friendly approach and I'm glad I was able to practice some of those elements while teaching myself how to implement concepts I didn't yet have experience with. Going forward I aim to continue researching not only the Material Design Guide, but Apple's Human Interface Guidelines as well and other design systems that can contribute towards becoming a better designer.