This design-centric course examines the broad question of what an interface is and what role a designer plays in creating a user interface. Learning how to design and articulate meaning using color, type, and imagery is essential to making interfaces function clearly and seamlessly. Through a series of lectures and visual exercises, you will focus on the many individual elements and components that make up the skillset of an interface designer. By the end of this course, you will be able to describe the key formal elements of clear, consistent, and intuitive UI design, and apply your learned skills to the design of a static screen-based interface.
This is the first course in the UI/UX Design Specialization, which brings a design-centric approach to user interface (UI) and user experience (UX) design, and offers practical, skill-based instruction centered around a visual communications perspective, rather than on one focused on marketing or programming alone.
These courses are ideal for anyone with some experience in graphic or visual design and who would like to build their skill set in UI or UX for app and web design. It would also be ideal for anyone with experience in front- or back-end web development or human-computer interaction and want to sharpen their visual design and analysis skills for UI or UX.

PS

Very useful course, Highly recommended for beginners who is going to kick start with UI/UX design. Very detailed content and explanation. Thanks for the such a wonderful course.

SG

Jun 24, 2019

Filled StarFilled StarFilled StarFilled StarFilled Star

This course will take you through the details of building a user friendly interface. I loved completing the assignments each week that finished a big project at the end.

From the lesson

Formal Elements of Interface Design

This week we are going to examine the various formal elements that make up an interface. We’ll start out with the larger questions of content, context and audience that frame any UI/UX project. In other words: What is it? Who is it for? And, where does it live? And we’ll look at the big picture of overall design direction, what is often referred to as “look and feel”. From there we’ll go into detail of how the basic components of how visual design works in the context of interface design: language, shape, color, imagery, typography, and icons. These areas will be the formal building blocks you will use to create the more complex visual structure of a screen-based user interface.

Taught By

Michael Worthington

Faculty, Program in Graphic Design

Transcript

In this section, we're going to look at some ideas around the use of typography in the user interface. Type can work in many different ways, as text that can be the content for your app or your website, it can act as part of the interface in terms of labels and buttons or it could be part of a branding system to give your app or website an identity. Let's start out by looking at Type as content. Why do we even read on screens anymore, when we have video and audio to get our information through? Well, the answer is that text does quite a few things that it's quite good at. It's language made physical. Text's very fast so it's very accessible, it's quite accurate in terms of trying to describe something, it's very economical in terms of how it works on a screen, but most importantly, it can represent what can't be depicted. If we think about how text translates to texting, we can see that the things that text is good at get amplified even more. Texting becomes faster, becomes more economical, it starts to use images, emojis in with the text itself. On screen, we start to change the very structure of language, as well as changing what we consider to be a typographic character. Far from being eclipsed by video, and audio, and images, text is becoming more of a prevalent means of communication on the screen, and if anything, it's absorbing imagery into its language. It's also starting to reconfigure itself, to alter itself to work in a new digital realm. Websites, blogs, texts, tweets, they're all fundamentally text-based still. That text has to have a visual form, it has to have a typographic representation. So, it becomes a design problem, it becomes part of an interface design. We don't really think about it so much, but text is still one of the main vehicles that we use for carrying knowledge, and for imparting and sharing that knowledge through digital media. So, Type has an integral role in terms of how it works as content, but it also has an integral role in terms of how it works as part of the interface, and this is because Type can do things that images and icons can't. So, we can ask ourselves the same question. Why do we need Type as part of an interface? Why don't we just have icons for everything? A lot of the answers to why we have Type as part of our interface are the same as why we use text for content. It's language made physical, and it has all the advantages of language, Type's very fast, it's accurate and clear meaning, and economical, and also, again, it can represent what can't be depicted. So, let's look at some examples. Type is fast to read. When we see a Stop sign, for instance, we know exactly what it means straight away. We barely even have to read the Type, we recognize the form of the Type, and it has a very accurate and clear meaning. There's no confusion there. There's no ambiguity at all. Stop only means one thing, "Stop." And Go only means one thing, "Go." There's absolutely no gray area there. There's no interpretation, and this can be very useful in terms of designing an interface. Language is very economical in terms of its meaning, not just a single word either. We can take a letter and we can use that to represent something. So, we know that this I stands in for information, for instance. But we also know that a P, part of the same alphabetic system, has a totally different meaning, and mean something else. There's a level of modularity and flexibility to language, we can add another letter to that P and have the meaning totally change, even though the form itself hasn't changed. In fact, the form of all three of these images is the same, but the meaning is very, very different. So, language has a great deal of flexibility in terms of how it works. It can also be useful in terms of interface design because it can work at greatly different scales. Sometimes, images don't have that same flexibility, and we end up making icons or symbols, often out of Type, but most importantly, Type can represent what can't be depicted. It takes a little moment to unpack what this statement really means, but think about, as an example, a word like "democracy." How would you represent this word visually? It would actually be quite difficult. There's not really a single iconic image to represent democracy, it's always going to be a little bit more ambiguous as an image, than it is when it's represented with language. Even the words surrounding democracy that might describe it, government, voting, elections, politics, when you turn those into the form of imagery, they still have a lot of overlap between how they might be read. So, words are great for the accurate representation of complex non-visual concepts like democracy, for instance, and this is great for an interface designer because quite often, we'll be trying to show things that are complex non-visual concepts, and these appear in a lot of different places, in menus, naming, buttons, instructions. In fact, Type is everywhere in our interface because it's still the fastest and most accurate way we have to communicate complex and specific ideas. Finally, let's look at Type as branding. Here, Type has a slightly different job to play. It's much less about it being content, and about it conveying what it actually says, and it's much more about connotation. In other words, what does the form of the Type look like? What kind of things does it suggest? This can be a way to create a sense of identity or individuality, and this can lead to a visual typographic brand, that can be really, really helpful, in terms of making your app or your website stand out and look different for everybody else or it can be a way of making it build sympathy to a certain kind of content. The combination of idiosyncratic or individual form, and the right kind of formal connotations, can lead to branding typographically, most often expressed as a logotype. So, if we look at some examples here, we could take some large companies and see what they look like without any form. Typographic form is a lot like clothes for words, the meaning is still there, but it's dressed up with a different surface, a different form. I'm willing to guess that it's hard for you to look at these words and not think about the intrinsic form that these logotypes are normally seen in. We're used to seeing Adidas look a certain way with it's round repetitive forms. We're use to seeing Nike as both a logotype, the typographic form, and as a mark or a logo. In other words, in this case, the swoosh, and we see those things separately, and recognize them, but we also see them together. The logotype and logo work together in harmony to form a single lockup. There are other systems that you can use to think about, to create an identity typographically. Some of them could be color dependent, for instance, Netflix, we see as being red and black, and when we look at the logotype, and then we look at a smaller version of it, a bug or a button, we can see that it's not the same letter form that's there, it's actually the color that is creating the continuity between the two different versions. You can take this idea of flexibility, or an extended system to an even greater extent, and think about a much more modular system that can be applied to a lot of different artifacts, or might even be a system where things change depending on the time of day, or the time of year. I think Google is a good example of a wider system, in terms of other new identities applied to a lot of different components, but also how they create a set of sympathetic imagery that's forever changing. The big takeaway here is that Type matters. If we turn these logotypes back to a more generic black and white form, we can see how much they lose, in terms of being recognizable, and in terms of their individual identity.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.