UI Design, Trends, Patterns and User

Experience

By Shiran Sanjeewa

twitter : @shiran_sanjeewa

Who I am?

Logo Designer / UX Consultant

Art Director at Netstarter

Founder of UX Colombo

*Dad

Buzz Words

Web Design, UI, HTML, PHP, jQuery, New Trends,

SOCIAL MEDIA, Responsive, UX, Information

Architecture

JOB TITLES

Web Designer, UI Engineer, HTML & PHP Developer,

jQuery Guru,

SOCIAL MEDIA EXPERT, UX Designer, Information

Architect

WHAT IS UI

The user interface is the space where interaction between

humans and machines occurs.

TRENDS

RESPONSIVE

“Break Points”

FLAT DESIGN

LONG SHADOWS

TOOLS OF THE TRADE

SKETCHBOOKS.

WIREFRAMING TOOLS.

ADOBE CREATIVE SUITE.

HTML AND PHP or ASP.net (other)

A NEW DIMENSION

Why a design has to be meaningful ?

DESIGN AND STYLE

WHY IS IT CALLED“USER” INTERFACE.

not “the designers interface”

Don’t Compromise

We need to think about who and what we’re designing for and ask ourselves why we’re applying a certain kind of aesthetic style to

our design.

What sets Traditional Design and UI Design APART

Prioritize

Prioritize your design tasks and make a workflow

Design Patterns

GETTING INPUT

Forms

Wizards

Feedback

NAVIGATION

Tabs

Menus

Pagination

Tag Cloud

HANDLING DATA

Search

Tables

Images (Galleries, Slideshows)

SOCIAL MEDIA

Live Feeds, Activity Streams (Twitter, Facebook)

Location Based Suggestions (4Square)

Answers (Quora, Disqus)

DESIGN PRACTICALLY

TECHNOLOGICAL BARRIERS

DEVELOPER MINDSET

STYLE GUIDES

STYLE GUIDES

STYLE GUIDES FOR THE WEB

www.bbc.co.uk/gel

GET YOUR DESIGN BRIEF

RIGHT

1. Objectives and Goals of the new design

2. Budget and Schedule

3. Target Audience

4. Scope of the Project

5. Available Materials/Needed Materials

6. Overall Style/Look

7. Any Definite “Do Not's”

1. Objectives and Goals of the new

design

The first thing you need to find out is what your client wants

from their new design. Is this a redesign or reworking of an

existing site, or is it a completely new design? Do they

already have solid ideas for what they want their site to do

or are their ideas more vague?

2. Budget and Schedule

Be realistic with your clients about both their budget

and schedule needs. If you know you can’t do

something within a certain budget or schedule, tell

them up front. 

3. Target Audience

If your clients aren’t sure who they want to reach

with their site, ask them who their ideal customer is.

I’m sure they have an idea of who buys their

products or uses their services.

4. Project Scope

Sometimes, project scope is obvious from the goals

of a project.

5. Available Materials

Looking at their existing promotional materials can

shed valuable insight into what their design taste is

and what their priorities are.

6. Overall Style

Getting a sense of what your client wants in terms of

style is vital. But they’re not always good at

expressing what their tastes are.

CREATINGEXPERIENCES

‘Experience’ is an episode, a chunk of

time that one goes through sights and

sounds, feelings and thoughts, motives

and actions closely knitted together,

stored in memory, labelled, relived and

communicated to others.

In short, experience-led design is more

likely to evoke an emotion of engagement

and consequently, a strong desire to

associate with your product, system or

service.

A CASE STUDY

Facebook Home

Improvise what’s already

there

HAVE YOU EVER CONSIDERED THAT YOU'RE POOPING

WRONG?

www.youtube.com/watch?v=pYcv6odWfTM

MEET SQUATTY POTTY

Final Thoughts

• Design Websites with user in mind

• Innovate new ways to deliver information, not to showcase just a masterpiece.

• Its not about how beautiful it is but how useful it is.

www.uxcolombo.org

THANK YOU !!!