design learnings

116
1) Upgrade myself in the latest trend and technology 2) Learning as my continuous process 3) Focused on Usability

Upload: quikr

Post on 13-Apr-2017

346 views

Category:

Self Improvement


0 download

TRANSCRIPT

Page 1: Design Learnings

1) Upgrade myself in the latest trend and technology 2) Learning as my continuous process 3) Focused on Usability

Page 2: Design Learnings

Flow

• Process Flow

• Mean by Branding

• First thing to start any branding

• Why

Page 3: Design Learnings

1) Upgrade myself in the latest trend and technology 2) Learning as my continuous process 3) Focused on Usability

Page 4: Design Learnings

Design

• Design has always been at the forefront of global trends, with products that combined function with creativity. User is in centre of the entire project in all cyclic design phases of UCD namely User Research, Design and Evaluation

• Good design is as little design as possible

• We are a multi-disciplined web & digital design agency with a deep passion for our craft and a sharp eye for detail. Working together with innovative entrepreneurs and businesses, we take a user-centered design approach to build scalable and stable product that make a change in a person’s day-to-day life. 

• represent the user in the context of their goals, needs and experience.

Page 5: Design Learnings

WIREFRAME & DETAIL WIREFRAME WITH ANIMATION

Page 6: Design Learnings

DESIGN TRANFORMATION

Page 7: Design Learnings

VISUAL DESIGN

Page 8: Design Learnings

KR – About MeExploring on Design Thinking on various products

A UI/UX Designer who understands the principles and methodology of usability and focus on Information Design exploring future experience and products.

Comes from Art background and HFI Certified professional, I have commenced my profession as an Animator and risen myself as UI/UX Designer.

My Role in a Design team starts with Research (Understanding the Product or Service and their challenges and emotions) and brings business values and enables profit in business.

Page 9: Design Learnings

KR - Learning'sI Approach my Design with 5 S- Strategy, Scope, Structure Skeleton and Surface.

I love to Design components for mobile and exploring various apps with understanding user needs and believe in understanding user personas and capture their data and not using our own fantasies.

And following the process of What, When, Where, Why, How and for whom the user following the UCD Methodology and following the usability principles.

UX Design, User Centred Design, Usability/Web UX, Information Architecture, UI Design, Agile, Mobile UX, wireframing, prototyping, Axure, Sketch, Omnigraffle.

Page 10: Design Learnings

Duties & Responsibilities:

·         As a designer in our Product team you'll be a key part of the idea generation process, & design interactions for applications (web & mobile), work closely with engineering, product/program management, design team and company leaders to successfully go from

early-stage product concepts to launch.·         You need to visualize detail level of design concepts from wireframes into creative visual design and prototypes (Lo-fi and hi-fi

prototyping skills)to communicate ideas for navigation and interactions.·         You’ll be given full ownership of your ideas, and so you’ll be required to create both beautiful mockups/wireframes/prototypes - and implement them using Twitter Responsive Bootstrap Framework.( HTML5/CSS3/ SASS). You don't need to be an expert, but you

need to be willing and eager to get your hands dirty in the code

Required Skills & Qualifications:

·         3 -8 years experience in designing user interfaces for web & Mobile Platforms & responsive Web UI.·         Bachelor Degree or equivalent professional design experience.

·         We think a formal educational qualification in the design or human-computer interaction field NOT important if you don’t have it’s not the end of the world. You actions will design will tell the right story.

·         Strong technical knowledge with an understanding of how digital products are built, particularly mobile, eg. Responsive, Adaptive, Mobile sites.

·         Expertise using workflow and wireframe tools such as Illustrator, OmniGraffle, Fireworks, InDesign or Visio, Photoshop, Fireworks, illustrator, Keynote, Dreamweaver, Coda, Sublime Text.

·         Proficiency in HTML5, CSS3, and Frameworks like Bootstrap.·         Understanding of different mobile screen densities such as ldpi, mdpi, hdpi, xhdpi, etc.

·         Strong design and communication skills, with an ability to rationalize and articulate your design thinking.An avid reader of Smashing magazine, UX Mag, A List Part, UX Booth, etc

Page 12: Design Learnings

Tools to consider: Google, User Testing, Heatmap.me, ClickTale, Usabilla,Appsee, Flurry

https://www.appsee.com/

Page 13: Design Learnings

UCD Process• Usability testing

• Direct user interviews

• Card sorting

• Creating IA flow diagram

• Creating a user task list

Page 14: Design Learnings

RuleI don’t care what you create or

how you create it, but it better be high quality.1) A deliverable which isn’t used to move the project

forward is a waste of time. ”2) Conversations are better than sketches, sketches are

better than prototype3) Say less. People can take away (at best) 3 things

from an hour long presentation. Make sure you focusso that the three things you want to be taken away

Page 15: Design Learnings

Creativity

Page 16: Design Learnings

Material Design

Page 17: Design Learnings

Icons

Page 18: Design Learnings

Icons

Page 19: Design Learnings

Creativity

Page 20: Design Learnings

CreativitySequence of WHY / WHAT

Deciding Icon Sizes

Deciding on Fonts

Page 21: Design Learnings

Golden Rule

Page 22: Design Learnings

Goals 

Research on the Required IndustrySelf Belief

Feeling DeservingMoving forward confidently

Continuous Learning

Page 23: Design Learnings

Android

Page 24: Design Learnings

NATIVENATIVE

Page 25: Design Learnings

HYBRID

Page 26: Design Learnings

HYBRID

Page 27: Design Learnings

Comparisons

Page 28: Design Learnings

Adaptive

Page 29: Design Learnings

Comparisons

ADAPTIVE

RESPONSIVE

•Mobile Usage•Different layout for different Devices•Less Flexible•New sizes will not work

• Mobile usage•Always changing•One layout that always change•Harder to make•Works on various Devices

NATIVE HYBRID

Page 30: Design Learnings

Android

Page 31: Design Learnings

Comparisons

Page 32: Design Learnings

Concept

Page 33: Design Learnings

Design Trend

Page 34: Design Learnings

Visualizing technique  

Relaxed and Free of DistractionEyes closed for Maximize effectiveness

Cleared Focus Image of the Result requiredEmpower with positive emotions

Let go demanding and insisting the visualizing manifest

Page 35: Design Learnings

Creativity

Page 36: Design Learnings

Designers References /Useful Links • http://graphicburger.com/mock-ups/

• http://www.freepik.com/

• http://www.awwwards.com/

• https://www.thebestdesigns.com/

• Subtraction

• https://gomockingbird.com/mockingbird/

• http://mashable.com/2010/07/15/wireframing-tools/

Page 37: Design Learnings

Retina Display Sizes

Page 38: Design Learnings

New Elements in HTML5

Page 39: Design Learnings

Icon Creation

• Iconfinder

• CharacterMap

Page 41: Design Learnings

Mobile App

http://www.mobileawesomeness.com/

Page 42: Design Learnings

Mock-up tools

MockAppsSoftwares utilities:

Droiddraw ( Android)Iplotz(iphone )

OmniGraffle(Mac)Balsamiq

Justinmind/Axure

Page 43: Design Learnings

Fonts/Colours

• https://typekit.com/fonts • http://fontdeck.com/ • http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-

contrast.html • http://www.fontspring.com/ http://snook.ca/technical/colour_contrast/colour.html

Page 44: Design Learnings

Responsive Design

• Design Size: 980X980 targeting 1024X768 which is standard10/2 Grid- 12 or 16 Column- Space 20 pixel

• Mobile Sizes: 640 X 1136

Mobile mindset. - Be focused. - Be unique. - Be charming. - Be considerate.

Page 45: Design Learnings

RETINA DISPLAY

Page 46: Design Learnings

RETINA DISPLAY

Page 47: Design Learnings

Retina Display Sizes

Page 48: Design Learnings

Responsive Design

• Design Size: 980X980 –canvas size; With targeting 1024X768 which is standard10/2 Grid- 12 or 16 Column- Space 10pixel

• Retina Display;

Mobile mindset. - Be focused. - Be unique. - Be charming. - Be considerate.http://designinfluences.com/fluid960gs/12/fluid/mootools/

http://webdesign.tutsplus.com/articles/using-the-960-grid-system-as-a-design-framework--webdesign-2036

Page 49: Design Learnings

STAR METHOD

S.T.A.R method. Mention a Specific situation that was similar to the scenario given to you The Tasks that needed to be done The Action you took The Results i.e. what happened

Page 50: Design Learnings

Refer

Website reference responsive: markboulton

Page 51: Design Learnings

SpecialtiesUser Experience:

Qualitative & Quantitative Research, Data gathering techniques such as User observation, surveys, questionnaires, Interviews, User Task Analysis, Contextual Inquiry, Goal & Task Analysis, Card Sort, Heuristic Evaluation, Storyboard, Wire framing, Prototyping, Usability Testing

Page 52: Design Learnings

SpecialtiesUser Experience:

Page 53: Design Learnings

Questionnaires• How do you typically approach design? Please mention top 5-6 things you have done to ensure the best UX design is built for

client’s business. • Response: Five S: Strategy for Need and Objective, Scope for Function and Content Requirement, Structure for Interaction and

information Architecture, Skeleton for Interface, navigation and Information and Surface for Interface with following the UCD Methodology and following the usability principles.

• What does Design Thinking mean to you? • Response: Research (Understanding the Product or Service and their challenges) and brings business values and

enables profit. • How would you carry out UCD process if you don't get to meet the users? • Response: With the help of User Survey Questionnaires, understanding personas and keeping myself in their shoes. • What was your specific motivation for applying for this position at Designs? • Response: After going through the company profile which has been leading the User experience initiative and focused on Design and

strategy thinking. • If you happen to join YUJ Designs, where do you see yourself over the next 2-3 years - what you really aspire to do (be realistic)? • Response: I would need to see myself to explore more into latest trend and technology in the market with new software’s and process. • What would you do to get there? • Response: Approach on future products and experience and be with the trend and treat learning as a continuous process. • Share with us your experience working with international clients (remotely or in person) • Response: I have been working remotely with US based Client interacting on calls. • What visa type do you have in hand? • As part of next round you are required to take a design test. Are you open for the challenge? • Response: Yes • Give us a link of your LinkedIn profile: • Response: http://kamleshroy.branded.me/ • 3 Things that are most important for my Next Position • Response: 1) Upgrade myself in the latest trend and technology 2) Learning as my continuous process 3) • 3 Weakness? Responsee:

Page 54: Design Learnings

Questionnaires• Who: (Who is involved?  Who will do the work and who will benefit?)

What: (What change will you make, what is the goal?  What will be different and better as a result?)Where: (Where will the activity take place?)When: (When will you start and what is the length of project?)Why: (Why are you doing the work, in other words, describe the NEED for the project.  This is one of the most important questions.)How: (How will you reach your goal?  What actions will you employ? Note:  this does NOT mean how will you pay for it.)How much: (How much money do you estimate you'll need?)

Page 55: Design Learnings

Questionaires• Latest Android Design change ? Response: • Adaptive and Responsive Difference? Response:

• Theme Campaign Response:

• Fonts Comparison Response:

• Hybrid/Web and Native App comparison Response: Web-Cloud Computing-Usage-10%/ Native- Local/Mobile App-Usage-80%

• Latest Operating System Response:

• Serif and San serif Fonts Response: Serif-Curves and Hooks(Times)San Serif- Arial, Verdana/Gotham/Gill sans

• Formats Used for Android/ios Response: .Apk File

Page 56: Design Learnings

Questionaires• Material Design? Response: • Android OS? iOS Operating Response: Jelly Bean/Ice cream Sandwich/Honeycomb/Gingerbread/Froyo/Kitkat/lollypop IOS: 7 is used most • Native Drawbacks? Response: Code can be reused/

Page 57: Design Learnings

Comparisons

ADAPTIVE

RESPONSIVE

•Mobile Usage•Different layout for different Devices•Less Flexible•New sizes will not work

• Mobile usage•Always changing•One layout that always change•Harder to make•Works on various Devices

NATIVE

HYBRID

Page 58: Design Learnings

Comparisons

Page 59: Design Learnings

ComparisonsNATIVE

HYBRID

Page 60: Design Learnings

HYBRID

Page 61: Design Learnings

Visual Hierarchy

Page 62: Design Learnings
Page 63: Design Learnings

Orientations

Page 64: Design Learnings

Orientations

Page 65: Design Learnings

BreakPoints

Page 66: Design Learnings
Page 67: Design Learnings
Page 68: Design Learnings
Page 69: Design Learnings

Examples

Page 70: Design Learnings

Native

Page 71: Design Learnings
Page 72: Design Learnings
Page 73: Design Learnings

Best-Practices-HYBRID

Page 74: Design Learnings
Page 75: Design Learnings
Page 76: Design Learnings
Page 77: Design Learnings

Infographics

Page 78: Design Learnings

Types of Charts

Column chart is to display the change in data over a period of time

0

3.5

7

10.5

14

Category 1 Category 2 Category 3 Category 4

Series 1Series 2Series 3

A bar chart comparing the values of items and not on time.

For example, you can use a bar chart to show the comparison of sales values of items for two years and a Column chart to show the weekly trend of sales for all the items.

Page 79: Design Learnings

Types of Charts

A Line chart Display the trend of data of various intervals of time. Two or more types of data at an equal interval of time.

A Pie chart A pie chart is used to display the size of an item. For example, 20 percent of the total sales in a company come from the sale of shampoos. This information can be displayed through a pie chart. A pie chart can be used to provide information about only one data series.

022.5

4567.5

90

1st Qtr 3rd Qtr

EastWestNorth

1st Qtr2nd Qtr3rd Qtr4th Qtr

Page 80: Design Learnings

Types of Charts

A Gantt Chart commonly used in project management, is one of the most popular and useful ways of showing activities (tasks or events) displayed against time.

Page 81: Design Learnings

Tools

Page 82: Design Learnings
Page 83: Design Learnings

Project LifeCycle

Page 84: Design Learnings

Gesture

Page 85: Design Learnings

Gesture

Page 86: Design Learnings

Divine Proportion

Page 87: Design Learnings

Golden Rule

Page 88: Design Learnings

Golden Rule

Page 89: Design Learnings

Golden Rule

http://3.7designs.co/blog/2010/10/how-to-design-using-the-fibonacci-sequence/

Page 90: Design Learnings

Golden Rule

Page 91: Design Learnings

Paper prototype

Page 92: Design Learnings

Paper prototype

Page 93: Design Learnings

Icons

Page 94: Design Learnings

Fonts

http://www.fontsquirrel.com/tools/webfont-generator

Page 95: Design Learnings

Fonts

Page 96: Design Learnings

Fonts

Page 97: Design Learnings
Page 98: Design Learnings
Page 99: Design Learnings
Page 100: Design Learnings
Page 101: Design Learnings

Gesture

Reason for change : Looking for Better opportunity to explore my skills.

Page 102: Design Learnings

Fonts

http://developer.android.com/design/style/typography.html

Page 103: Design Learnings
Page 104: Design Learnings

Best RWD

• http://www.dtelepathy.com/blog/design/responsive-design-great-ux

• http://www.dtelepathy.com/blog/inspiration/15-b2b-brands-that-tell-great-stories

• http://newrelic.com/

• Dribbble

• Smashing magazine

• http://www.thestable.com.au/tag/most-awarded-creative-director/

• http://www.campaignlive.co.uk/news/1164112/

• http://www.creativebloq.com/career/how-become-creative-director-11121363

Page 105: Design Learnings

Questionaries

• The Degree of Eye to look into various Objects

• The flow of eye while reading

• Window phone to bring the flat design-

• Usage of various design in various Devices due to their functionality of usage

• In which device designs are good- IOS/Android/Windows

• Greatest role Model

• Work alone or in teams?

• Top 20 creative directors

• makes people love the way things look to them.

Page 106: Design Learnings

Questionaries

• 10 Points for Creative : 1) Understand what makes people love the way things look to them. 2) Design is more than just making something look good.3) Develop at least 10 per cent of yourself as ego. You have to be able to sell 4) Defend the creative. Make sure the brief is what the brief should be – not necessarily what the client tells it is 5) Know the stuff and people will naturally listen.6) Spending a lot of time listening - really listening. 7) Writing blogs and speaking at conferences are both great ways of getting stuff out there and have the added benefit of helping you meet new people and sparking debate.8)Creating the right environment for the vibe in studio.9) Keeping an open eye with various digital disciplines to understand the wider creative world. 10) Be happy to be hated as it is far too easy to be liked.

Page 107: Design Learnings

Top 20 creative directors

• Nick Gill

• Robert Saville and Mark Waites

• Mark Anderson

Page 108: Design Learnings

creative directors

• Ability to show creative brilliance and the ability to deliver on it via a great understanding of the audience they are addressing, or a bloody single mindedness to make an idea happen.

• It means knowing how designers work; what makes them tick, knowing when they're stuck or need help. It's about trust. It's about providing ideas and above all it's about inspiration.

• A great creative director is someone who's able to build an environment and ethos where the very best ideas can be born and thrive.

• It means think about what makes people love the way things look to them. It's more than just making something look good, it's about making it look right for the selected audience. You're never going to please everybody. Stop trying to.

• a creative director is seeing work that either I have done or put people in charge of in action.

Page 109: Design Learnings

• Step One: Preplanning

• Preplanning can be broken up into three main areas: data analysis, user stories, and user flows. This is the point in which the UX designer identifies both who the current users are and the issues they may be facing. The UX designer explores current flows, red routes, and user personas to identify current issues before introducing new features and/or redesigning the user interface to resolve pain points in the app. When introducing new apps as MVP’s you wont have current users or beta testers and will need to gather this data through internal testing or controlled user testing.

• Data Analysis

• Data Analysis is a key first step and one of the most important steps to assure that new features and/or redesigns are in sync with what users want and need. This step includes but is not limited to:

• Google Analytics to understand traffic, where users are coming from, and page load times.

• Heat mapping to learn about user habits and dead spots in the design.

Page 110: Design Learnings

• If user testing is in the budget, it’s a great way to setup a controlled group and discover user habits.

• Adding behavior based surveys to get users opinions on the usability of the current system.

• Record screencasts of real users using the current app with software like Appsee.

• Use of tools like Flurry to collect behavior based analytics.

• There are a lot of ways to collect data, these are a few of my favorites. After collecting this data you will have a good foundation to build user stories and user flows off of.

• Tools to consider: Google, User Testing, Heatmap.me, ClickTale, Usabilla,Appsee, Flurry

• User Stories

• User stories are the critical next phase in the preplanning step. The most important part of creating user stories is to create user personas. User personas include characteristics such as age, location, internet usage, title, and personal interests, among other things. One of the best ways to develop personas is through phone interviews with current users or through app profiles, if possible. After this information is gathered, the UX designer can begin creating user stories and use cases. These contextualize the user’s needs and find knowledge gaps that could be creating frustrations for end users. With this information the UX designer can begin creating user flows, which walk through tasks, step-by-step, to create an accurate understanding of how users will be using the app.

• User Flows

• Now that the user data has been collected, the UX designer can begin creating user flows. This is really the first step in the design process. Once common workflows are mapped, red routes can be established. Every app has one or more red routes. These are the primary flows a user would take through the app to complete a task. These are important because they represent the primary focus of the app and should be prominent in the design. Note that although red routes are important, there is also a subset of tasks that need to be accounted for. Once the user flows are complete, they can be stacked together and joined with user stories to create real world user flows for different use cases. Taking account for all the users flows in a app can be a bit tedious but the more detail you account for in this phase the easier it will be to create your information architecture in the next.

• With the preplanning step complete, the UX designer now has the necessary information to make educated decisions on design patterns.

• Step Two: Exploration

• Step two consists of: sketching, wireframing, information architecture, and prototyping. At this point, the UX designer uses the data collected from preplanning and begins to explore how users will interact with the app. This consists of identifying the layout, developing visual hierarchy, and deciding what belongs in each view. This is also a good point to start working with prototypes to build an understanding of how features will react and animate when users interact with the app.

• Sketching

Page 111: Design Learnings

https://medium.com/@paulhershey/user-experience-for-product-designers-e9fa621ce3bc

Page 112: Design Learnings

https://www.appsee.com/

now what we mean when we speak about “Responsive Design”.Are great with presenting to and working with clients.

Are a creative thinker who is looking for something new.Have extensive agency experience working with large and complex client

organizations.Have a portfolio of successful interactive engagements.

Are skilled at wireframing, user flows, journey and experience maps.Have experience in creating prototypes, paper, digital or otherwise.

Want to be involved in your projects from start to finish.Absolute detail freak!

Like to challenge your clients (just not with your fists).Probably cannot pronounce our company name.

Page 113: Design Learnings

A candidate should be an advocate for the user at all stages of development, standing firm to represent the user in the context of their goals, needs and experience.

As the advocate for the user, a candidate should follow user-centred design (UCD) process methods from concept to launch. Ability to understand user goals and needs and the flow of tasks to achieve those goals.

One Question for you:are you really following User-Centred Design approach that is most of the time mentioned in Job Description? Please write your

feedback in comment section. Various stockholders are involved in designing products namely Users, Client, Designer, Developers and many others. Two of these stockholder namely Users and Client are most notable. The client could be a company or an individual who offers design

project. You might be wondering what is client-centred design. Client-Centred Design is an approach where we as User Experience consultants or company blindly follow the client's requirements in terms of user interface and design.

What is the difference between User-Centred Design approach and Client-Centred Design approach? What are the possible consequences of following these two methods?

Let's start with Client-Centred Design approach: Besides business requirements and goals, client does also provide design suggestions and requirement on behalf of users . These

user requirements might be or might not be from a strong user research study. UX professionals keep client at centre in design approach and believes that client do have better knowledge about user's

requirements. As client pays money for the project and asks UX professionals or companies to complete the project based on their

requirements. In this case, UX professionals or company sometimes interested more towards getting the project regardless users consideration.

User is mostly sidelined from the design cycle. User-Centred Design (UCD) approach:

User is in centre of the entire project in all cyclic design phases of UCD namely User Research, Design and Evaluation. Client passes business requirements and goals. Client do not intervene or influence the design process.

One of the success measures for Client and UX professionals is that user could achieve their goal and feel satisfy with a product. UX professionals or companies project UCD approach as User Driven Innovations.

All stockholders strongly believes in user's requirement without any personal influence. 3

Page 114: Design Learnings

Questionaries

1) Brief about

1) Define UI/UX

Tool for a Task Where UI is tool and UX is the feeling and emotion During using the ToolFocusing on NeedEasier to use Why we are Here?Creating Best Solution of User Needs

Page 115: Design Learnings

Questionaries

Page 116: Design Learnings

Questionaries

http://designscrazed.org/free-responsive-html5-css3-templates/