Due: April 8 (two days before class)
NOTE: Please only respond to the assigned Cullen Chapters if you DID NOT already write a response to them for #3, due 2/20.
Please add your response as a comment below. You can review guidelines for the responses here.
In Alina Archipova’s article on mobile typography, she does a great job of simply breaking down the key elements of how to create an effective mobile design that is both visually appealing but also functional. One aspect she touches on that I found extremely helpful was the levels of hierarchy. She explains that, “Web design usually contains three levels of copy content which include such elements as headings, sub headers, body copy, CTA buttons, and captions. However, small mobile screens don’t provide enough space for three levels, so designers apply only two”. That being said, the designer must be even more concise with the information that is being conveyed. As she explains, minimalism is key in mobile design. You as a designer have less space to work with and must utilize it without being overwhelming. That lead into another key point she brings up. She explains the importance of white space. As any designer knows, white space in design is super important in creating a clean and effective design, but this idea is even more important in mobile design. You have less space to work with in the first space forcing you to be even more concise and be more conscious of white space.
In the example below, they do a great job of using text to create a hierarchy without being overwhelming. They also use just enough white space to give the design room to breathe without compromising necessary elements. This is a great example of some things discussed in the article and great mobile design overall.
https://i.imgur.com/Ogu7zEy.png
In terms of user experience on mobile devices, one of the most important things (personally) is white space. I find it extremely hard to navigate apps when there is too much bombarding my eyes, in terms of colors, buttons, links, etc. Arhipova talks about designers needing to “give elements space to breathe” which brings “relief to users’ eyes and mind”. This sense of relief can cause a user to interact longer with your interface. In the end, every designer wants this for their app: a longer and more pleasant user experience.
This idea of tapworthy content is especially important when thinking about the visual element of an app. A good example of this is the difference between Yelp and Google on a mobile application. The readability of Google is much cleaner and evident where to follow and what to click. They have built their review platform within their search engine, which allows for familiarity with navigation. Their call-to-action buttons (call, directions, share, website) are obvious and important to the businesses.
However, Yelp doesn’t provide as easy of a user experience. The red, even though it is to their brand standards, is harsh on the eye and makes the app seem clunky. In terms of tapworthy items, their call-to-action buttons are not arranged in a hierarchy that is designed for a potential customer. Rather, it is designed around a customer that already had an experience, Instead of directions or phone number being at the top, it encourages you to check in or review the business.
https://i.imgur.com/UAMEICS.png
https://www.androidapps.com/wp-content/uploads/2010/08/yelp.jpg
After reading Cullen’s chapter 5 “Structure and organization,” chapter 6 “The interaction of visual elements,” and chapter 8 “Design analysis”, I feel as if I have a better understanding of the process in which design truly uses to attract its audience. Chapter 8 “Design analysis”, stood out to me the most. In this chapter, Cullen discusses the “final stage of the design process” (124). Personally, I feel this is in fact the most important and also most overlooked aspect in the design process. While it makes perfect sense to do this, I have never gone back to revise and edit my design projects. Cullen goes on to express ways in which a furthering of analysis can broaden the way we think of our works, “The design can be analyzed further by carefully checking the interdependence of the parts to the whole” (124). My “whole” serves as my portfolio and the “players” that Cullen then brings up, are the different projects we have completed during the semesters. In one of the bottom examples, “Distinct layouts for each month exist, yet all fit into a unified design scheme. Consistency is evident, as seen in the use of color” (124). In addition, Cullen includes questions that help analyze one’s work in specific to the design it encompasses. One question from the section stood out to me as important for every designer and design, “Is the design engaging, distinctive, and informative?” (127). No matter what, designs need to fulfill the purpose it is made for. Take the Coca-Cola logo for example, the typography is engaging and interesting, it is distinctive from any of the other soda brands and it is informative because it gives us the name right away. The New York Times Magazine is a great example of a consistent layout design while also staying relevant and unique. By keeping the New York Times newspaper template, the NYT Magazine has established itself as a separate but equal partner in the brand.
https://indiereader.com/wp-content/uploads/2013/03/nyt-one-page.jpg
https://images-na.ssl-images-amazon.com/images/I/611AGMH5ATL._SY445_.jpg
https://www.rewindandcapture.com/wp-content/uploads/2018/03/Coca-Cola-logo-history.jpg
One of my biggest pet peeves is when a design does not transfer well to a mobile device. Archipova’s article shows us the important steps it takes to create an effective mobile design, specifically made for a small screen and touch. The most important takeaway I have from the article is remembering the sense of hierarchy when it comes to design. If a design isn’t made up of headers, subheaders, body etc. it truly lacks flow and makes it difficult for the user to have a successful experience on their mobile app. However, while it is important to create a design that has order and a sense of purpose, it shouldn’t be overwhelming for the viewer either. Archipova brings up the idea of minimalism, which is something I really appreciate when it comes to a mobile design and typography in general. Having the proper amount of whitespace brings a sense of professionalism, while also being clean and successful. However, finding that proper balance is up to us as the designer, but it is important we remember things like the rule of hierarchy, especially when it comes to mobile design.
https://dribbble.com/shots/2943998-My-Life-App-Design-Complete/attachments/611550
The Tubik Blog article on basic screen design was insightful for me as a design student. As a student working on my portfolio, it is very easy for me to make edits to my site on my computer and totally neglect the mobile side of things. While the article is primarily about mobile applications, the content was helpful for designing a portfolio site as well. Users want user-friendly and that is what every site should be. Thankfully, I, too, am a user so I can understand what I would need to do to my own site to make it user-friendly and accessible. The author writes, “Nowadays, loads of mobile applications appear, so they bring new types of screen for fresh requirements users bring out. Designers should be ready to take this challenge and always follow innovations.” As a design student, this stands true for personal portfolios as well. Employers are looking at hundreds of portfolios and it is crucial that mine stands out among the rest.
https://assets.hongkiat.com/uploads/responsive-portfolios-for-inspiration/janmense.jpg
https://assets.hongkiat.com/uploads/responsive-portfolios-for-inspiration/ryjohnson.jpg
In Josh Clark’s article, he discusses designing apps, and what makes it different than other types of design. There are almost a billion apps out there, and unlike vector graphics, posters, labels, or other designs, designing for apps has a whole new set of criteria. Not only are you in a highly competitive environment, you are also creating something for an audience that expects information to be direct, quick, and the usage of the app to be as simple and effective as possible. Apple’s saying is “there’s an app for everything” so with that being said, your app has to be either very unique and serve a purpose that other apps on the market don’t yet, or be the most visually pleasing and user friendly out of other apps in it’s category. One of my favorite taglines/ slogans I’ve ever seen for an app is from the online dating app Hinge. Their slogan goes against most business models, which is to be a useful app someone uses daily. However Hinge’s tagline is “The app designed to be deleted”. This is so clever because since it’s a dating app, if you end up deleting it, that means that app successfully worked for you.
When developing an app, first start with sketches and then you can create your vision using adobe software such an Photoshop and InDesign. Smashing magazine has a very helpful tutorial on how to display your app’s various screens using multiple artboards and layouts. Tublik’s blog has an article on the different types of screens you could be designing for, such as home and menu screens, login screens, or even social network feeds. The screenshot below is an app designed by Tubik and is a water tracking app. The colors match the rhetoric of the app, and the functions of tracking the plant’s water levels, humidity, etc, are seamlessly integrated with the design and very user friendly.
https://cdn-images-1.medium.com/max/1600/0*CvTf5mXNI7C476la.png
I am such a sucker for app design. The concept of creating art that is not only abstractly meaningful or aesthetically pleasing but functional is one brimming with possibilities. However, with those possibilities comes a challenge in appealing to not one but three broad layers of interaction. It’s the design of having your cake and eating it too in order to stay competitive.
Quite frankly, I love that challenge. It’s imbuing everyday interactions with a certain level of quality, assuming one can design something as unassuming but popular as a mobile app well. And when I mean “unassuming,” I mean it’s something you hardly have to think about. Good design is effortless, intuitive. It’s why clear typography is so important, or visual hierarchy. If a user is focusing on how to use the app, there is less space or time to focus on the content that the app is providing.
In this and many other ways, mobile app design is like the first quote from Cullen’s chapter: “The white surface of paper is taken to be ’empty,’ an inactive surface, despite visible structures that are present. With the first appearance of a dot, a line, the empty surface is activated” (74). There are more “dots” and “lines” (e.g. buttons, links, clickable icons) on an app than any other medium, so the white space simultaneously becomes a “breathing space” for the user, and a possible interactive element itself (just think of scrolling, or zooming in and out).
There is a lot to learn from visual hierarchy, because how a user perceives the app on multiple levels is ultimately what determines how well the app was designed.
This video did a really great analysis on the pros/cons of 3D versus 2D button designs. https://www.youtube.com/watch?v=TfzEPtLPnP4
Starbucks is pretty popular, isn’t it? Could you imagine having a mobile app like this to complement customers’ experiences? https://mir-s3-cdn-cf.behance.net/project_modules/max_3840/f8908273284301.5c2846d214b96.gif
Full Design Here: https://www.behance.net/gallery/73284301/Starbucks-UIUX-Redesign