Information Architecture and Wireframes

picture-3After doing research for Cookbook, the next step in the redesign process is to build both information architecture and wireframes. According to “Information Architecture. Basics for Designers” by Tubik Studio,

“Information architecture (IA) is a science of organizing and structuring content of the websites, web and mobile applications, and social media software… (IA) aims at organizing content to so that users would easily adjust to the functionality of the product and could find everything they need without big effort” ( Tubik Studio, 2017).

In addition, people often confuse IA and UX, however, their roles in product design are incredibly different. Furthermore, Tubik Studio also explains that “IA is a blueprint of the design structure which can be generated into wireframes and sitemaps of the project. UX designers use them as the basic material so that they could plan navigation system”( Tubik Studio, 2017).

When I began creating my IA I was inspired to use the program Draw.io to make my sketches come to life from the article called “The Comprehensive Guide to Information Architecture” by James Pikover. In the article, a video was a YouTube tutorial was included to show how to build IA using draw.io. Moreover, when redesigning Cookbook, I decided to break up the application into four main pages: explore, search, profile, and a shopping list. The explore page’s purpose is to recommend new recipes to the user that they are likely to enjoy based on saves. The search page is a tool to also find new recipes using a specific ingredient or a dish name. Likewise, the shopping list page is built to help the user pick ingredients they need for a recipe and easily put them into a shopping cart that is self organizes by placement in the grocery store. Finally, the profile page allows for individuals to save recipes in self-made categories.

IA

On the other hand, according to Will Fanguy on “How to make your first wireframe”, he describes wireframes as:

“a low-fidelity design layout that serves three simple but exact purposes:

  1. It presents the information that will be displayed on the page

  2. It gives an outline of structure and layout of the page

  3. It conveys the overall direction and description of the user interface” (Fanguy, 2019)

 

Moreover, when creating wireframes for Cookbook it was important that I made pages that were clear to understand with a simple navigation on the bottom. I also wanted to include a sign-in/log-in page for the app as well. One of the most mentioned problems of Cookbook in the product reviews was that there were no cross-platform meaning users were not able to switch from different devices because their information would not save. In addition, to solve this problem I created both a sign-in/log-in page and also a profile page, where users will be able to save recipes. Another feature I created when designing the wireframes for the shopping list page, there is a feature that automatically organizes ingredients by type, alphabetical order and then placement within the grocery store. Overall, it was a positive and beneficial experience creating both IA and wireframes because it allowed me to bring this design to a working and efficient level.

wireframe-sketch

Full PDF of Work –> ColoneseDiBello_artifacts2

Responsive Web Design

One of the keys to make a successful website is to make it responsive. A responsive website is when the layout and design adapts to the size of the screen. In addition, all computer, phone, tablet, etc. screens are all different sizes and therefore, a good website should be able to adapt to each of the screen sizes and still look well designed and easy to navigate. Moreover, because all computer screens are horizontal and phones are vertical it is difficult to the design to look exactly the same on computer versus phone. However, there are tricks around this problem. For example, navigation bars on websites built for computers are traditionally at the top of the screen with a clear layout and button for each individual page. The navigation bar usually stretches across the entire width of the screen. This would not work for viewing pages on your phone because if it would to do the same the font would be too small or would take too long to scroll across the entire screen. Therefore, the hamburger menu icon was created. The hamburger menu icon was created to represent the entire navigation bar and it is symbolized by usually around three lines stacked on top of each other. When a user presses this the tabs that would usually appear across the screen, are now presented as a stacked list. In addition, there are other hacks used for web design when making a successful responsive website. In an article I read called, “Practical SVG” by Chris Coyier, he describes when placing an image into a website rather than using “img” you use the code “svg” an automatic correct resizing takes places. By using “svg” rather than “img” you are using numbers on a coordinate system rather than pixels. Another benefit to this that no matter how big or small, there will be a clear picture rather than a pixelated image. This also works great even if the ratio does not match the original because there are other possibilities such using Max,Min, and Mid. When using max, min and mid, combined with “meet” there are nine possible outcomes and keep the entirely of the image.  Also, when using max, min and mid there are an additional other nine outcomes when using with “slice” that cuts off part of the image. Overall, when designing responsive websites there are various different hacks and shortcuts to reach a desirable website for all sized screens. Whether it be replacing words for icons, traditional website design for new symbols or just making a adjustable picture using meet or slice there are tons of ways to make a website design look amazing for any sized device.

Importance of Storytelling

I thought one of the most interesting aspects in the book “Animated Storytelling” by Liz Blazer was how she described that the greatest challenge of storytelling and creating an animation is to be “intentional about your storytelling choices”. I found this incredibly interesting because often when ideas come to mind, at first I do not always understand why.  In my creative process I find that I usually come up with tons of ideas and then I try imagine each one. If I can clearly see the final product in my mind I start to create a few different versions. Once I am to narrow it down to the final idea and finish, I am able truly about to understand why I created it the way it is and the story behind it. For example, for the Calendar Poster I created for my typography class for the Yale Art Gallery.  I choose to use a very abstract piece of art with a font that fit the modern feel. In addition, I choose the primary colors (red, yellow and blue)  for the text. After creating the piece I understood that I choose to create the poster this way because throughout the museum the modern art spoke to me the most and really made me question the work and its meaning. Therefore, I wanted to contribute feeling to the poster design. I also believe the dramatic color difference was able to show the variety the museum had to offer. Overall, when the author of “Animated Storytelling” describes the importance of the choices we make to tell a story I believe she is correct is saying that every design should have a meaning to tell a deeper story.

Motion Graphics

In the article “Motion Graphics” or “Motion Design” ? by David Cornejo, he discusses how the term Motion Graphics feels outdated. The reason for this is because Motion Graphics covers much more than “wedding videos and glassy 3D logos heralding cable news channels”. Motion Graphics is literally putting design into Motion.  After reading this article it made me realize I do prefer Motion Design over motion graphics because it feels broader and more design can fit into the name. Especially after learning in class that there are so many different types of motion graphics, GIFS, stop motion, etc. Also in the article “Origins of Motion Graphics” by  Michael Betancourt describes the history of motion graphics as well as the different types. Overall, although I do not mind the name Motion Graphics, I believe that Motion Design would fit better as a name.

About Me

IMG_9965-2 My name is Sabrina Colonese-DiBello and I am a junior at Quinnipiac. I am double majoring in Advertising and Graphic Design. I hope that in my future career I will be able to combine both of my majors into my everyday life. Over the summer I was an intern at Edible Arrangements in the marketing department as a graphic designer. Throughout the summer my knowledge about both fields of marketing and graphic design increased dramatically and confirmed that I am going into a field I enjoy. I am excited to learn more about Motion Graphics throughout the semester and have my own video reel at the end!