Aesthetics & Functionality

Loading...

Do curso por California Institute of the Arts

Visual Elements of User Interface Design

428 classificações

California Institute of the Arts

Visual Elements of User Interface Design

428 classificações

Curso 1 de 4 em Specialization UI / UX Design

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.

Na lição

What IS a user interface anyway?

In this first week we will look at some basic broad concepts and contexts for user interfaces, looking at examples both on and off-screen. We will look at basic principles of interaction theory, discuss the relationship between UI and UX, and examine the relationship between coding and designing. We will discuss the roles of functionality and aesthetics in interface design and outline a "form-first" philosophy to user interface design. This week will focus on background information and terminology and will give you the context and vocabulary necessary before you start making great interfaces!

Template vs Content7:36

Aesthetics & Functionality3:00

Conheça os instrutores

Michael Worthington
Faculty, Program in Graphic Design
School of Art

In this segment, we're going to look at aesthetics and functionality

and this correlates quite strongly to some of the things we've already looked at.

Internet conventions, which are really about

functionality of the user interface and aesthetics,

which are about the formal resolution of how

something looks which is often connected to the content.

We can think about this in a very simple way when

building a user interface in terms of how it

looks and how it works and

a user interface designer tends to work with both of these things together.

So we're going to pull these things apart to look at them separately.

So if we think about how to turn this into a button for instance,

we could make some design moves that are purely aesthetic.

To make this happen,

we might create a background shape behind the type.

So we've got a physical area that we know is interactive,

we might add some tech so we know what the button is going to do.

We might decide we want the button to look three dimensional to make it look physical.

We could change the typography,

we could change the color of the typography as well.

All of these things might make part of our interface look a certain

way but it might not necessarily change how it works.

If we look at how it works,

we could take the same shape but the how it works

part might be more about changing the status of the button.

So if a mouse hovers over it,

it might change color and when it's clicked,

it might change color again.

So how it works and how it looks are not mutually exclusive.

If we look at a more contemporary example of that,

and we take a much more reduced version of an interface,

a more minimal interface,

we could look at the difference between how things

look and how things work with a much more minimal language.

Here how it looks is actually very similar to how it works.

We don't need to try and create something that

physically looks like a button because we already

understand that everything on the screen is going to be

interactive due to interface conventions that we're already familiar with.

So how it looks and how it works become fused into one thing,

the aesthetics and the functionality become merged together as one interface element.

And in contemporary interface design,

this is a good way to think about when something is successful when both the aesthetics

and the functionality are working together in

a very harmonious way to form the interface.

To use some of the same language we've already looked at,

the aesthetic part of the interface design is about

giving the interface a sense of individuality,

where as the functional part of the interface design is about giving it some familiarity,

some ease of use.

And when you put these two things together it can be very powerful.

So the aesthetics of creating an individual feeling,

but the functionality of the interface,

the familiarity of it is making it easy to use as well.

So you have both functionality and visual interest and putting

these things together is really the key to making a successful user interface.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2019 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play