Estudiante: Daniel Villatoro Cantarero 2018155978

Visual Elements of User Interface Design

1 Week
What is a User Interface?
The user is the viewer or the person interacting with the content and the interface is the
way that the user gets to that content.

The Relationship Between UI and UX

UI: How it looks (interface) is the visual design.
UX: How it feels (experience) is the non-visual design.

Roles in UI/UX
UI:
• Works with front-end development
• Visual elements
• Creativity
UX:
• Functional design
• Data
• Analytics

A Brief Historical Overview of Interface Design

starting in the 1970s with the advent of the calculator.

Interface Conventions
Real world knowledge is based on analog models.
Learned behavior If real world knowledge is based on analog models, then perhaps you can
say learned behavior is based on digital models.
Cause and effect is about action and reaction.
Consistency is about applying a systematic logic to the way interfaces look and function, so
they remain familiar to a user.
Seamlessness is about ensuring that the action and reaction are closely linked.
Immediate intuition We’ve been conditioned that in order to interact with an interface we
need to touch it in some way.
Undo/redo gives the user peace of mind that their actions are reversible.
 Estudiante: Daniel Villatoro Cantarero 2018155978

Template vs Content
Template is different of content.
The template doesn't take content into account. The template is content agnostic and while
this offers a level of functionality.

Aesthetics & Functionality

Basically, the aesthetics is how it looks, and the functionality is how it works.

2 Week
Look and Feel
Is to think about the style and the mood of a project. Look style frames, think about what it
would be like if a single slice of this project was to be finished and that's often done in
motion projects.

Language as a design tool

Is thinking about what does it look like and what does it feel like? Is a visual way, using
images and using icons, typography, color palette, and now we can think a little bit more
about how this might work with words.

Color and Shape

Color is quite relative in a lot of ways and quite subjective. help create an atmosphere, and a
mood, as well as a function.
Use a a certain kind of shape can have a big effect on the interface.

Imagenery
The most common use of imagery is as content in your app or on your website, but we can
also use imagery to create a mood, or we can use imagery as part of our navigation, or part
of our interface system.

Typography
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.

Icons
Every app has to have a visual representation of what that app is in a small and condensed
form where the user can recognize it. The essential essence of the icon has stayed the same.
 Estudiante: Daniel Villatoro Cantarero 2018155978

3 Week
Functionality
The principles of good user interface design include ease of use and understanding.

Speed and Style

Is a notion that by reducing the graphic content of an interface and trimming it down to just
its bare essentials, you can create a much faster level of accessibility for the user to get to
the content. And this is the strategy that we see in contemporary interface design.

Composition and Structure

Is about how to shape content specific design here. So these rules won't apply for every
single app or website you design.

Pattern Libraries
In graphic design terms, a pattern library is similar to a style guide or identity manual but
applied to a website. It is basically a document outlining the overarching design for the
website (or app) as well as all the elements within it.

Buttons
A button is just a self-contained object that is interactive, that you can click on or interact
with, but it only works as a button if the user knows that it's a button, in other words if it's
not just a shape.

Not Buttons
If we don't use buttons. Well, we have other systems in place, menus, links, fields. On all of
these different systems have to be designed by a UI designer. They're all simple fast
functional means of interaction.

States and Changes

A button has to have different states so it can convey to the user the fact that it's being
interacted with. So, first of all, a button can let the user know it's a button by having some
kind of state change. So, the user knows it's not just a static element, it's an interactive
element. (Is not only for buttons)
 Estudiante: Daniel Villatoro Cantarero 2018155978

4 Week
Invisible Complexity: Making a Whole from Many Parts
We'll be looking at both conceptual strategies and design strategies, and figuring out what
kind of information is going to be useful when we try and make a whole interface, out of
these various pieces that we've been looking at.

Hierarchy of Content
It's important to maintain that hierarchy and keep sight of your goals and your intention in
making an app or a website in the first place. As you add functionality, and more options to
your Apple website, you don't want to lose sight of what the goal was in the first place.

Conventions and Expectations

Our screens are often divided up in very conventional ways and as user interface designers
we have to figure out how to use these conventions. But also create some kind of variables
within them. In terms of scale and visual attention, our content area is normally the most
important.

Structure and Grids

This meant having a lot of single tasks on multiple screens for a mobile device, a lot of
multiple tasks on a single screen for say a website on a computer screen. This is going to
influence how we think about structure and what kind of grids we might use for these two
different devices.

Platforms and Screen Sizes

Mobile device and a computer screen but we've been ignoring some very important things,
like the fact that one is often vertical and the other is always horizontal but most
importantly that they operate at radically different scales. If I shrink my phone down to the
scale of my computer screen you can see just quite what a difference that is. And while this
scale is accurate in terms of physical inches.

Putting it All Together: Slice 'n' Dice

The programmer might cut these pieces up and put them into a working prototype. So far,
in our classes, we've been thinking about interactivity, but we haven't really been designing
interactively. If anything, we've been designing inactively or statically.

Comentario:
Fue un curso muy interesante, aprendí muchas cosas sobre el buen diseño gráfico de
aplicaciones o páginas webs, además la importancia de mantener la consistencia en el buen
diseño y también el efecto en que cause en el usuario al momento de utilizar la app o página
web.