Your SlideShare is downloading. ×
0
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
Arc...
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 ki...
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 M...
1. Objectives and Goals of the new design
The first thing you need to find out is what your client wants from
their new de...
2. Budget and Schedule
Be realistic with your clients about both their budget and
schedule needs. If you know you can’t do...
3. Target Audience
If your clients aren’t sure who they want to reach with their
site, ask them who their ideal customer i...
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 ta...
6. Overall Style
Getting a sense of what your client wants in terms of style is
vital. But they’re not always good at expr...
CREATING
EXPERIENCES
‘Experience’ is an episode, a chunk of time that
one goes through sights and sounds, feelings
and thoughts, motives and ac...
In short, experience-led design is more likely to
evoke an emotion of engagement and
consequently, a strong desire to asso...
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 mast...
www.uxcolombo.org
THANK YOU !!!
UI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of Design
Upcoming SlideShare
Loading in...5
×

UI Design, Trends, Patterns and User Experience - Academy of Design

1,702

Published on

This is the presentation I've done for Academy of Design in Colombo Sri Lanka (Learning Center for University of Northumbria) on 12th September 2013

Published in: Education, Technology, Business
7 Comments
13 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,702
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
63
Comments
7
Likes
13
Embeds 0
No embeds

No notes for slide
  • Being humanAs human beings we respond emotionally to everything around us – people, objects, posters, packaging or websites. We also respond in different ways to different kinds of aesthetic design and style. We care about style and aesthetics deeply, whether we realise it or not. Aesthetic design has the power to attract or repel. We often make decisions based purely on aesthetics and style – and don’t retailers the world over know it! We connect attitudes and strongly held beliefs to style. Individuals will proudly associate themselves with a certain style or aesthetic because it’s an expression of who they are. You know that old phrase, ‘Don’t judge a book by its cover’? Well, the problem is that people do, so it’s important we get the cover right.Much is made of how to structure web pages, how to create a logical information hierarchy, how to use layout and typography to clearly communicate with your users. It’s important, however, not to mistake clarity of information or legibility with getting your message across. Few users actually read websites word by word: it’s far more likely they’ll just scan the page. If the page is copy-heavy and nothing grabs their attention, they may well just move on. This is why it’s so important to create a visual experience that actually means something to the user.Meaningful designWhen we view a poster or website, we make split-second assessments and judgements of what is in front of us. Our first impressions of what a website does or who it is aimed at are provoked by the style and aesthetic of the website. For example, with clever use of colour, typography, graphic design and imagery we can communicate to users that an organisation is friendly, edgy, compassionate, fun or environmentally conscious.Using a certain aesthetic we can convey the personality of that organisation, target age ranges, different sexes or cultural groups, communicate brand attributes, and more. We can make our users feel like they’re part of something and, perhaps even more importantly, we can make new users want to be a part of something. And we can achieve all this before the user has read a single word.By establishing a website’s aesthetic and creating a meaningful visual language, a design is no longer just a random collection of pretty gradients that have been plucked out of thin air. There can be a logic behind the design decisions we make. So, before you slap another generic piece of ribbon or an ultra shiny icon into the top-left corner of your website, think about why you are doing it. If you can’t come up with a reason better than “I saw it on another website”, it’s probably a poor application of style.
  • There are a number of reasons why the web suffers from a lack meaningful design. Firstly, there are too many preconceptions of what a website should look like. It’s too easy for designers to borrow styles from other websites, thereby limiting the range of website designs we see on the web. Secondly, many web designers think of aesthetic design as of secondary importance, which shouldn’t be the case. Designing websites that are accessible and easy to use is, of course, very important but this is the very least a web designer should be delivering. Easy to use websites should come as standard – it’s equally important to create meaningful, compelling and beautiful experiences for everyone who uses our websites. The aesthetics of your site are part of the design, and to ignore this and play down the role of aesthetic design is just a wasted opportunity.
  • Easy to use, accessible websites and beautiful, meaningful aesthetics are not mutually exclusive. The key is to apply style and aesthetic design appropriately. 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. If you do this, there’s no reason why effective, functional design should come at the expense of jaw-dropping, meaningful aesthetics.Web designers need to understand the differences between functional design and aesthetic design but, even more importantly, they need to know how to make them work together. It’s combining these elements of design successfully that makes for the best web design in the world.
  • Traditional design gives designer the complete freedom to produce a design. There is no barrier nor dependence. There for designer is at a total control of the end result. Audience is to perceive the design in any form they wish. There is absolutely no obstruction. UI design however involves various limitations such as technology, platform and intended audience. In this context UI design limits freedom of the designer to some degree. A good UI designer foresee these limitations and produce the design which doesn’t get contaminated by these limitations. There by offering superior experience for intendant audience.
  • Its important that we understand what and why and who we make the design for, after all web design is system design. It needs Requirements Gathering.End User analysisInformation FlowPrototypingUsability TestingVisual Design
  • Browsers Render Designs DifferentlyDevelopers have limitations understanding limitations
  • Browsers Render Designs DifferentlyDevelopers have limitationsunderstanding limitations
  • Browsers Render Designs DifferentlyDevelopers have limitationsunderstanding limitations
  • Browsers Render Designs DifferentlyDevelopers have limitationsunderstanding limitations
  • A lot of clients feel like if they share their budget with you before you give them a quote, you’ll overcharge them or charge them the maximum amount for the least amount of money.
  • Who are your clients trying to reach? A website designed for teenagers is going to look and work a bit differently than one designed for corporate decision-makers. Ask your client who they want to appeal to with their website right from the beginning.
  • Not every project is as in-depth as every other. Some clients want a completely custom solution. Others just want you to adapt an existing template or other design. Some clients want an entire ecommerce site with a shopping cart, while others just want a brochure site that gives basic company information.
  • Does your client already have a logo, brochure, product photos, or other materials that would be useful to your design?If your client doesn’t have things like a logo or product photos, then you’ll likely want to either offer to design these things, or refer your client to someone who can (if that’s not in your normal scope of services).These kinds of add-ons can be valuable to both your client and to your bottom line.
  • Does your client already have a logo, brochure, product photos, or other materials that would be useful to your design?If your client doesn’t have things like a logo or product photos, then you’ll likely want to either offer to design these things, or refer your client to someone who can (if that’s not in your normal scope of services).These kinds of add-ons can be valuable to both your client and to your bottom line.
  • Now, as a designer by profession, I am less interested in creating definitions and more interested in making it happen. But before trying to make something happen, let us understand why is it really important today than ever before to create compelling experiences.In today’s world, the experience is the brand.Attention span is at an all-time low.positive experiences can be seen as largely universal in nature Experiences grow over time. 
  • An android interface made by iPhone users
  • An android interface made by iPhone users
  • An android interface made by iPhone users
  • An android interface madeby iPhone users
  • An android interface madeby iPhone users
  • An android interface madeby iPhone users
  • Transcript of "UI Design, Trends, Patterns and User Experience - Academy of Design"

    1. 1. UI Design, Trends, Patterns and User Experience By Shiran Sanjeewa twitter : @shiran_sanjeewa
    2. 2. Who I am? Logo Designer / UX Consultant Art Director at Netstarter Founder of UX Colombo *Dad
    3. 3. Buzz Words Web Design, UI, HTML, PHP, jQuery, New Trends, SOCIAL MEDIA, Responsive, UX, Information Architecture
    4. 4. JOB TITLES Web Designer, UI Engineer, HTML & PHP Developer, jQuery Guru, SOCIAL MEDIA EXPERT, UX Designer, Information Architect
    5. 5. WHAT IS UI The user interface is the space where interaction between humans and machines occurs.
    6. 6. TRENDS
    7. 7. RESPONSIVE “Break Points”
    8. 8. FLAT DESIGN
    9. 9. LONG SHADOWS
    10. 10. TOOLS OF THE TRADE SKETCHBOOKS. WIREFRAMING TOOLS. ADOBE CREATIVE SUITE. HTML AND PHP or ASP.net (other)
    11. 11. A NEW DIMENSION
    12. 12. Why a design has to be meaningful ?
    13. 13. DESIGN AND STYLE
    14. 14. WHY IS IT CALLED “USER” INTERFACE. not “the designers interface”
    15. 15. 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.
    16. 16. What sets Traditional Design and UI Design APART
    17. 17. Prioritize Prioritize your design tasks and make a workflow
    18. 18. Design Patterns
    19. 19. GETTING INPUT Forms Wizards Feedback
    20. 20. NAVIGATION Tabs Menus Pagination Tag Cloud
    21. 21. HANDLING DATA Search Tables Images (Galleries, Slideshows)
    22. 22. SOCIAL MEDIA Live Feeds, Activity Streams (Twitter, Facebook) Location Based Suggestions (4Square) Answers (Quora, Disqus)
    23. 23. DESIGN PRACTICALLY TECHNOLOGICAL BARRIERS DEVELOPER MINDSET
    24. 24. STYLE GUIDES
    25. 25. STYLE GUIDES
    26. 26. STYLE GUIDES FOR THE WEB www.bbc.co.uk/gel
    27. 27. GET YOUR DESIGN BRIEF RIGHT
    28. 28. 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”
    29. 29. 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?
    30. 30. 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.
    31. 31. 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.
    32. 32. 4. Project Scope Sometimes, project scope is obvious from the goals of a project.
    33. 33. 5. Available Materials Looking at their existing promotional materials can shed valuable insight into what their design taste is and what their priorities are.
    34. 34. 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.
    35. 35. CREATING EXPERIENCES
    36. 36. ‘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.
    37. 37. 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.
    38. 38. A CASE STUDY Facebook Home
    39. 39. Improvise what’s already there
    40. 40. HAVE YOU EVER CONSIDERED THAT YOU'RE POOPING WRONG?
    41. 41. www.youtube.com/watch?v=pYcv6odWfTM MEET SQUATTY POTTY
    42. 42. 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.
    43. 43. www.uxcolombo.org
    44. 44. THANK YOU !!!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×