The process of wireframes and information architecture has served as the foundation for my app redesign for several weeks. Having the foundation to build towards a redesign is a crucial step in the success of the overall outcome. Last week visual research was explored which has become a helpful part of the research and planning process. The visual research included color, typography, and photography which has become helpful for this week as I designed 3 different versions of design comps for 4 key screens. I started the visual comps with following the general layout of my wireframes which gave me a head start into the process. From there I was able to start designing 2 other versions which took more time because I didn’t already have a plan set up like I did for my first comp. This goes to show how important having the foundation of wireframes and information architecture is. Having done the visual research a week prior I have found it easier to design the comps because I know what I want the look and feel to be. At this point in the process I am beginning to see how each previous step is affecting the next.
An article from Smashing Magazine discusses the idea of an interface inventory which can help with maintaining consistency across a design. They suggest with redesigning an existing app an interface inventory can be beneficial for mapping out all of the components for documentation purposes. Considering typography (i.e. headings, text elements), images and media (i.e. logos, iconography, images), and forms (i.e. text inputs, select menus).
“It’s at this stage — especially if you have a sizeable design team — that you might start to see inconsistencies in how different elements have been designed. Your interface inventory will help you identify these elements, which you can then fix.”
Christopher Murphy, A Comprehensive Guide To UI Design
Another reading for this week from Medium, offers some methods to become better at visual/UI design. I think the article offers a lot of valuable information especially for a student like myself. Out of the 7 methods the one that related to me the most this week was “learn by copying top designers”. I found this resonated with me because after I designed my first comp from my wireframes I was at a loss for how to move forward with two different design directions. During this time where I was at a standstill I did more research and looked at some strong UI designs through some of the websites this article suggested. I suppose it wasn’t so much copying top designers but it was looking at quality examples that helped me push past the point where I was stuck.
“Very often creatives are just the people who have learned how to use and apply this technique to the real life projects.”
Dawid Tomczyk, 7 simple & effective methods to get better at Visual/UX Design
For my designed comps this week I had to considered the design elements of color, type, images etc. These elements are essential to the overall look and feel of the redesign. In considering my color choices I knew I wanted to keep it consistent with the current branding of Poshmark for the app to be recognizable. For my comps I decided to design the 4 key screens as the home screen, women’s screen, inbox screen, and sell screen. Through the design process I realized there could be a “mix and match” of my designs. For example, the home page in the first comp could flow well with the women’s screen in the second comp and the inbox screen in the third comp. I found this to be an interesting observation because when I originally started the comp designs I thought about the design style fitting only with the screens in their respective comp instead of looking at the sets of comps as a whole. For a more detailed look at my designed comps click here.
Mikayla Lovering 