User Experience Design For Mobile Apps & Websites (UI & UX)

The Beginner's Guide To User Interface And User Experience Design. No Experience needed!

3.7
(66 ratings)

Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.

To help you understand and fully comprehend the key concepts needed for web and mobile app design which are User Interface and User Experience Design Principles!

Whether you are - A total newbie on User Experience Design and clueless on how to get started:

You will gain a solid foundation on the WHATs and HOWs of User Experience Design. This is a structured course that teaches you a systematic way to learn the basic foundational concepts of UI & UX Design that will save you years of time figuring things out on your own.

About this course

Over 10+ Lectures and 1 Hour of Content

Full, free lifetime access

All future extra lectures and upgrades are always included for free

30 day money-back guarantee -- my personal promise to your success!

Monthly BONUS Lectures to enhance your UX Design Skills!

24/7 Instructor Chat Support -- I will personally help you

After taking this course, you'll be able to...

Learn the basic UI & UX Design Principles

Learn the Difference between UI & UX

Learn the foundation and nature of UX Design

Learn Key Guidelines For Proper Mobile App Designs

Learn the Basic Fundamentals of User Interface Design

Learn additional Tips and Lessons for UI & UX Design

By enrolling in this course, you will also receive support from me and I will be personally answering your questions in the student discussion area.

If you are willing to learn and put in the effort to implement what I teach you in this course, go ahead now and click the big blue button at the top to enroll yourself and start experiencing the results for yourself!

I look forward to hear your personal success story and I'll see you on the other side!

What are the requirements?

Patience and willingness to learn

Computer and Internet Connection

What am I going to get from this course?

Learn the basic Ui & UX Design Principles

Learn the Difference between UI & UX

Learn the foundation and nature of UX Design

Learn Key Guidelines For Proper Mobile App Designs

Learn the Basic User Interface Fundamentals

Learn additional Tips and Lessons for UI & UX Design

What is the target audience?

UI/UX Designers

Mobile App Designers

Game Designers

Graphic Designers

Web Designers/ Developers

Entrepreneurs

DO NOT Take this course if you're looking for an Intermediate/Advanced UI & UX Fundamentals Course

The topic of color could fill a whole book on its own, so we'll stick to

what's relevant to UI design here. We can break down color theory

into 3 parts with regards to web UI design:

• Contrast – Every shade of color has a set opposite – an “arch-nemesis”

whose contrast is far greater than any other color. You can

use the color wheel below to find each specific color's opposite.

Simply locate the color on the opposite end of the circle.

Complementation – Colors aren't always at odds with each other: complementary colors accent each other and bring out their best, the opposite of contrast. These are the colors immediately next to each other on the color wheel, for example, purple's complements are blue and pink.

Vibrancy – Each color evokes a specific moods: the brighter warm colors (red, orange, yellow) tend to energize a user and make them more alert, while darker cool shades (green, blue, purple) tend to be more relaxing and tranquil. CNN uses a red banner in their top navigation to heighten alertness, a color decision that suits the site's breaking news content.

Color theory in web design is more than just a visual garnish, it can have game-changing effects on your business. If you don't believe us, read conversion consultant Jeremy Smith's article explaining how the psychology of color can expand your business

Vibrancy: Emotional Implications of Color There's no denying the link between emotions and colors: in fact, the human race has been documenting the psychological impact of color since the Middle Ages. Naturally, any web designer wants to harness this as well, since the right colors create the right moods and atmosphere for your site. We've analyzed the advice of the researchers at Vandelay Design and Smashing Magazine, and filtered it through our own experience at UXPin. Please note that different cultures around the world perceive colors differently. We describe emotional associations that are most relevant to Western cultures. For a more in-depth look of how different cultures perceive color, read this thorough piece from Web Designer Depot.

The most stimulating color, red is so energizing it has been used to increase blood circulation. Representing passion and power, red is the color that will attract the most attention, which is why it is commonly used for warnings and important notices. Red is very appropriate for the No Way NSA website, whose purpose is calling alarm to a perceived threat from the NSA. Using red in the first section of the single-page site is especially clever because it calls attention to the primary message while physiologically inducing people to “get out of the danger zone” by scrolling downwards. This, of course, only makes the user engage with more content. However, this could work against you, as red can incite anger, or at least overstimulation. If you're going for a more relaxed atmosphere, use it sparingly (or at least in a lighter shade) or not at all.

As the most muted of the warm colors, orange is uniquely versatile. As a primary color it can be engaging and energizing, and as a secondary color it also retains these properties in an unobtrusive way. Orange also helps to create a sensation of movement and energy. Aside from it being part of the brand style, orange works well with Fanta's lighthearted and cartoonish site. The color shows creativity while retaining familiarity.

Yellow Promotes: happiness, enthusiasm, antiquity (darker shades)

Yellow is one of the more versatile colors, depending on the shade. A bright yellow is the most energetic of the colors, without the severity of red. Middle shades of yellow give a sense of comfort while still feeling invigorating. Darker shades (including gold) can give the impression of antiquity, and lend an air of timelessness, wisdom, and curiosity. Colorful Emotions: Visual Vibrancy in Web UI Design 60 In the above example from web design agency Flash Media, the darker shade of yellow exudes energy, curiosity, and authority. This makes a lot of sense for a company who thrives on the value of their consultancy and skills.

Green bridges the gap between warm and cool colors, though tends to be more of a cool color. This means green has the same relaxing effects of blue, but still retains some of the energizing qualities of yellow. As such, it creates a very balanced and stable atmosphere. Darker shades give off more of the money/affluence feelings which you can see with Ameritrade above.

Like yellow, blue's meaning varies greatly depending on the shade. All blues are universally relaxing and safe, but the lighter shades will seem more friendly while the darker ones seem more somber. Social media sites like Twitter and Facebook take advantage of light and medium shades, while corporate websites prefer dark shades' tones of strength and reliability. Van Vliet & Trap, an event design agency, makes clever use of dark blue. By using the blue in the flowers in the background, they visually hint at their expertise in floral design while also exuding trust and reliability. It makes a lot of sense since they plan high visibility (and somewhat nerve-wracking) events like weddings.

Historically associated with royalty, purple retains the tone of luxury, even to the point of decadence. Purples suggests lavishness and wealth in general, making it a popular choice for fashion and luxury goods (and even chocolate, like the Cadbury example above). Lighter shades like lavender (with pink hues) are considered romantic, while darker shades seem more luxurious and mysterious. Black Promotes: power, edginess, sophistication

The strongest of the neutral colors, black exists on almost every website. It can take on varying characteristics depending on its supporting colors, or dominate all of them if used in excess. Its strength amidst neutrality makes it the color of choice for long blocks of text, but as a primary color can give the impression of edginess, sophistication, or even evil. For most websites, black is used to create an instant feeling of sophistication and timelessness. The feeling of elegance is especially strong well when paired with white font and set against a minimalist layout, as you can see in the “Dream and Reach” microsite from Bose. White Promotes: cleanliness, virtue, simplicity

White is the color most associated with virtue, purity, and innocence in Western cultures. Colorful Emotions: Visual Vibrancy in Web UI Design 64 Minimalist and simplistic sites most often use it as a background. By drawing the least attention of all the colors, white is the best for accenting the other colors on the page. This works particularly well for the awwwards-winning website of artist Kaloian Toshev. The white background draws attention to his vibrant artwork, while creating an art-gallery aura of elegance.

Gray Promotes: neutrality, formality, melancholy

While in certain situations it can seem brooding or sad, gray is nonetheless a popular choice for looking traditional or professional. However, one of the greatest advantages of gray lies in varying its hues – changing the shade can give you a customized mix of properties from white and black, a powerful tool in skillful hands. When paired with brighter colors and presented in a flat UI, the grey background of awwwards feels much more modern than it does somber.

Beige Promotes: traits of surrounding colors

Beige is the wildcard of the colors, as its main use is in drawing out other colors. On its own, beige is dull, though this can be used to symbolize humility. However, it will take on the characteristics of the colors around it, making it an interesting design tool. For these reasons, beige is almost always a secondary or background color. Darker shades of beige (like on the Dishoom site) will create an earthy and almost paper-like texture, while lighter shades feel fresher. In this case, the lighter shade around the brand name, which darkens outwards, help create the feeling that the restaurant is a fresh modern take on earthy cuisine.

Ivory Promotes: comfort, elegance, simplicity

In terms of emotional response, ivory (and cream) are slight variations on white. Ivory is seen as warmer (or less sterile) than white, making it more comforting while still exuding the same minimalistic and complementary aspects. Ivory should be used in place of white to soften the contrast between it and darker colors. For the art in my coffee site, an orange/brown accent is added to the cream background (which looks slighly greyish) to create a sense of warmth. If you'd like to read more analysis of color and emotion, check out this piece by 1stWebDesigner which deconstructs color use from 20 top brands.

Color Scheme Every site has a color scheme, the primary colors it uses for its main areas. As we've been discussing, the repeated use of these colors will affect the user's mind and mood, typically subconsciously, so choose them well. While there are lots of different ways to mix colors togethers, we're going to focus on the 3 most successful, and common, ones: • Triadic – The triadic is the most basic and balanced of the three structures. Using vibrancy and complementation, but straying from the trickier contrast, the triadic structure is the safest and most reliable scheme. On the 12-step color wheel, select any 3 colors located 120 degrees from each other: one color for the background, and two for content and navigation.

Compound (Split Complementary) – The next scheme gets a little trickier to pull off, but can be rewarding if done well. The concept uses four colors: two contrasting pairs and two complementary pairs.

Look at how stunning the page for Florida Flourish looks just based on its colors alone. The red and green contrast together with the text tags and plants, plus the blue and orange with the sky atop the desert. At the same time, the red/orange and blue/ green complements really bring the whole view together nicely

Analogous – Lastly there is the analogous scheme, which focuses exclusively on complementary colors. This one really highlights the vibrancy of the colors chosen, for example, a red-orange-yellow analogous scheme will seem very energetic and lively. While this scheme is relatively easy to pull off, the trick is in deciding which vibrancy of color to use, as it will be exaggerated.

By using blues, turquoise, and greens for their analogous site, Blinksale creates a subdued and even safe atmosphere for its site. Notice how they use the contrasting yellow to draw attention to their call-to-action. Photo

What we've just discussed are just the fundamentals of how color theory can enhance your UI design, but there's no limit to how in-depth you can go with colors on your site. If you'd like to know more, you can check out this piece in Smashing Magazine on how to create your own color palette. Color Assistance Tools Thankfully, there are plenty of tools to help you put color theory into practice. Check out these pre-made color palettes so you don't need to start from scratch. • Adobe Color CC – Once known as Kuler, this has been regarded for a while as one of the most trusted color assistance tools available. ● • Paletton – If you're in need of a tool for speed or a simplified ease-of-use, this minimal tool can help you. Great for beginners. • Flat UI Color Picker – While for flat UI designs only, this is still a useful and convenient tool for color selection.

Takeaway No one's expecting you to be Michelangelo, but a basic understanding of color usage is solid prerequisite for web design. As we've just explained, colors carry with them a lot of extra weight that sometimes goes unnoticed. No matter what colors you choose, they have a definite influence on the design as a whole – from communicating contrast or similarity, to evoking precise emotions.

Studies have shown that it only takes users about 1/10th of a second to form an impression of your site. To keep users engaged, your site needs to have an instant visual hierarchy that logically structures all of the elements we've discussed (color, space, contrast, etc.).

Now, let's look at how you can blur your designs to make sure they communicate as clearly as possible

The Blur Test At its core, the blur test, as designer Lee Munroe explains, is looking at a blurred version of your site and see what elements stand out. If it's not what you want to stand out, it's time to go back and make some revisions. Looking at a blurry version of your page will reveal the bare bones of your visual hierarchy, letting you see the layout with fresh eyes. The actual blurring of the site can be done in Photoshop, by adding a 5-10 px Gaussian blur on a screenshot.

What stands out for you on Wufoo's homepage? Sign up buttons and product features are both still prominent, while lesser content

takes second stage. The colors of the buttons pop out against the background (a contrasting color), while the white space centers focus on the product features. Alternative Approaches If you don't want to blur your design, you could just blur your vision and stand about 3 feet away from the screen. It's simple, even sounds a little stupid, but it definitely works. On the other hand, if your design already lives in the browser, you can try this quick trick with Chrome. • Open up your dev tools (F12) in Chrome. • Navigate to the body element and add -webkit-filter: blur(5px). You can adjust the blur pixels to your liking, but we recommend somewhere between 5 to 10 pixels. Repeating the Process After your first blur test, you might find that a few tweaks to visual hierarchy are needed. In that case, as Lee Munroe suggests, you'd want to look at adjusting elements such as:

Size • Contrast The 5-Second Test for Visual Hierarchy 75 • Color • Shape • Spacing & padding • Orientation & position Once you're done, repeat your blur test and keep iterating until it matches the user priorities. If you used the Photoshop or Chrome trick, you can try again with a 10 pixel blur to test if any unwanted elements are still sticking out.

Takeaway More than being creative, a good artist must also consider subtleties like composition, colors, size, what to include, and – perhaps more importantly – what to leave out. That's no easy feat, which is why we hold the masters like da Vinci and Van Gogh in such high regard. The 3 different blur tests we've described will help ensure that all the design elements on your page culminates into a single moment of meaning. Studies have shown that vision is our dominant sense, so make sure your first impression leaves the right lasting impression. We hope you've found the tips in this e-book helpful and actionable. Now, it's time to start designing your interface.

Section 4: Conclusion

Lecture 20

This is just the beginning

01:55

Students Who Viewed This Course Also Viewed

Loading

Loading

Loading

SHARE

Instructor Biography

I began my career as a freelance graphic designer but soon transitioned to technology where I founded my own web and mobile design studio where we help clients and companies design their own apps and websites .

I've worked for numerous prominent Advertising companies and startups in the Philippines designing web and mobile applications for local and international clients using Adobe Photoshop. From simple company logos to more advanced mobile design interfaces, I've honed my craft and expertise in graphic design throughout the years.

Currently, I'm cofounder of a mobile app startup in the Philippines where I specialize in User Interface and User Experience design.