7.

Introduction to UX/UI design

7.1 Why do businesses need a website and what is attention trading?
• Why does a business need a website? The main reason why a business needs a website is
to improve its sales and increase the growth of the business.
 How does a website help the growth of a business then? You must understand
how businesses work to answer this question. Here are the things all businesses do
in general:
• Starts with a vision
• Creates the product and/or service
• This includes hiring and managing the employees who develop the
product
• Markets and sales the product
• Keeps customers satisfied. The financial advantage of doing keeping
customers satisfied
• They can be a repeat customer
• They refer more customers
• Where does a website play a major role then?
 Unless the company sales a SAAS product, most websites are not the product
• SAAS product example: Gmail, Dropbox, Salesforce, etc.
 In majority of times, the role of a website is in marketing and sales of products
and/or services.
• what is attention trading?
 Here is one unavoidable fact about marketing and/or sales: you cannot sale a
product if you cannot grasp the ATTENTION of the consumer.
 Remember ATTENTION is a limited commodity
 Once you get the Attention, what sales is not the number of facts and information
you provide to the customer. It is how you make the customer FEEL.
• If they feel good, they will buy your product
 So, with this understanding, remember the main GOAL of a website is to Grasp
the ATTENTION of the customer and make them FEEL good during their stay.
Which ultimately contributes to the success of the business.
 The question is, how do you achieve these two main goals? That is where UX/UI
designers come to play. As a developer, it is our main duty to understand what the
 designers are trying to achieve through their design and help them bring their
design to life.
 We will briefly cover some of the steps designers take to achieve the main goals.
We will also cover how you can use Photoshop to get the main components of the
design that we need to develop the website.

7.2 Web design (UX and UI design)

• Web design has two major fields under it: 1/ UX design and 2/UI design
 UX design: UX stands for User Experience.
• User experience design is the process of developing and improving the
quality of interaction between a user and all facets of a Website/App.
• UX design is NOT about visuals; it focuses on the overall FEEL of the
experience. For example, it deals with how easy the checkout process is
for a user in a shopping website like Amazon
 UI design: UI stands for user interface design
• The goal of UI design is to VISUALLY guide the user through the website. It considers all
the visual, interactive elements of a website including buttons, icons, spacing, typography,
color schemes, and responsive design.

• How do UX/UI designers achieve their main goal/grasping customers’ attention and
making them feel good? After thousands and thousands researches and tests, designers
have already identified what annoys users and what makes them happy. From these
identified insights, there are solid principles that are followed by web designers to either
make users happy or at least not to annoy them. Here are some of the top design principles:
 Simplicity and clarity
• It takes as little as 0.5 seconds for visitors to decide whether they are
interested in a website or not
• Users should not have to THINK about what you want them to do.
Examples of the things you can do to achieve this: o Agreement
checkboxes can be pre-checked o Form should give default
values when possible (Eg, state)
• Remove elements that are not necessary
• Avoid unnecessary clicks
• Example websites to compare simplicity and clarity:
 o https://www.yahoo.com/ o
https://www.google.com/
 Design should focus on experience

• People don’t always remember information presented, but they do

remember what/how they felt
• Respect user’s time o Do not hide useful information just to show ads o
Make sure the website loads fast
• Use loading on scrolling vs "next page"
• Use quality pictures
• Provide help, when possible
• Show what users want to see first, not what you want them to see
 Have a clear hierarchy: People should be able to go navigate easily on the
website, regardless of the device they are on
• Use commonly used navigation signs and places
• Use humbugger icons
• Include top menu
• Keep it consistent through out
 Understand that colors and fonts have meanings
• Meaning of colors:
o Red symbolizes fire and power o Orange symbolizes happiness,
joy and sunshine.
o Yellow symbolizes joy, intelligence, brightness, energy,
optimism, and happiness.
o Green symbolizes nature and has a healing quality o Blue is a
peaceful and calming color exuding stability and expertise
o Purple is the color of royalty and sophistication o Black
symbolizes power, elegance, sophistication, and depth. o White
symbolizes purity and innocence
 • Meaning of fonts: visit this link to understand the meaning of
fonts o https://digitalsynopsis.com/wp-
content/uploads/2017/02/fonthttps://digitalsynopsis.com/wp-
content/uploads/2017/02/font-moods-emotions-
infographic.jpgmoods-emotions-infographic.jpg
 Other design principles: visit the link below for further understanding
• https://www.springboard.com/blog/ux-design-principles/

7.3 Web design psychology

• Growth psychology: This psychology is about how you make people spread the word about
your product by applying some design psychologies. Google is famous for using this
psychology on Gmail, Dropbox also used growth psychology to spread information about
its product. Recommended books to read on growth psychology:
 Contagious: Why Things Catch On (Jonah Berger)
 Hacking Growth: How Today's Fastest-Growing Companies Drive Breakout
Success (Sean Ellis and Morgan Brown)
• Engagement psychology: This psychology is about how one can capture the attention of
users and make them to stay longer on the website. Facebook is the best example for
achieving the highest fruits of engagement psychology. Recommended books to read on
engagement psychology:
 Hooked: How to Build Habit-Forming Products (Nir Eyal and Ryan Hoover)

7.4 What do web designers design?

• There are 5 main components of designs web designers do:

 The information architecture: The major role of information architecture is to
provide its users an easy navigation no matter which browser they are using
 Interaction design: Interaction Design is about creating the conceptual design
with which the users interact with the website
 Usability design: Usability can be referred as the user-friendliness
 Wireframing: Wireframing is about creating a sample of the application to test
the features, look and usability of the application before the final visual design
  Visual Design: Visual Design is not only about selecting the best images, colors,
icons, fonts, but also identifying how the appearance of the website impacts the
interaction of its users.

• Examples of applications/software to put together the final design:

 Sketch: https://www.sketch.com/
 Adobe Photoshop: https://www.adobe.com/products/photoshop.html

7.5 Essential photoshop skills as a web developer

• Are skills in Photoshop needed as a web developer? Photoshop is a full course on its
own and as a web developer are not expected to master it at all. But it is very helpful to
understand the basics
• Basic Photoshop Concepts:
o Layers: Layers are used in digital image editing to separate different elements of an
image.
 Creating layer
 Selecting layer o Color mode
 RGB mode: RGB refers to the primary colors of light, Red, Green and
Blue, that are used in monitors, television screens, digital cameras and
scanners. the RGB color mode is best for digital work (ex. for screens)
 CMYK mode: It's always best to start editing in RGB mode before
converting to CMYK. use this mode for images you want to print)
o Document size
 Not the same us the file size
 This is Width and height o Saving a file
 Save as .psd: This keeps the layers as is
 Save as .jpeg: Best to use when you want a higher quality
 Saving as .png: Best to use when you need the image to show what is
behind
o Picking color: There is a color picker on Photoshop o
Selecting font: There is a text editor on Photoshop
• Basic images concepts o Image proportion: Please pay attention to this!!
 o Image size:
 Rule of thumb
• Try to keep all images under 200kb
• The lesser the size of an image, the better quality it will have  Resolution
• Image resolution setup is mainly for printing
• Don't worry about choosing the right resolution for now. Just leave it on the default 72ppi
 Image format
• .jpeg
• .png
• Main Photoshop Tools o Move tool o Selection tools
 Lasso tool
 You draw your own selection
 Very helpful when you try to isolate an item o Magic wand
 Picks the specific color you want to pick
• Today's session focuses on the main skills you need as a developer. But if you want to
learn the above photoshop tools, there is another bonus MizanIT class given to previous
students. Here is the link to the class video:
o Here is even a better photoshop tutorial video from YouTube:
 https://www.youtube.com/watch?v=pFyOznL9UvA&ab_