Need-to-know Skills of UI Design for Mobile Device

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

Do not think the practical UI design principle does not apply to small mobile screens.

Five elements of UI design you should take into consideration:

 A). Goal-driven Design. This allows you to customize the app working process and meet requirements for target users.

  B). 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.

  C). 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.

  D). Learn-ability. You want users to instinctively know the function of your interface.Familiar pattern can let users easily adapt to the new app.

  E). Feedback & Response Time. Feedback could help users to know whether the task has been completed or 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:

 A). Character. The fiction character based on your target user group could help you to understand how to run your app well.

  B). 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.

 C). 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:

A). 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 .

B). 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.


Original Post

About Author

Grace Jia

Prototyping tools, UI &UX news & information, article sharer, writer. Please follow me on LikedIn.

Email: grace@jongde.com 

Web: Mockplus

Sharpen Your Skills: The Value of Multidisciplinary Design

Design is everywhere; It is all around us.

Every time we look around, everything we see has been designed at some point. We design our environments, our food, our virtual spaces and even our bodies. Design is a critical form of human interaction.

The word design comes from the 16th-century Latin verb designare. Although, it has Middle French (desseign) and Italian (disegnare) roots too. Designare is a compound word consisting of de (out) and signare (to mark) and originally meant to mark out. Even though this meaning is not present anymore, we still use its metaphoric extensions. Today, we use design as a synonym of preparing, planning, sketching or fashioning artistically.

We all practice design when we make everyday decisions. This might include when we decide on which table to buy, how we should serve our food or which shirt we pick for a date. We use the word design more deliberately in a professional manner when regarding the process of shaping of what we see and how we interact with it. Designing often necessitates considering the aesthetic, functional, economic and sociopolitical dimensions of both the design object and design process. It may involve considerable research, thought, modeling, interactive adjustment, and re-design.

Since all design work is rooted in a familiar language, practicing one discipline, therefore, means getting better at another. Such is the value of a multidisciplinary background. Our growth in a specific discipline can increase our general design intuition simultaneously.

How does your multidisciplinary background affect your design skill set?

Concerning aesthetics, design is closely related to fine art. However, design’s ultimate goal is to provide theuser usability within the boundaries of a curated experience (more specifically graphic designs, user interfaces, etc.). Design converts emotion into an experience.

It’s also worth noting that since all design work shares the same cultural contexts and conditions at any given time, any design discipline is inherently affected by another. The designed world will always influence the designers which inhabit it. Ideally, designs of various disciplines should work together flawlessly to form a single curated experience. Understanding these connections could be essential.

My Multidisciplinary Design Background

For the designer, the act of design is so natural that most of the time we aren’t conscious of it. If I were asked “When did I start designing?”, I’m not sure that I could answer accurately. Many of us began in drawing, building and imagining as little children.

At some point, we define design practice as a professional discipline. In early schooling, I began with simple image editing, typography experiments, and web design, although all on a relatively low level. The same continued in high school with the addition of illustration and game design in my later years. Up until this point, I hadn’t put much serious thought into my work. It was natural, and artistic, but never really for any purpose.

Everything changed when I started my architectural design education. I learned about a true design process, the importance of concept and research, and that there are always endless design solutions for a problem. During my time, I became familiar with architectural, interior and urban design, and also improved my typographic and graphic skills. Here did I learn that how one presents a design can be just as important as the design itself.

Even though I studied architecture, I started experimenting with professional graphic design in early 2014. I took my entrance working on assets and illustrations, then got my hands on bigger scale projects of identity design, branding, and UI design at the end of the summer. Later, in 2015 I started doing UX design more and more frequently, and I ended up being the UI + UX design guy for many projects.

The Common Languages of Design

Only once I started my professional career did I realize how similar some aspects of these different disciplines are. There are corresponding elements throughout all the fields that—once learned properly—can develop an understanding of entirely new disciplines, and deepen the knowledge of existing ones. These elements include: the design process, such as research, conceptualizing, drafting, prototyping, redesigning, presenting, and so on. The more disciplines that you practise, you will better understand the core mechanics of them in a general sense.

Different design tools come from different disciplines.

There are also elements which can’t connect to any particular field, but to design in general. I’m talking about things like layout, contrast, and pattern. They are present in all design fields and serve as the tools we use to emphasize aspects of our design. We encounter them regularly in every creative process. Since they are always around, we shall deeply understand them. Neglecting or misusing them can be a real curse, while using them properly is a great strength.

I first realized how design knowledge accumulates when working on a runner game in early 2014. It went much smoother than I had expected, and I could also document the process very efficiently. Since my game design experience has never been too developed, I learned a lot of new things along the way, but I could also use the experience I gathered on different fields like graphic design, typography, branding, color selection and interface design. My initial fears evaporated as I realized that I already had the tools to solve the puzzle. This process is similar to what coders encounter: understanding the behavior and logic of a single language also develops a perspective and helps the understanding of others. Even though many things can differ between these languages, the concept is basically the same.

The Universal Design Process

There is a broad disagreement going on concerning what the ideal design process should be. Kees Dorst and Judith Dijkhuis agreed that “there are many ways of describing design processes” and discussed “two basic and fundamentally different ways”— the rational model and the evolutionary model. Although these models have their differences, their main role is to define the process of design and thus they can be used as the most fundamental bridge between disciplines.

The Rational Model

The rational model views the design process as a plan-driven, sequential progress through distinct stages. Here design is informed by research and knowledge in a controlled manner. The stages are pre-production design, design during production, post-production design and redesign, and consist of several smaller processes. The problem with this model is that most of the time designers don’t work this way, and assumptions could also be unrealistic as goals and requirements could shift as the design process goes on.

Although used rather rarely, this method acts as a base for many other design processes throughout the disciplines such as the waterfall model, systems development life cycle and much of the engineering design literature.

The Evolutionary Model

The evolutionary model is a more spontaneous approach consisting of many interrelated concepts. It posits that design is improvised without a defined sequence of stages—different stages of the process (analysis, design, and implementation) are all contemporary. Designers here use creativity and emotion to generate design possibilities. This model also sees design as informed by research and knowledge (just as the rational model), but these are brought into the design process through the judgment and common sense of the designer. Since this method is not hard-coded in term of stage order, it’s present in almost all of the disciplines. It’s basically a paradigm of how we design nowadays, and once we get the hang of it, it can be applied in any design process—making it the cornerstone of exploring new fields.

How Multidisciplinary Design Improved My Skills

As I already mentioned, I was an amateur designer when I started university. I had no idea what a design process was, what should I look out for, or what to focus on. Our group’s first design task was to create three solid 5” cubes out of different materials. I chose two kinds of cardboard and gypsum as the materials and focused on shaping the cube as precisely as possible. It was only later in the class when I realized how else this task could have been handled. People made cubes out of layered glass, smaller wooden cubes or even metal planes. A girl from Kalocsa made her cube out of paprika—a nice homage to her hometown, where first records about the cultivation of paprika originate.

As my education continued, I learned what abstraction and concept meant in a design context. I prefer to make designs with straight-forward messages, sharp shapes, and high contrast. As a designer, to learn the merits of abstraction, and appropriately employ them can be a lifelong process. I’m still finding myself learning new things with new projects.

Abstraction is a really handy tool in the designer’s palette. To make something less in volume, density or complexity while communicating the same message is the way how the design of user interfaces and user experiences work today. Abstraction can also be about forming experiences or messages beyond the surface of perception. As well, communicating these messages with greater accessibility is essential in reaching bigger audiences. It’s also useful when designing new interfaces, logos, icons or any product due to the perspective of simplification it provides. As Ludwig Mies van der Rohe once said: “Less is more.”

My multi-disciplinary background also taught me that all sub-sections of a design should be equal. Much like how the elements of machine system determine the greater systems performance, the sum of the parts of a product also determines the quality of the holistic design. Therefore, it’s critical to provide respect the time required to develop all details carefully. In architecture even the tiniest of design mistakes can have a fatal outcome. A hole in the waterproofing, a slightly miscalculated steel value in a reinforced concrete structure or not knowing how some elements would change over time can ruin the whole design. The same goes for other fields of design. While they are not as fatal as a collapsing building, they can still implode a business.

Creating a logo without any concept, based on only current design trends could be such an issue for instance. A brand, whose logo, colors or style changes every other year is not providing enough time for its users to learn and recognize it. A good designer takes care of every aspect, every single little detail of the logo—things like brand history, target audience, message or placement. Mies also said “God is in the details”. This expresses the idea that whatever one does should be done thoroughly, and this describes the optimal design process very accurately.

The Importance of Design Research and Presentation

When we create new things or come up with a new concept, there is a probability that it has been either entirely or partially done by someone else. Looking for, and finding these examples can help our decision-making process and provide us with conductive experiences we can implement. Learning from others’ mistakes can also be helpful.

Designing something beautiful and thorough doesn’t always grant success. How one presents the product is just as important. Through my first semesters, I wasn’t really bothered about the presentation of my concepts. I spent very little time on the actual style of my presentations, but instead almost all of my time on the concept. Architecture, however, is a profession where you have to convince the client. You have to communicate in every possible channel that your solution is the perfect one. Presentation—as a channel—is a new opportunity to prove yourself and extend your concepts. To be able to serve your design in an appetizing manner, you must develop the skills to build a great presentation. These can include typography, color choice or composition—basically all graphic design skills that are also present in almost all other design disciplines. Being able to design good products and sell it as well can be a deadly combo.

You Don’t Need to Practice Everything

Knowing different disciplines doesn’t always mean that the designer needs to practice them all. Understanding their rules and how they function can be, in most cases, just as good. When designing a mobile interface, for instance, the designer should be aware of the design principles and usage rules of both the device and the platform, yet they don’t have to have past product designer experience to achieve a beautiful and fun UI. Having an idea about how things interact and when it is—and when it is not—necessary to know them in detail could be really helpful in all scenarios.

The Role of the Designer

When discussing designers, most people see them as design professionals with strong factual and procedural knowledge. Accurate knowledge refers to the essential elements that the designer must know to be acquainted with a discipline or solve problems in it: the knowledge of terminology and specific details and elements. Procedural knowledge is about how to do something such as subject-specific skills and methods, and also the knowledge of criteria for determining when to use appropriate procedures.

While this is true, designers also need to know the interrelationships among the basic elements within a larger structure (a single discipline, design in general, etc.) that enable them to function together (i.e. classifications, categories, principles, theories, models, structures) also known as conceptual knowledge. This knowledge is part of the common language of design as most of the areas it covers are easily translated between disciplines. Embracing the above concept can make the designer to be more aware of the whole design scene and can help transitioning between all disciplines more easily.

Conclusion

Design thinking is as old as human consciousness. We can explore and experience it, but it will always be able to reinvent itself and provide us with exciting new things. Being a designer means being able to explore, adapt and invent, and this starts with the understanding of the connections between the disciplines. “Exploration is the engine that drives innovation” as Edith Widder once said.

This article is originally posted here.

About Author

PETER VARADI

Tips & Tricks for a Successful Online Portfolio

At Toptal we screen a lot of designers, so over time we have learned what goes into making a captivating and coherent portfolio. Each designer’s portfolio is like an introduction to an individual designer’s skill set and strengths and represents them to future employers, clients and other designers. It shows both past work, but also future direction. There are several things to keep in mind when building a portfolio, so here is the Toptal Guide of tips and common mistakes for portfolio design.

1. Content Comes First

The main use of the portfolio is to present your design work. Thus, the content should inform the layout and composition of the document. Consider what kind of work you have, and how it might be best presented. A UX designer may require a series of animations to describe a set of actions, whereas the visual designer may prefer spreads of full images.

The portfolio design itself is an opportunity to display your experiences and skills. However, excessive graphic flourishes shouldn’t impede the legibility of the content. Instead, consider how the backgrounds of your portfolio can augment or enhance your work. The use of similar colors as the content in the background will enhance the details of your project. Lighter content will stand out against dark backgrounds. Legibility is critical, so ensure that your portfolio can be experienced in any medium, and considers all accessibility issues such as color palettes and readability.

You should approach your portfolio in the same manner you would any project. What is the goal here? Present it in a way that makes sense to viewers who are not essentially visually savvy. Edit out projects that may be unnecessary. Your portfolio should essentially be a taster of what you can do, a preparation for the client of what to expect to see more of in the interview. The more efficiently that you can communicate who you are as a designer, the better.

2. Consider Your Target Audience

A portfolio for a client should likely be different than a portfolio shown to a blog editor, or an art director. Your professional portfolio should always cater to your target audience. Edit it accordingly. If your client needs branding, then focus on your branding work. If your client needs UX Strategy than make sure to showcase your process.

Even from client to client, or project to project your portfolio will need tweaking. If you often float between several design disciplines, as many designers do, it would be useful to curate a print designer portfolio separately from a UX or visual design portfolio.

3. Tell the Stories of Your Projects

As the design industry has evolved, so have our clients, and their appreciation for our expertise and what they hire us to do. Our process is often as interesting and important to share with them, as the final deliverables. Try to tell the story of your product backwards, from final end point through to the early stages of the design process. Share your sketches, your wireframes, your user journeys, user personas, and so on.

Showing your process allows the reader to understand how you think and work through problems. Consider this an additional opportunity to show that you have an efficient and scalable process.

4. Be Professional in Your Presentation

Attention to detail, both in textual and design content are important aspects of any visual presentation, so keep an eye on alignment, image compression, embedded fonts and other elements, as you would any project. The careful treatment of your portfolio should reflect how you will handle your client’s work.

With any presentation, your choice of typeface will impact the impression you give, so do research the meaning behind a font family, and when in doubt, ask your typography savvy friends for advice.

5. Words Are As Important As Work

Any designer should be able to discuss their projects as avidly as they can design them. Therefore your copywriting is essential. True, your work is the main draw of the portfolio - however the text, and how you write about your work can give viewers insight into your portfolio.

Not everyone who sees your work comes from a creative, or visual industry. Thus, the descriptive text that you provide for images is essential. At the earlier stages of a project, where UX is the main focus, often you will need to complement your process with clearly defined content, both visual diagrams, and textual explanation.

Text can also be important for providing the context of the project. Often much of your work is done in the background, so why not present it somehow? What was the brief, how did the project come about?

Avoid These Common Mistakes

The culture of the portfolio networks like Behance or Dribble have cultivated many bad habits and trends in portfolio design. A popular trend is the perspective view of a product on a device. However, these images often do little to effectively represent the project, and hide details and content. Clients need to see what you have worked on before, with the most logical visualisation possible. 

Showcasing your products in a frontal view, with an “above the fold” approach often makes more sense to the non-visual user. Usually, the best web pages and other digital content are presented with no scrolling required. Avoid sending your website portfolio as one long strip, as this is only appropriate for communicating with developers.

Ensure that you cover the bases on all portfolio formats. Today it is expected for you to have an online presence, however some clients prefer that you send a classic A4 or US letterhead sized PDF. You need to have the content ready for any type of presentation.

Try to use a consistent presentation style and content throughout the projects in your portfolio. Differentiate each project with simple solutions like different coloured backgrounds, or textures, yet within the same language.

About Author

Toptal

This article is originally published here.