I used the Ability Media website to map out what the features of the app would be. It is my goal for this app to have the same functionality as the website but design improvements as well as optimize the screen real estate for a phone screen. Considering I was starting out from scratch on the app side of things I found that creating my information architecture (IA) was not only a step of the design process but it helped me identify and organize the order of my pages as well as determine the layout for the content. The Information Architecture Institute states that IA, “…is the practice of deciding how to arrange the parts of something to be understandable.” I am also working with a partner on this project which means that I not only have to have a plan in place but I also have to display my thoughts and ideas in an organized, easy to understand manner. This is another reason why IA is so important because it provides the person you’re working with a more concrete understanding and would ultimately effect how things move forward in terms of the design process.
Through wire-framing I was able to take things a step further as I was able to experiment with different ideas I had for screens and content layout. For some of my key screens such as the home page, videos page, and resource page, I included the improvements I had identified. Wireframes are similar to IA in the sense that they too provide an overview and are like a blue print for the designers and creators. InVision writes that wireframes are the middle ground between sketches and the first prototype. In addition to providing an overview, wireframes can also provide one with inspiration. An example of this may be that while you are working on one wireframe, it can then inspire you to add the same element or feature for similar screen. Another key element about wireframes is that they are cheap and easy to create. Designing and creating an app from the ground up can become costly very quickly. Sketching out wireframes helps to reduce this as it provides you with a rough but concrete idea in terms of the design and layout. If something doesn’t look right or if something was accidentally left out, one can quickly and easily sketch a new wireframe and make those changes. In the future I plan on using an online tool such as Wirify to create my wireframes because it would provide neater, more organized, and specific wireframes that would not only benefit me but my partner/s as well. As individuals, we all have areas we need to improve on and part of the challenge is finding out how to improve in these areas.
When it comes to wire-framing there are certain things one should not do. These include using more than two fonts, using color, and using complicated or flashy images. InVision recommends that only grayscale is used. If you are planning on using two fonts make one sans serif and the other a serif font. To portray an in image, one can simply draw an “X” within the box of where you plan on placing the image.
Comments