Chianote

  • Home
  • Design
  • Travel
  • Motivation
  • Succes of Life

Thursday, March 16, 2017

Need-to-Know Skills of UI Design for Mobile Devices

 chianote     1:20 AM     Design, design tools & apps, designer, interaction design guide, mobile ui design, rapid prototyping, UI, ui design, UX, ux design     1 comment   

Have you meet some problems on user interface design for the mobile device? For example, small mobile screens? Bad user experience? In this article, I will cover some things you can do to learn practical user interface design (UI design).
1. UI design principle
Don’t think the practical UI design principle does not apply to small mobile screens.
Five elements of UI design you should take into consideration:
1). Goal-driven Design. This allows you to customize the app working process and meet requirements for target users.
2). Usability. It may look empty, but you have to guarantee your application is usable. Users don’t like to download a complex app from App Store. Usability makes your product useful and hopeful.
3). Affordance & Signifiers. The signifier is an implication of affordance.For example, underlined blue text reminds you it’s a hyperlink, and it can link to other pages when you click it. With correct signifier, users can easily understand UI element.
4). Learn-ability. You want users to instinctively know the function of your interface.Familiar pattern can let users easily adapt to the new app.
5). Feedback & Response Time. Feedback could help users to know whether the task has been completed or http://not.It can be a very simple hum, or complex modal window that keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions. Please make sure your prompt be friendly, humane, and can be responded within the stipulated time.
2.User Objectives
Screen size is not the only constraint on mobile UI design, but also users themselves and their habits. Thus, the first step is to study the user habits when you decide to create an app for a target group.
Three basic UX design strategies:
1). Character. The fiction character based on your target user group could help you to understand how to run your app well.
2). User scenario can help to stimulate the user behavior. That could inspire you to understand how the final effect will look like as their expectation to achieve. Ultimately, you can design the most suitable UI for them.
3). Experience the design progress. You may see all the conditions on a single interaction that will happen in each step. Particularly user emotion and surrounding environment could be captured carefully on this progress.
3. Prototyping is necessary
Design and research can be progressed simultaneously. For example, you can quickly draw out the UI design outline based on what you have learned. Then create a simple prototype before finalized, by paper and pen or by professional rapid prototyping tools such as Mockplus. So that we could begin to understand users engage content and behavior during this process. With a detailed outline, the detailed information about layout and structure will be integrated into the design progress. At last, rapid prototyping could help on testing your apps and also user thinking.
4. Convenient interaction
There are two common interaction design patterns:
1). Touch gesture. The definition of touch device is determined by the gestures like touch, slide, double-click, pinch and zoom. These gestures are becoming the second natural response of users, a kind of subconscious action .
2). Animation. Users will be more concentrated on user interfaces when you add animations to your design.There is an obvious visual discrepancy between the disappear and slide-out of elements. The combination of touch gesture and animation could provide users a deeper and more authentic experience about the mobile apps.
5. Fat thumb interaction
“A new study published by Saul Greenberg’s lab at the University of Calgary proposes that the fatness of your thumb can be used for new user interaction possibilities on your smart phone and other touch devices like the Kindle Fire.”
Comparing with the mouse, your finger pixel width is much wider. So, you should pay attention to finger-friendly design. In particular, you have to leave enough space for the user fingertip. If your buttons are too small or too tight, the user can not operate accurately. Then they will be frustrated and give up your apps.
A tip for thumb interaction design. What you should take into the consideration is that the pixel width of your finger. Let us suppose that we all have fat fingers. Okay, that’s not true. But you should know that a touch target that’s 45–57 pixels wide allows the user’s finger to fit snugly inside the target. This converts to 45–57 pixels, which is wider than what most mobile guidelines suggest. Apple has suggested a touch target size of 44×44 pixels. But that’s does not always apply to your design, what you should keep in mind is how to give consideration to finger-friendly design and finger interactions.
6. Read books, magazines & blogs
Lots of tips on how to learn UI/UX design are available on the Internet, learning to absorb skills and experiences from books, magazines & blogs is also a good method for you to improve yourself.
I hope this article could help you to get some idea of how to go about getting some practical experience in UI/UX design.
More Article You May Like:
The 7 Best Prototyping Tools for UI and UX Designers in 2016
Tips on How to Learn UI/UX Design for Beginners
UX vs UI vs IA vs IxD : 4 Confusing Digital Design Terms Defined
Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

Saturday, March 11, 2017

Tips on How to Learn UI/UX Design for Beginners

 chianote     8:49 AM     Design, design tools & apps, designer, interaction design guide, UI, UX, ux design, wireframing apps     1 comment   


The first thing to understand about UX is that it is not simply an exercise in creating a prototype. Many people approach UX entirely focused on prototype creation, but creating a prototype is only a narrow subset of what the discipline of UX has to offer. In this article, I’ll be covering the three cornerstones of becoming and being a UX professional: learning UX, practicing UX design, and cultivating your own UX connection.


Part I. Tips on Learning UX

1. A list of classic books and resources for beginners: Read my list of UX resources for beginners

2. The latest books for designers: Great books for designers to read in 2016
Free UX & UI Books That Worth Your Reading

3. Listen to useful podcasts: my blog post about my favorite UX podcasts

4. A list of UX Design Blogs And Resources You Should Follow, some collections such as UX — UI Readings on Medium, and Inspiration and helpful links for User Experience Designers

5. Great tools for reference: Adobe, Photoshop, Illustrator, and some other prototyping tools such as Axure, Justinmind,Mockplus etc. What kind of tool to use is depends. BY the way, you can learn how to use the tools through these 3 websites:Design tuts, Lynda, and Skillshare.


Part II. Tips on Practicing UX Design

It’s absurd to think UX is equal to create prototypes. You have to be clear about what is UX design and do practice to improve. Anyway, practice makes perfect.

Process and key points of UX design:

1. Analyze the Hot APP & Web

1). Who are the target customers, and their characteristics.

2). What are the core functions, and prioritize functionalities by usage scenarios.

3). Analyze the interactive mode of every usage scenario, and make a judgment that whether it is reasonable and convenient for users to meet their needs.

4.) Analyze the merit and demerit of the target product and it’s competitive products. Then, you know how to make improvements.

2. Imitation Is a Good Method to Practice

There are lots of great resource for beginners to imitate on Dribble and Behance, but you have to be aware of the distinguish between imitation and copy. Remarkably, in the process of imitation, you should keep in mind to acquaint and absorb the merits of the great interactive modes. Above all, be a creative designer.

3. Try to Create a Product By Yourself

After a series of preparations, you can try to create an app by yourself completely, from the very beginning of market research, customers partition, and usage scenarios. A portfolio is suggested by the experienced designers, that will be quite helpful when you apply for a new job. No matter where you post your work, on Dribble or Behance, that’s quite beneficial.

Part III. Cultivate Your UX Connections


To be a professional UX designer, undoubtedly, it’s essential to expand your own UX connections. In the informational era, that’s quite easy to archive through the internet.

1. A bound of professional groups and websites are available on the social network, you can join to interact with the senior designers. They are active to share resources and communicate with others on Facebook and LinkedIn groups.

2. Follow some senior designers on Dribble and Behance, and try to keep in touch with them. Meanwhile, keep your own blogs updating, then people could see your enthusiasm on design.

3. Join the meetup groups and seminars to meet experts.

--------------------------------------------------------------------------------------------------------------------------
You may also interested in:
What UI/UX Designers Should Know About Prototyping Tool
Why Product Thinking is the next big thing in UX Design
Tips on How to Create an Impressive Design
Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

Basic UI/UX Design Concept Difference Between Wireframe & Prototype

 chianote     7:43 AM     Design, design tools & apps, designer, interaction design guide, mockup apps, UI, UX, wireframing apps     No comments   

The terms of ‘wireframe’ and ‘prototype’ are always get confused by designers, despite the experienced designer, possibly due to the misunderstanding or some other reasons. Actually, the concept between the two terms is quite obvious and different. Now, let’s distinguish the two terms clearly.

What is a Wireframe?

Wireframe is a low fidelity layout of the design which has 3 simple but direct targets:

1. Presents the main information group
2. Draw the outline of structure and layout
3. Vision and description of the user interface

It will be your product’s main structure after you created a wireframe correctly. Just like the blueprint of a building, it describes details clearly and specifically.

Visual features of wireframe

Wireframe exists very obvious visual limitations. In general, designers only need to use lines, boxes, and gray color (different grayscale indicates the different level) to complete.

Simple vector wireframe

The content of a simple wireframe should include pictures, video, and text etc. Thus, the omitted will be replaced by a placeholder, picture be instead by a shaded, and text will be replaced by some symbolic words according to the text layout.

Advantage of wireframe

The building of wireframe is fast and cheap, especially if you use these prototyping tools such as UXPin, Mockplus, Balsamiq, and Axure. Of course, you should use these tools to do it at the very beginning.

Compared with a complete and detailed high fidelity wireframe, gathering feedback is much more important. Why? Because people pay more attention to software functionality, information architecture, user experience, user interaction flowchart, and it’s usability, rather than considering the aesthetic characteristics of these elements. Meanwhile, in this case, you can easily modify it according to demand, but not need to adjust coding and graphic editing.

Interactive wireframe


Sometimes, designers prefer to improve the fidelity of wireframes to enhance the importance of user interface at some aspects and display the rationality of interaction between fast test and the visual elements. Program to address these problems properly is using interactive wireframe, also known as the clickable wireframe.

If you want to create such a complicated wireframe, then you need UXPin, which is a tool for wireframing and prototyping design. Interactive prototyping may be the best presentation to developing team and clients. When you came across the problem that “what it will happen when I clicking this button?’’, you just need to click and show to your clients how it works on the interactive prototyping. Indeed, it’s quite impressive and direct.

Show wireframe cautiously

You must be cautious about the guy who is totally a layman when you need to present your wireframe to him. He may be your client, also may be a non-technical manager took part in the cooperation. But he does not know the truth that the wireframe and the final product may seem unrelated. So, he may not understand the intrinsic link and operation mode between them. Thus, you need to figure out a proper decision whether you need to present and how.

This is an app user operation flow chart sketched by Fernando Guillen. Of course, it’s undoubtedly the early design version.

A wireframe is the most important part of a design. When you saw this flow chart, you’ll understand why it’s time-consuming to explain what is called wireframe and why we need to use wireframe. Or, you just skip this step.

Prototype

The requirement of a prototype is higher than wireframe/interactive wireframe, it must be a high fidelity prototype which is interactive and fit the final user interface as much as possible.

The target of prototypes is quite obvious: to simulate the interaction between user and interface as realistically as possible. When a button is pressed, the corresponding operation must be carried out, and the corresponding pages must appear, try the best to simulate a full product experience.

Visual features of prototype


Undoubtedly, the prototype must include the aesthetic features of a product that should have, and try to fit the final version. Basically, it’s a skin of a product, no HTML/CSS/JS involved, and not necessary to consider the server and database.

Advantage of prototype

Why it’s so important? Because prototype is usually used for users to test product. Prototype test at the very early stage can save a lot of developing cost and time. So that it won’t waste the effort of back-end product architecture due to the unreasonable interactive interface. So, prototype is a perfect progress to test product for designers and developers.

Besides, providing prototypes with users to collect feedback, that’s benefit to have an insight into all the details of your product, and inspire the whole team. Many of the prototyping tools can build prototypes quickly and efficiently, but no coding needed.

Design flow

After you have insight into the essence of design and known the difference between wireframe and prototype, you are standing in front of the user experience design world.

If you can concrete the series of product design into a cohesive and effective work flow, amazing thins will happen.

Tips

Try to use editable and reusable elements when make wireframe. In that case, you just continue to refine the elements to complete prototypes based on wireframes.

When you make wireframes, try to gather thoughts and opinions from your team and clients, and try to reflected them on wireframe designs.
Use your most handy tool.

UXPin

UXPin has built more than 900 kinds of different UI elements for you to create wireframes and prototypes.

Proto.io
Proto.io is a very robust prototyping tool, and it can export HTML / CSS code based on a prototype, and interactive prototype for touch screen, which allowing users to test on actual devices.

Balsamiq
A popula,r long-lasting wireframe tool only for static wireframe.

Moqups
This tool supports to make wireframe directly online.

Mockplus
Mockplus is the all inclusive prototyping tool for fast interaction, fast design, and fast previewing. It allows to create mockups for mobile (Android & iOS), Desktop(PC & Mac) and web apps.

Axure
As a most popular wireframe & prototype design tool, do we need more introduction of this tool? I think no.

Protoshare
This tool also can make wireframes & prototypes online.

InvisionApp
This tool can help you create usable prototype, you cannot draw anything, but you can add links between different screens.
Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

Monday, March 6, 2017

The Best Mockup & Wireframing Design Tools & Apps for UI/UX Designers

 chianote     7:10 PM     Design, design tools & apps, designer, mockup apps, UI, UX, wireframing apps     No comments   

Prototyping/wireframing tools are the best communication method between interaction designers, project manager, and website developers. It’s a key step of web or mobile app development process. While in principle, the design of prototypes must be a product of interaction designers, and the user-centered concept shall run through the whole product design progress. The professional perspective and rich user experience of interaction designer will directly influence the usability of the product.


So, the problem of how to complete a good prototype design that’s depending on how you choose prototyping/wireframing tools. Below are the most popular mockup & prototyping/wireframing tools & apps based on website, desktop, and mobile device.

Web-based Prototyping Tools

1. InVision
As a web-based collaborative program, InVision is powerful at clickable & interactive prototypes, real-time design collaboration & share. InVison is an ideal choice for high fidelity design which is always impressive. The nice features such as Invision + Sketch, Invision + Adobe could be a great helpful for designers who pursue the high-end product.

2. UXpin
UXpin puts everything for designers in a UX design platform, also, it supports to upload file seamlessly on Sketch and Photoshop. Responsive prototypes and wireframes created by UXpin can run on different devices and resolutions. In addition, this software also provides version control and iterative function, you can easily share and preview prototypes by the intuitive and real-time collaboration.

3. Marvel
Marvel is also a web-based prototyping tool with good real-time collaboration. You can simply import mockup images from Sketch or Photoshop to link into clickable interactive prototypes for different devices. Just simple drag and link, you can bring your idea to life without any code experience.

4. Proto.io
Proto.io is a very strong web app with many functions. Under the web-based environment, it supports rich gestures and touch style, such as slide, touch, zoom, press and other mainstream actions. With it, developers can create interactive prototypes for the iOS, Android and other mobile internet devices, and get feedback from users.

Some other web-based prototyping tools:
Pidoco -- Online wireframe and UX prototyping tool
Mockingbird -- Wireframes on the fly
Mockflow -- Great design tools and collaboration services for designers
Moqups -- Mockup, wireframe & UI prototyping tool for creating hi-fi wireframes
Gliffy -- Mock up web pages quickly & easily with wireframes
Wireframe.cc -- Minimal wireframing tool
Framer -- Design tool for code needed

Desktop-based Prototyping Tools

1. Axure RP (Mac & Win)
Axure RP is a desktop application that allows designers to create, test, and share interactive prototypes. Been called as the the most comprehensive (in terms of functionality) prototyping tools, it’s an ideal desktop software for both static, low-fidelity prototypes and more sophisticated, interactive prototypes. As an extremely professional UX tool, Axure requires a steep learning curve.

2. Justinmind (Mac & WIn)
Justinmind is a flexible prototyping tool for web and mobile app prototypes and high-fidelity website wireframes. The rich gestures in Justinmind allow designer to better build gesture interaction mobile apps. Justinmind also requires a deep learning curve, such as value expression.

3. Mockplus (Mac & Win)
Mockplus is an all-inclusive rapid prototyping tool supports for the mainstream platforms of PC, website, and mobile device. The packaged interactions components and creative preview method allow designers to design and preview within minutes. It is a solid prototyping app for professional designers who want to produce high-quality prototypes but without too much long learning curve.

4. Balsamiq (Win)
Balsamiq Mockups is a rapid wireframing tool that helps you work faster & smarter. It reproduces the experience of sketching on a whiteboard, but using a computer. By comparison, Balsamiq is more focus on static and low-fidelity prototypes.

5. OmniGraffle (Mac)
OminiGraffle is a powerful design tool, it has extensive options for objects, canvases, templates, inspectors, and stencils to help designers set out to do something well, quickly. It has won the Apple Design Award in 2002.

Some other desktop-based prototyping tools:
Origami -- A free tool for designing modern user interfaces (Mac)
Adobe Experience Design -- The first all-in-one tool for UX designers (Mac)
Prott-- A new mobile app prototyping tool built for design teams (Mac)
Principle -- An animated design tool for interactive prototypes (Mac)

Mobile-based Prototyping Tools

1. POP(Prototyping on Paper) (iOS & Android)
POP is a light weight prototyping app helps designers to make sketches & screen mockups come to life on mobile devices. Simply upload your mockups and add transitions & gestures to make an interactive project.

2. Tapcase (iOS)
TapCase lets designers create app prototypes from hand-drawn sketches and screen mockups. It’s quite fast and easy to create interactive elements by adding hotspots, linking target screens, and picking transition animations.

3. Marvelapp (iOS & Android)
Marvelapp is a free prototyping app for mobile app, the whole design progress completed on mobile devices. Like POP and Tapcase, easily upload the prepared sketches or screen mockups, and add inbuilt transitions & gestures to make the pen & paper ideas to live.

Some other mobile-based prototyping tools:
Mockplus app -- Easily & quickly preview prototypes on mobile devices by scanning QR code or input the view code. (iOS & Android)
JustinMindPrototyper -- The prototype viewer for Justinmind prototypes (iOS & Android)
Mockup Builder -- Super-easy prototyping and mockups (iOS & Android)
Live Wires -- To quick wireframe & prototype for iPhone and iPad app (iOS)
Appcooker -- Prototyping studio for iPhone & iPad (iOS)



Any of your favorable tool you think should be included in this list? Please feel free to contact me. Hope this article be useful to you great UI/UX designers!

You may also interested in Basic UI/UX Design Concept Difference Between Wireframe & Prototype
Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

10 Essential UI/UX Design Questions for Interview

 chianote     6:10 AM     Design, designer, interaction design guide, UI, UX     1 comment   

As UI/UX professionals, the essential skills are designing excellent UI/UX design works, when it comes to communication, that is also a very important skill. Specifically, the ability to design good works and ask right questions are both indispensable for UI/UX designers.

The primary task of any project is to collect the information needed to do our work properly. The following are some of the common questions asked in an interview and analyzes for different groups: customers, designers, users.

The Beginning of the Project--Client

10 Essential UI/UX Design Questions for Interview

1. Who is our audience, and what are their goals?

It seems like a no-brainer, but the importance of asking this can not be overlooked. Understanding the user and what they want to achieve is the most important part of the designer's outline.

There are several important considerations when discussing this topic:

* You need to ask the customer for an understanding of the user's needs, not the solution itself. Try to guide your customers to suggest specific features or layout ideas. Come up with the best solution for your work as a designer.

* Try to understand the priority. A product may have a variety of audience types, each of which has several goals.

2. What is the main pain-point of the current version (if it exists)?

If you redesign a website or application, find out the shortcomings of the current product, and focus on improving the product in the redesign process. You can also ensure that these features are fully covered in your research and user testing process.

3. Positioning what is a "successful project"?

The customer may have some specific metrics to ask for improvement, for example:

"We want to increase the average value of our orders ..."
"We want people to be more aware of our brand ..."
"We want to attract more investors to the website ..."

Early understanding of these business goals means that we can choose the right tools and techniques to measure them. The user experience is a combination of user and business needs, so it is important to discuss these issues at these early stages.

In the Progress-UI/UX Designer
10 Essential UI/UX Design Questions for Interview

1. How does the designer estimate the timeline in the design process?

The problem is focusing on how the designer works effectively, how to assess the duration of work and associate the time schedule with the whole project. More importantly, how designers meet these timetables, milestones, and deadlines, and how to react to the negative impact. Some commonly used estimation techniques: Function Point Analysis, Use Case Templates, and Relative Mass Valuation.

2. As a designer, which design tools are the essential weapon for you?

Every designer has his own hands-on design tools: Prototype design - Axure, Mockplus; interface design --Sketch; interactive design - Flinto. Any one of the experienced designers can tell you these tools. Even the experienced designers will tell you the features and advantages of each tool. However, choosing a tool simple, fast, and easy-to-use is quite important for UI/UX designers under this rapid developing society.

3. What design information does the designer need before the project beginning?

Each professional UI designer should gather as much information about the user experience (UX) as possible. This UX experience is typically based on data plans that need to be collected, including user surveys, usability tests, and so on. Before the project starts, what the UI designers need basic information about the final user needs and some business goals.

4. How do you think of the questions on the “difference of UI/ UX design?

Questions about "What’s the difference between UI design and UX design" are often searched keywords on the internet. Answers are different from people to people, each designer has his own understandings, "UX is not equal to the UI", "UX design emphasis on technology and analysis, UI design closer to the graphic design." From a professional point of view and position, designers will give you a lot of wonderful answers on this question.

End of project - user feedback

10 Essential UI/UX Design Questions for Interview

1. Please use X (several) words to describe our products (website)?

X can be any number that you think is reasonable. This question can clearly help you understand the user's views on the product. It is difficult to analyze such random data, but you can give the user some vocabulary choices and give the impression from the answer.

2. Is our product (website) easy to use?

Provide some options from simple to difficult. Do not just provide four options that are both positive answers and do not set only one negative option. Remember to keep the balance of the options.

3. What function of our product (website) is most important to you?

This can help you focus on the most important things for the user. It enables you to evaluate how people view their use of the product compared to any analysis data that you have.



That’s all questions for reference of an UI/UX interview. Any question suggested adding, please put it in the comment area.

See more interview questions here:
10 Questions You’ll Be Asked in a UX Interview

Original posted at www.mockplus.com

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Newer Posts Older Posts Home

Popular Posts

  • Basic UI/UX Design Concept Difference Between Wireframe & Prototype
  • Tips on How to Learn UI/UX Design for Beginners
  • What You Should Know About the Perpetual License of the Prototyping Tools
  • 7 Best Design Tools Worth Checking Out for UI/UX Designers
  • The Best UI/UX Design Books & Resources for Designers
  • Need-to-Know Skills of UI Design for Mobile Devices
  • Prototyping Design Tutorial Roundup: Best Video Tutorials
  • Step-by-Step Guide: Become an Excellent Interaction Designer
  • Best of the Best 2016! Top 13 UI/UX Design Posts for Reference
  • The Best Mockup & Wireframing Design Tools & Apps for UI/UX Designers

About Me

chianote
View my complete profile
Powered by Blogger.

Copyright © Chianote | Powered by Blogger
Design by Hardeep Asrani | Blogger Theme by NewBloggerThemes.com | Distributed By Gooyaabi Templates