UI Design, Trends, Patterns and User Experience - Academy of Design
•Télécharger en tant que PPTX, PDF•
15 j'aime•2,752 vues
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
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (18)
Similaire à UI Design, Trends, Patterns and User Experience - Academy of Design
Similaire à UI Design, Trends, Patterns and User Experience - Academy of Design (20)
Dernier
Dernier (20)
UI Design, Trends, Patterns and User Experience - Academy of Design
- 1. UI Design, Trends, Patterns and User Experience By Shiran Sanjeewa twitter : @shiran_sanjeewa
- 2. Who I am? Logo Designer / UX Consultant Art Director at Netstarter Founder of UX Colombo *Dad
- 3. Buzz Words Web Design, UI, HTML, PHP, jQuery, New Trends, SOCIAL MEDIA, Responsive, UX, Information Architecture
- 4. JOB TITLES Web Designer, UI Engineer, HTML & PHP Developer, jQuery Guru, SOCIAL MEDIA EXPERT, UX Designer, Information Architect
- 5. WHAT IS UI The user interface is the space where interaction between humans and machines occurs.
- 6. TRENDS
- 8. FLAT DESIGN
- 9. LONG SHADOWS
- 10. TOOLS OF THE TRADE SKETCHBOOKS. WIREFRAMING TOOLS. ADOBE CREATIVE SUITE. HTML AND PHP or ASP.net (other)
- 11. A NEW DIMENSION
- 12. Why a design has to be meaningful ?
- 13. DESIGN AND STYLE
- 14. WHY IS IT CALLED “USER” INTERFACE. not “the designers interface”
- 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. What sets Traditional Design and UI Design APART
- 17. Prioritize Prioritize your design tasks and make a workflow
- 18. Design Patterns
- 21. HANDLING DATA Search Tables Images (Galleries, Slideshows)
- 22. SOCIAL MEDIA Live Feeds, Activity Streams (Twitter, Facebook) Location Based Suggestions (4Square) Answers (Quora, Disqus)
- 24. STYLE GUIDES
- 25. STYLE GUIDES
- 26. STYLE GUIDES FOR THE WEB www.bbc.co.uk/gel
- 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. 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. 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. 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. 4. Project Scope Sometimes, project scope is obvious from the goals of a project.
- 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. 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.
- 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. 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. A CASE STUDY Facebook Home
- 46. HAVE YOU EVER CONSIDERED THAT YOU'RE POOPING WRONG?
- 48. 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.
- 50. THANK YOU !!!
Notes de l'éditeur
- 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