Here are some basic principles you should know about.

1. Color
Color vocabulary, fundamentals and the psychology of colors.
Principles of design: Color

2. Balance
Symmetry and assymetry.
Principles of design: Balance

3. Contrast
Using contrast to organize information, build hierarchy and create
focus.
Principles of design: contrast

4. Typography
Choosing fonts and creating readable text on the web.
10 Principles Of Readability And Web Typography

5. Consistency
The most important principle, creating intuitive and usable
designs starts here.
Design principle: Consistency

Here are some great do’s and don’ts to design a good UI.
2. Learn the creative UX process.
The next thing is to understand the creative process. UI/UX
design is a process of specific phases that every creative person
goes through.

The creative process

Divided into four distinct phases — Discover, Define, Develop and

Deliver — the Double Diamond is a simple visual map of the
design process.

Discover
This is the start of the project. Designers start researching, getting
inspired, and gathering ideas.

Define
This is the definition stage, where designers define an idea
extracted from the Discover phase. From this, a clear creative brief
is created.

Develop
This is where solutions or concepts are created, prototyped, tested
and iterated. This process of trial and error helps designers to
improve and refine their ideas.

Delivery
The final phase is the delivery stage, where the final project is
finalised, produced and launched.

D esigning a website that incorporates UX design elements is

becoming more in demand as businesses begin to understand the
importance of UX. Having useless bells and whistles on your
website, no longer makes it a good design. Creating the right
balance between an excellent user experience and the functionality
of the site for your business goals is paramount.
Before you can become a User Experience (UX) designer, you need
to understand the importance of UX, the reason it exists and what
do UX designers do.

What is User Experience (UX)

The term ‘UX design’ is used to refer to the approaches and
methods employed to make sure that a website is entirely tailored
and customized for its target market. If an online platform does
not appeal to a certain type of audience, it is likely to be quickly
forgotten.

At the core of UX is ensuring that users find value in what you are
providing to them. Peter Morville represents this through his User
Experience Honeycomb.
He notes that in order for there to be a meaningful and valuable
user experience, information must be:

 Useful: Your content should be original and fulfill a need

 Usable: Site must be easy to use
 Desirable: Image, identity, brand, and other design elements
are used to evoke emotion and appreciation
 Findable: Content needs to be navigable and locatable onsite
and offsite
 Accessible: Content needs to be accessible to people with
disabilities
 Credible: Users must trust and believe what you tell them

The effectiveness of an online platform is dependent on the UX. A

website must be easy to navigate, simple to operate, and offer a
user some kind of unique benefit or advantage.

UX is not UI
Image source: Erik Flowers
User Interface Design is not the same as User Experience.

UI is the end result of UX. UI is what people will see and touch. UI
is what results when effective UX is considered. If you have good
user interface design, it is a direct result of the research and
thoughtfulness you have placed within the UX process.

What Do UX Designers Do?

So what does a User Experience Designer actually do? Well,
there’s no typical day, however there is a grab bag of techniques
that many UX Designers rely on at various stages of a project:

Wireframes
Everyday UX

A wireframe is a rough guide for the layout of a website or app — is

the deliverable most famously associated with being a UX
Designer.

Once created by designers as a series of static images, these days

tools like Balsamiq Mockups and Axure RP make it
straightforward to evolve your wireframe into an interactive
prototype without writing any code.

While many UX Designers make a point that they are more than
just wireframe machines, it’s certainly true that many UX
Designers start with wireframes: creating a basic site layout is
something anyone can do, and the tools are easy to learn.

User Testing
Everyday UX

Sitting users in front of your website or app and asking them to

perform tasks you’ve planned for them while they think out loud is
the fundamental premise of user testing.

How many test participants you involve, how closely your test
participants match your actual users, and how many iterations of
testing you run are all decisions shaped by budget and time
constraints.

User testing is straightforward enough that anyone can — and

should — experience running one. Being in the same room while
someone struggles to use your product is a powerful trigger for
creating empathy with users — a common trait.
Personas
Everyday UX

A persona is a fictitious identity that reflects one of the user

groups for whom you are designing.

Personas need to be informed by research to be useful. It can be

tempting to put on your creative writing hat and invent details to
make them believable or interesting. However, the goal should be
to have your personas reflect patterns that you’ve identified in
your users (or prospective users).

There’s no shortcut for identifying these patterns — they come

from user research: conducting interviews, surveys, user testing,
contextual inquiry and other activities.

Scenarios and Storyboards

Everyday UX

A scenario is a narrative describing “a day in the life of” one of

your personas, including how your website or app fits into their
lives. If you’re familiar with writing user stories in an agile
environment, you’ll be comfortable writing scenarios — although
the focus here is on regular usage, not edge cases.

Depending on the audience, a storyboard may be a more

appropriate tool for capturing how, when, where and why
someone might use your product.

Inspired by the filmmaking industry, a storyboard is a visual

sequence of events used to capture a user’s interactions with a
product.
User Interface Design Basics
User Interface (UI) Design focuses on anticipating what users might need to do and
ensuring that the interface has elements that are easy to access, understand, and use to
facilitate those actions. UI brings together concepts from interaction design, visual design,
and information architecture.
Choosing Interface Elements
Users have become familiar with interface elements acting in a certain way, so try to be
consistent and predictable in your choices and their layout. Doing so will help with task
completion, efficiency, and satisfaction.
Interface elements include but are not limited to:

 Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list
boxes, toggles, date field
 Navigational Components: breadcrumb, slider, search field, pagination, slider, tags,
icons
 Informational Components: tooltips, icons, progress bar, notifications, message boxes,
modal windows
 Containers: accordion
There are times when multiple elements might be appropriate for displaying
content. When this happens, it’s important to consider the trade-offs. For example,
sometimes elements that can help save you space, put more of a burden on the user
mentally by forcing them to guess what is within the dropdown or what the element might
be.

Best Practices for Designing an Interface

Everything stems from knowing your users, including understanding their goals, skills,
preferences, and tendencies. Once you know about your user, make sure to consider the
following when designing your interface:

 Keep the interface simple. The best interfaces are almost invisible to the user. They
avoid unnecessary elements and are clear in the language they use on labels and in
messaging.
 Create consistency and use common UI elements. By using common elements in
your UI, users feel more comfortable and are able to get things done more quickly. It is
also important to create patterns in language, layout and design throughout the site to
 help facilitate efficiency. Once a user learns how to do something, they should be able to
transfer that skill to other parts of the site.
 Be purposeful in page layout. Consider the spatial relationships between items on the
page and structure the page based on importance. Careful placement of items can help
draw attention to the most important pieces of information and can aid scanning and
readability.
 Strategically use color and texture. You can direct attention toward or redirect
attention away from items using color, light, contrast, and texture to your advantage.
 Use typography to create hierarchy and clarity. Carefully consider how you use
typeface. Different sizes, fonts, and arrangement of the text to help increase scanability,
legibility and readability.
 Make sure that the system communicates what’s happening. Always inform your
users of location, actions, changes in state, or errors. The use of various UI elements to
communicate status and, if necessary, next steps can reduce frustration for your user.
 Think about the defaults. By carefully thinking about and anticipating the goals
people bring to your site, you can create defaults that reduce the burden on the
user. This becomes particularly important when it comes to form design where you
might have an opportunity to have some fields pre-chosen or filled out.