Posts

In this small UX Design article series “What I have learned at the UX Design Institute Course” , I try to cover everything I learned from the UX Design Institute UX online course. And by everything I mean all the content notes I did while I watched the video lessons and some of the course material, as well as some of my results from the module projects. I ended the UX Design Institute Course with a professional diploma in ux design, just if somebody asks if i did the Exam at the end. I hope this helps some and gives you a ux design institute reviews.

Module 1: Introduction to “What is User Experience Design?”

Technical explanation of User Experience: User experience includes all the user’s emotions, beliefs, preferences, perceptions, physical and psychological responses, behaviors, and accomplishments that occur before, during, and after use.

More precise: User experience is what it feels like to use a product, system or service.

So, what is UX?

UX is a problem solving discipline. The goal is to achieve the best possible experience for the user, that will result in higher engagement and better conversion rates. UX design is the process of improving the usability of a website or an app.

UX designers are responsible for making sure that the product they are designing is usable by their target user group. They also provide solutions to design problems or glitches in order to make sure that users can accomplish their goals with efficiency and satisfaction. Even if this means ignoring desired functions of stakeholders (support, operations, tech, marketing, brand, sales, etc.) to protect the integrity of the product. This sometimes leads to the reduction of functionality to what is most important/necessary for the user.

“Great products solve user problems and generate positive emotions.”

Why does user experience matter?

User experience (UX) is the quality of all aspects of the end-user’s interaction with the company, its services and its products.

UX has a profound impact on a business, as it can make or break a brand. It is therefore essential to design a UX that addresses user needs and is aligned with organisational objectives.

A successful UX also results in more engagement, productivity and customer satisfaction. This ensures higher customer lifetime value over cheaper alternatives resulting in increased revenue for both the organisation as well as users.

Great products are more than just good looking. They are designed for function, appearance, and experiences. The designer must think of the user’s point-of-view and how the product will be used to make sure all three are taken into account.

So, great products need three parts of design:

  • functional design (such as the engine of a car)
  • aesthetic design (the look) and
  • experience design (how it feels to use a product).

It is important to know, that negative emotions, on the other hand, have a multiplier effect. One negative experience can outweigh many positive once.

UX is a state of mind

User experience design is a state of mind. It’s not about the money, it’s about the tiny details that make all the difference. The details that will stay in your memory when you’re experiencing something and thinking back on it with a smile on your face. That is what creates that Knock out experience!

So, it’s about user happiness.

via GIPHY

UXD Product desirability (Making a Business Case)

Desirability relates to emotional connections a product has with a customer. A successful product should have the three qualities:

  • Viability is how practical it is for the customers to purchase or use (often in terms of money making)
  • Feasibility is technological practicability of a product
  • Desirability is whether or not people want to use your product more than your competitors’ products. (Maybe the most important in my opinion)

The key questions in the context of desirability are:

  • Is there a problem?
  • Is our product solving it? (Problem solved in a functional way)
  • Is the experience great? (Solved in a way that’s simple and fun)

via GIPHY

UX is a process

UX design is a process, not a static artifact. It’s never finished and continues to evolve with the people who use it.

The UX design process is designed to be iterative, which means that it starts with research and then moves on to define, prototype, validate and build. Research provides insights into the needs of the user, while defining identifies what users want from the product. The goal behind designing prototypes is to present different views of how an idea might work in reality or on paper. Validating prototypes ensures that these designs are effective for users before implementing them in the final version of the product.

Testing prototypes (also known as “usability testing”) usually involves giving participants tasks to complete while they interact with a prototype in order to evaluate whether or not their needs are.

The benefits of a quality design process are easily seen by those who have a clear vision for what they want to achieve. They can see the end product in high-fidelity, and know that the process they choose will lead them through a natural structure that is easy to iterate without much investment. The three success factors (desirability, viability, feasibility) are given equal importance because it’s important to be realistic yet optimistic about one.

If it’s necessary to speed up the Waterfall project management process, you can use agile as a method of choice. Agile shortens the iterations for “research to test” in the process by creating smaller portions of work. As an UX Designer you have to focus on smaller problems piece by piece.

Danger of features: New Features are not always a good thing

Products are not about features. Products is about to solve Problems. If you think about it, if you have too many features in your app or website, people may be confused about what to do next or even how to use it.

  • More Features in product means it is less intuitive. Features add complexity.
  • New Features involve a trade-off to other features
  • Just because you can add a new feature, doesn’t mean you should. Is it worth it? Will users really need it or use it?
  • Features add cost because Features must be designed (do not just add it)

Just adding features is like pouring out all the ingredients of a cake on the table and saying it’s a cake. No, it’s not. It’s a mess.

Ask these questions:

  • Does anybody need it? (Ask real customers)
  • What is the trade-off?
  • What complexity do we add and what does that mean to other/the core features?
  • What is the cost to design it well?

Only if a product solves a real-life problem will it be successful and needed. Just think about the Google Plus Network: There was already a solution that works fine called Facebook. There is no need to use Google Plus, although it has a more beautiful interface and more features.

Taking shortcuts in Research and Design

We cannot take shortcuts in the UX Design. Software projects can fail because of skipping Research and Design. So we should not be afraid of taking time during this process to make sure that we are not cutting corners and make it easier for our users to use our product.

In the Book The Definitive Guide to Project Management Sebastian Nokes and Alan Greenwood said: ”…the design face and the build face are synonymous.“

Just imagine if the Empire State Building was designed and built at the same time … In architecture, no one would think of not thinking about what to build beforehand. This would lead to chaos.

Prioritization

As UX Design you have to separate Main Use Cases (The variations a software, for example a Mail Application, will be used by a user) from Edge Use Cases.

Talking about features it helps if you categorize them in three parts:

  • TOP priorities: Things that most people do, most often. (Main Use Case)
  • SECOND priorities: Things that some people do, somewhat often. (Stil on the interface but not as prominent)
  • Edge Cases: Things that few people do, infrequently (Hard to find on the interface)

Paradox of specificity

The paradox of specificity is a term coined by Donald Norman to identify an issue with user interfaces. The author identifies the problem as: “the more specific you make a user interface, the less accessible it becomes.” (Norman, 1992) Norman created this term based on his understanding that users want simple interfaces that are easy to utilize and understand, while designers want to create complex interfaces that can cater for all needs and uses. This conflict between designers and users is often called the paradox of specificity because it’s such an unfamiliar topic in UX research (Norman, 1992).

The Paradox of Specificity, simply put, tells us that adapting our efforts to the needs of a more specific audience creates solutions that are useful to a much broader set of needs. For example, rather than trying to meet the needs of all your users, look at how to help a very specific user, or a set of users with the most specific needs. According to the Paradox of Specificity, chances are you’ll end up with a product or solution that meets the needs of a much bigger audience.

Example:

Rolling bags were originally designed for pilots and stewardesses (professionals with lots of short trips) before becoming popular with business men and short-trip flyers (ryan air) because there were handy and good looking.

Benefits if you focus of small number of key “USE CASES”:

  • It is easier to design for a smaller number. Less work involved.
  • You design a better product because it is a more specific product. This leads to that the other, less important, secondary use cases get accommodated too.

Mental models vs Design models

User experience (UX) design is all about anticipating how users think a product or service works. Mental models are the ideas the user has about how something works, and they can be very different from what actually happens. When designing for UX, it’s important to take into account current mental models for your target audience to make sure you’re designing something that’s intuitive and easy to use.

  • A Mental models is about “How a User thinks a product works”
  • A Design models is about “How the product actually works”

The difference between the two models will result in your users will have trouble using your product. So always remember, if those models don’t match, nothing else about your product really matters. (even the greatest features don’t matter) To cover that, do Usability Testing.

Thats it for now. The first module of the UX Design Institute Course. I hope you like it.

Here is my professional diploma in ux design from the UX Design Institute Glasgow Caledonian University and some project and course material.

via GIPHY

Thanks for stopping by.

For more content follow me on:
Instagram | Dribbble | Medium | Twitter

 

top 10 and free character illustration resources

top 10 and free character illustration resources

Character Illustration is a trend that can be seen on many mayor websites and apps these days: Illustrations of objects, people and life situations.
And i like it! 😃  To drop a few big examples: Dropbox, Mailchimp and PayPal use illustrations as a central part of their corporate design and even found priority in illus to photographs.

Basically, illustration makes a website more personal and positive, i think. Unlike photographs, illustrations do not force us directly to evaluate in sympathy or antipathy and thus quickly have an integrating and positive effect on the viewer. I think this is one of the reasons why illustrations are often used in an explanatory environment (help center, explanatory videos (Examples: Fovea AppTUI Connect), tutorials / product features, etc.) where the focus is strongly on the content.

Now not everyone can create such illustrations themselves or perhaps the budget does not allow to create individual and suitable illustrations for the brand.  For this reason I have compiled a list of “My Top 10 & Free Character Illustration Resources”. ⚡️ 🔥 💥

 

blush.design by Pablo Stanley

Blush

This project was created during the Corona crisis. In this cooperation of so far ten international illustrators (among others also Pablo Stanley) mainly figures with mouth-nose protection are found. Each of the ten illustrators contributes his personal style.

  • Mix figures and scenes and adjust colors
  • Free download as PNG (free)
  • Payed download as SVG
  • Blush plugin for Figma
  • All illustrations can be used free of charge. Commercial use is expressly permitted. Attribution is not necessary, but welcome.

Go to Blush

 


 

HUMAAAN by Pablo Stanley

Humaaans also by Pablo Stanley

Humaaans! Felt like one of the oldest collections of modern illustrations for free commercial or personal use. The library is super flexible work with, because the illustrations are broken down into their individual parts (Head, Hands and so on). Scenes and figures can be easily modified, combined and adapted to individual needs.

The download is offered via the online shop Gumroad. Just enter a price starting at 0 US dollars and receive and use the package completely legally. About an amount above 0 would of course also be welcome.

  • Flat SVG and PNG assets
  • Available on Sketch, Figma, InVision Studio, Adobe XD
  • Free for commercial or personal use

Go to Humaaans

 


Meditation Illustration on sketchvalley.com/

Sketchvalley

At Sketchvalley you will find a modern collection of 56 individual illustrations.  All illustrations on Sketchvalley are licensed under Creative Commons Zero and can therefore be used completely freely and even without attribution in personal and commercial projects.

  • Flat SVG and PNG assets
  • Adobe-Illustrator-File
  • Free for commercial or personal use

Go to Sketchvalley

 


Fresh Folk an illustration library of people and objects

Fresh Folk

Fresh Folk is a small library from the Illustrator Leni Kauffman. Illustrations of people and objects with love for detail, what makes the illustration special.

  • Free vor commercial or personal use (CC ATTRIBUTION 4.0 INTERNATIONAL LICENSE)

Go to Fresh Folk

 


Usesmash free Illustrations

Craftwork

On the site of Craftwork you will find some smaller and larger collections of illustrations which you can download for free.

Go to Craftwork 

I would especially like to point out the larger illustration collections of Craftwork like:

  • Stubborn.fun – Design your characters using a generator absolutely for free
  • flowlava.club – Create an attractive and unique project with futuristic characters by easy in use constructor
  • error404.fun – Royalty free illustrations for 404 pages
  • usesmash.com – Awesome illustration constructor with colorful and trendy characters

These pages offer you several hundred illustrations and various already designed scenes which are available individually as PNG and SVG or as Figma and Sketch files.

  • Flat SVG and PNG assets
  • Adobe-Illustrator-File
  • Free for commercial or personal use

 


Open Doodle Coffee GIF

Open Doodles

Once again Humaaans creator Pablo Stanley. Horny guy! 🔥  Almost feels like he pushed the trend!

  • Flat SVG and PNG assets
  • Single download or dropbox download of all illustrations
  • Sketch and Illustrator file
  • Open Doodles generator on the website to adjust colors
  • Free for commercial or personal use

Go to Open Doodles

 


undraw Preparation

Undraw

Since 2017 the illustrator Katerina Limpitsouni has been working on her project Undraw and you can find many drawings on it. From the very beginning, Undraw has been a collection point for open source illustrations under free license, and so Limpitsouni does not prohibit anything except reselling her illustrations per se. Illustrators about current Topics (Corona, BlackLivesMatters) and growing library

  • Selecting the accent color on the web page
  • Flat SVG and PNG
  • Sketch, Figma and Invision Studio
  • Free for commercial or personal use

Got to Undraw

 


OUCH! Flamenco Waiting

Ouch by icon8.com

Ouch is a project of the icon veterans of Icons8.

  • Free low-quality PNG
  • Pay for Vector SVG
  • PNGs can be used freely in commercial projects but must be linked.

Go to Ouch!

 


drawkit.io working from home illustrations

Working from Home

A completely free illustration pack of characters working from home, exercising from home, playing games indoors, keeping in touch over social media, and living inside their homes.‍ No credit or attribution needed, these are free to use for absolutely anything. Just enter $0 at checkout to download and customise the files.

Go to Working from Home Illus

 


ls.graphics huumph

LS graphics Illustrations like Whoosh

Whoosh and other collections of Ls.graphics there are some free goodies that include scene-based character illustrations. Also ideal for UI design of web and app services.

  • Free low-quality PNG
  • Pay for Vector SVG and the complete Illustration package
  • PNGs can be used freely in commercial projects but must be linked.

Go to ls.graphics

 

Bonus

The guys from Streamlineicons.com pointed out to me that they can also throw something into the round here.

 

Streamline UX 2.0

Streamline UX 2.0

Let’s start with the illustration pack they have just released. They call it “the world’s largest vector illustration pack.” Here you get over 19.500 character and object illustrations for your next UI or print project. Even if the features are limited in the free version, it’s worth a look at this massive collection.

  • Free low-quality PNG (max. 150px)
  • Pay for Vector SVG and customized illustrations
  • PNGs can be used freely in private and commercial projects with attribution link to streamlineicon

Go to Streamline UX 2.0

Login

 

80 free hand-drawn illustrations

You should also have a look at the 80 hand-drawn illustrations, which you can download completely free of charge for your next commercial or personal project.
Perfect to use in your presentations, application onboarding or marketing websites.

Go to Streamline Labs 80 hand-drawn Illustrations

 

And if this is not enough:

3D animated Icons & Objects (After Effects Files included)

Animated with Love, customizable in After Effects and fun to watch 😋

All animated Icons

Go to 3D animated Iconset

 

So, with these 10 + bonus services you should be busy for a while. 🙂

 

Web Stories

 

Welcome to the weekly Design & Animation Inspiration #4

This week there is a I have found some UI interactions on the topic “Neumorphism”. Probably Neumorphism Interfaces is not a thing anymore, but the dribbble post from my colleague Stan Gursky gave me the idea to do some research on this topic.

Stan has built a Neumorphism prototype in protopie.io, where light and shadow are dynamically aligned with the angle of the smartphone. Awesome stuff!

This Week Neumorphism Styled UI Design

 

Dynamic Neumorphism Lightswitch (Video) by Stan Gursky

You can try it out yourself (with ProtoPie Player):
https://cloud.protopie.io/p/904970c75b

 

f6e5b4010a95ad9c05bd3532c266a91c - Bärenstark - Digitale Lösungen

Book Subscription App 📖 by Ariel Jędrzejczak for Riotters

 

6c9cb8deabc71b3bb158f6ab7ca653ff - Bärenstark - Digitale Lösungen

Neumorphism UI Trend 2020 by OTAKOYI

 

ae160f8f2f45438a72013c1bbbc2a36d - Bärenstark - Digitale Lösungen

NEUMORPHISM TUTORIAL by Julia Shagofferova

 

16563f664e6a9f11229191768ca9ea27 - Bärenstark - Digitale Lösungen

Dark Neumorphic Website Design by Samson Vowles🕺 in Neumorphic UI Kit

 

9ecf9ad4389b4797936e6298f197b414 - Bärenstark - Digitale Lösungen

Neumorph Clock by Vadim Demenko

 

2b4c34d902a7988b8466a6844b62d675 - Bärenstark - Digitale Lösungen

🎶 Neumorphic Music Player by Veno for Overlap Studio

 

35202e1791330752cc633e60512cf54c - Bärenstark - Digitale Lösungen

Neumorphism UI // Notification by Cosimo Scarpa

 

3b3c08a999b779f1745b814d9c2c6ac0 - Bärenstark - Digitale Lösungen

ING App Redesign by Matthieu Leung

 

59a71e28f3073b422359be37ac6a3fd0 - Bärenstark - Digitale Lösungen

Music App by Paulina Corona

 

3a2edcc409f6d4cf3c51a025d0a21550 - Bärenstark - Digitale Lösungen

Soft Text Input for Chat by Vincent Snagg

 

4a229b0faf0eaddae13dc0ba1866d1e4 - Bärenstark - Digitale Lösungen

Florist App by Darya Popkova

 

Thanks for stopping by.

For more content follow me on:
InstagramDribbbleMedium | Twitter

flecsable stylescape dynamic 2 - Bärenstark - Digitale Lösungen

The purpose of stylescapes is to provide the company’s stakeholders with an impression of the future brand and is therefore a suitable tool to make the design process transparent.

Stylescapes help to demystify the idea that a designer can get around the corner with the perfect design solution in a short time just by staring at his computer. Of course, when developing specific design solutions, one goes through several phases of research and tries to find the right look for the target group and the product.

Basically, Stylescapes help to transform the terms defined in the briefing discussion with the customer or in the brand workshop into images.

Stylescapes “are the collection of highly curated images, designs, type, textures, and colors that help defined visual direction, but more importantly, will get you buy-in from your client before you design anything.

-Chris Do, Blind CEO

 

Advantages

  • Makes the design process transparent and involves the customer.
  • Buy-in from customer before starting to design specifically for their product or service
  • Minimizes the risk of designing something that does not meet the expectations of the customer or the target group.
  • Promotes customer loyalty: Your customer will love it if you present the visual lines at a personal meeting, especially if the stylescapes have been printed out in large format beforehand.
Stylescape Wine-Store Key Word “ Modern + Cultural”

Stylescape Wine-Store Key Word “ Modern + Cultural”

Structure

Stylescapes are more than moodboards. While moodboards are often loosely cobbled together images, stylescapes follow a scheme and always contain visualization of the target group, logo examples, fonts, colors, graphic elements / design elements, imagery, application examples such as websites, brochures, packaging, etc. tailored to the client and the project.

The stylescapes can either be very contrasty to each other to cover the widest possible visual spectrum, or they can lean on each other. This depends on how detailed the desired appearance has already been described.

View this post on Instagram

Stylescape Moodboard 2.0⁣⁣⁣⁣ ⁣⁣⁣⁣One part of the process to develop a brand is to determine the visual line for the company together with the customer. Therefore stylescapes or moodboards 2.0 are a great tool.⁣⁣⁣⁣ ⁣⁣⁣——⁣⁣⁣ ⁣⁣⁣BRAND KEY WORDS:⁣⁣⁣ ⁣⁣⁣Young, structured, dynamic, self-confident. On this stylescape we focused on the Keyword „Dynamic + Structured“ as a trigger for the visual line.⁣⁣⁣ ⁣⁣⁣——⁣⁣⁣ ⁣⁣⁣Target Audience:⁣⁣⁣ ⁣⁣⁣Channel manager of a leadership position in a software company⁣⁣⁣ ⁣⁣⁣——⁣⁣⁣ ⁣⁣⁣What do you think of this one?⁣⁣⁣ ⁣⁣⁣——⁣⁣⁣ ⁣⁣⁣Need to communicate with your audience, clients or customers visually? Need a logo or full branding? Hit the email at my bio or DM me to create your visual story.⁣⁣⁣ ⁣⁣⁣@wirsindbaerenstark ⁣⁣⁣ ⁣⁣⁣⁣ ⁣⁣Are you looking for a new identity for your brand? Let’s talk! ?⁣⁣ ⁣⁣-⁣⁣ ⁣⁣-⁣⁣ ⁣⁣-⁣⁣ ⁣⁣-⁣⁣ ⁣⁣@welovebranding⁣⁣ ⁣⁣@thebrandidentity⁣⁣ ⁣⁣@branding_design⁣⁣ ⁣⁣@branding.mob⁣⁣ ⁣⁣@worldbranddesign⁣⁣ ⁣⁣@bestofpackaging⁣⁣ ⁣⁣@spruzzo.brand⁣⁣ ⁣⁣@the.branding⁣⁣ ⁣⁣@landorlondon⁣⁣ ⁣⁣@uxgoodies⁣⁣ ⁣⁣-⁣⁣ ⁣⁣-⁣⁣ ⁣⁣-⁣⁣ ⁣⁣#branding #logo #graphicdesign #marketing #brand #behance #dribbble #logos #socialmedia #logodesigner #logotype #typography #business #graphicdesigner #logodesigns #designer #stylescapes #webdesign #brandidentity #advertising #entrepreneur #uidesign #ux #digitalmarketing #type #interior #lettering #decor #marketingdigital #handlettering

A post shared by Bärenstark (@wirsindbaerenstark) on

 

Goal: “Choose wisely my friend”

In the end, you are forced to commit to a stylescape and thus pave the way for the development of the brand identity (logo, font, colours, visual language, website, etc.).

An example of when stylescapes are used in the brand process can be found here in the Brand Case Study flecsable

Stylescape Wine-Store Key Word “Cultural + Modern”

Stylescape Wine-Store Key Word “Cultural + Modern”