How important is responsive web design and what are its benefits? — More and more people are using mobile devices for browsing, such as using smartphones and tablets for every task or daily work. Work that used to be only done through personal computers (desktops & laptops) now almost all of them can be used also through mobile devices.

The internet has begun to be taken over by mobile devices, more and more people are using mobile for browsing, not even just browsing, but activities on social media such as facebook, twitter, instagram, path, all done on mobile devices.

Responsive web design

You can imagine that a personal computer is usually in a special place in your room, so if you want to browse through a personal computer, you have to be in that room, while mobile devices are carried wherever the person goes, even to the bathroom, many carry their cellphones, while driving. Many cars are also browsing, so you can imagine how mobile humans are today.

Seeing the above phenomenon, you will be very disadvantaged if your website cannot be accessed by people via mobile devices. Websites must now be accessible via personal computers (desktops & laptops) and must also be accessible from mobile devices (smartphones & tablets), and the solution to accommodate both is responsive web, which allows websites to adjust the screen size of the device used by visitors. web.

What is responsive web design?

To answer what a responsive web is, you can read the previous post about Introduction to Responsive Web Design. Next we go straight to the benefits or benefits of responsive web design.

Increasing Mobile Users
If we look at the world today, we will find that many people are very dependent on their cell phones. From waking up until going to sleep again, the phone is always with you. Here are statistics that you can use to find out how many cellphone users.

More than 20% of google searches are now done via mobile.
In 2012 more than half of local searches were conducted on mobile phones.
25% of internet users in America only access the internet through mobile devices.
25.85% of all emails are opened on mobile, with another 10.16% opened on tablets.
By 2015 mobile internet users are expected to overtake desktop users.
Of the 4 billion mobile phones in the world, 1.08 billion are smartphones and 3.05 have SMS enabled.
Recommended By Google
Google is a very strategic platform, even Big G is claimed to control 67 percent of the search market share in 2013, making it the most popular search engine in the world. So, if Google claims that they prefer and recommend every website to implement responsive web design to accommodate mobile users rather than creating a separate mobile version of the website, then it’s a good idea to take this point as a guide for the goodness of your website, because this has been confirmed by Piere. Farr from Google in June 2012.

But why does google prefer responsive design? Firstly, because it’s more efficient for google bots to crawl your site and then index it then set it all up in their search results, the reason for that is because with responsive design, all sites have only one URL and the same HTML on all devices. When a business has both mobile and desktop sites, there will be different URLs (as if duplicates) and different HTML for each, and this will force Google to crawl and index multiple versions of the exact same site.

Also read: 6 Tips To Create a Responsive Website

In addition, if there is only one site and URL, then it is much easier for users to share, to engage and interact with the content on that site compared to sites that have different pages for mobile and desktop users.

Google realizes that users who are unhappy with this will go to another website, which means that this will increase the bounce rate and the site will not rank in mobile search, this can have a bad impact on your website’s SEO.

Can Increase Conversion Rates
In addition to all the benefits in terms of search, as well as making visitors happy, responsive web design has the ability to increase the conversion rate or conversion rate which of course is very much desired by every mobile user in the world. Why? If a website doesn’t work properly on a mobile or tablet device, then users certainly can’t be converted. And

So if visitors have to take more steps to complete a conversion with your site, then do you think they will still complete the conversion? The possibility is certainly very small, for example, people who view products on your website with a mobile device will find it difficult to make a purchase if your website does not support mobile, so if they want to complete a purchase then they have to switch to desktop, Ahhh really difficult, it’s better not to buy and search on other websites only. -__-

But with responsiveness, of course, the above can be resolved and purchasing goods on your website can happen easily, anytime, anywhere visitors are, even in the bathroom, they can complete the purchase of goods, because the responsive web can be opened on all screens.

Responsive design can also help you to do heatmapping and A/B testing or we can know it as A/B testing, this can be used with software such as ClickTale or Optimizely, where you can find out which parts are often clicked by visitors, how your website looks like interact with visitors, this can certainly help you to optimize the parts that are still not okay from your website. So again if your website doesn’t work on mobile devices, visitors will feel frustrated and leave your website. High bounce rate = low conversion rate. And, this is certainly bad for your business.

Good User Experience
Responsive web design can give visitors a better experience. For example, users don’t have to mess around with zooming and shrinking text and images on the screen. This makes it easier and more convenient for users to read and explore your site.

And there is a statistic that illustrates why user experience is so important. According to Google Think Insight on Mobile, every time someone arrives on your mobile website and is frustrated, or doesn’t see the content they were looking for in a short period of time, there is a 61% chance of leaving your website for another website. However, every time a visitor has a positive experience with your mobile site, it is 67% more likely to buy a product or use a service on the web. In addition, 48 percent of users stated to Google that when a site doesn’t work on a mobile device, they feel the company doesn’t care about their business (the evidence is that the web can’t be opened from a cellphone).

And there is a possibility that someone complains about the difficulty of using a certain site, then they will write or vent on social media about the badness of the site, and this will certainly tarnish the reputation of your website.

Easy To Manage.
Let’s get back to SEO a bit, if you have separate websites for desktop and mobile, you should run separate SEO campaigns for both. Wouldn’t it be easier to manage just one for the same website? It will not only make your customers happy, but also your employees, developers, marketing managers, and more importantly save money and effort.

Leading the Competition.
In the business world, we certainly have to be in front, must be ahead of our competitors. Responsive web design is favored by Google, so the chances of you being at the forefront of Google search results are certainly greater. With this, of course, you can overtake potential buyers so they don’t go to your competitors’ websites. Your website will also be considered good and even more modern by visitors. A good website will be more liked of course.

You already know and understand the benefits or uses and benefits of responsive web design, so what are you waiting for, get your site responsive right away.

See you in the next responsive article, Greetings web design Indonesia.

Tutorial on how to make a responsive web design — In this article, TWD will briefly explain how to create a responsive website layout, namely a layout that can adjust its appearance even though it is opened on various screen sizes (mobile phones, tablets and PCs).

This article is a continuation of the responsive web discussion, previously we were acquainted with responsive web, then after that we discussed in full what the benefits and uses of responsive web are for your business, then in this article we learn how to make responsive web design itself.

Purpose of This Article

In this paper we will try to create a responsive web layout, starting with a 3 column layout, then when opened at a certain size (1080px) it will become 2 columns, and then on a 780px screen down it will be 1 column.

You can see the changes in the image below:

responsive web design

First Create HTML Script
First we will start by creating the HTML structure, consisting of 3 main classes, and because we will create 3 columns, we will divide the .main class into 3 classes, namely .left, .middle and .right, each class will be given a certain size. and given the float property to form a column.

class header
main class (consisting of “.left”, “.middle” and “.right” classes
class footer

For the header section…

For the Left column…

For the middle column…

For the right column…

For the footer…

For the head section of HTML, don’t forget to tag the meta viewport, the tag is like this:

Insert meta viewport in head tag
Setting Layout With CSS
We have completed the HTML structure, but the layout has not yet been formed. So next we add CSS code to form a layout consisting of 3 columns, the css code snippet is as follows.

}
In the css code above, the column width is no longer specified, all divs are made width: auto which means they are made to fill the width of the screen, finally a layout with only one column is formed.

That’s a simple way to make responsive layouts, we only explain the basic principles to make it easy to understand, so the layout is made very simple. For serious projects you can develop again with other elements.

For the next elements such as responsive menus, responsive videos, and others, we may discuss them in subsequent articles.

If you are interested in trying and making your own you can see the full script below.

DEMO | DOWNLOAD SCRIPT

After this tutorial, I hope it helps you understand how to make responsive layouts so that your website can be opened on various screen sizes.

Example of a website with a smart and cool ux — A digital agency company called Viget has long been known as an agency that produces good quality websites. Some time ago they re-created a website that is quite interesting for us to look at, especially in terms of UX, which they applied to a website that sells sports accessories labeled Dick.

The aim of this product is to develop a lookbook that sells more and is shared more so that it will be known by more people, especially for their new baseball product.

Dick Sporting Goods

Viget is successful here because they can display products in attractive packaging on Dick’s new website, the baseball player scene format made with a video can actually allow visitors to easily find, share (share) and make purchases on their website.

Viget front-end developer Chris Manning mentions that they use vector-type assets wherever possible, as it allows them to scale SVG images well, saves on file size, and they also use web fonts to load pages faster.

Also read: 10 Cool and Inspiring SVG Examples

Another Viget front-end developer Doug Avery emphasized the challenges they face in creating a unique UX, according to Doug: “Fransform CSS was used as a way to scale video so it wouldn’t be a problem on a typical computer”.

The result was amazing, they managed to create a website with a very smart UX, has an interesting story for visitors and also a beautiful short video/film. And can be a reference for other website developers.

If you are curious you can see the website here (dsg.com).

Please enjoy the sophistication of the website, and hopefully it can inspire us all if one day we get a project with similar themes to the website.

Responsive Web Development Tools For Web Developers — Web design is an important part of a website development project. Clients today demand a responsive website to be made.

By using HTML5 and CSS3, it certainly becomes quite easy for developers. Developers can focus more on web design, user experience than back-end code.

There are many frameworks available online that can be used for web design. There are flexible grids, images and layouts that developers can use.

In this article, TWD will inform you of several tools that can be used to simplify your work in creating responsive web designs.

1. Front
   Frontont is an effective web-based tool that can run in your browser window. Can be used to design the front-end design of the website. This tool is easy to use, because you only need to drag and drop the provided elements and the HTML and CSS code will be formed by yourself.

front responsive web design
Front (Photo: lafermeduweb.net)

2. Screenqueri.es
   Screenqueri.es is an interesting pixel-based tool for creating responsive webs. You can test your responsive webview on 30 different devices using screenqueri.es.
3. Viewport Resizer
   Viewport Resizer is a browser-based design tool. You can test any responsive website using this. You can also create bookmarks from this tool in your browser. You can test screen compatibility easily with this tool.
4. Opera Mobile Classic Emulator
   There are still a lot of users who use Opera Mini on their phones. Therefore, developers also need to check whether the website is good if it is opened with Opera or not by using this Opera Mobile Classic Emulator.

mobile opera
Photo via kabatology.com

5. Review.js
   Review.js is developed with pure Javascript and can be used to test the efficiency of your web design. This tool follows the principle of “progressive enhancement”.
6. Jetstrap
   Jetstrap is a tool for building visual interfaces. This tool provides a way to quickly prototype in the browser. Designers who are used to working with Bootstrap can choose this tool. Just drag and drop in using this tool.
7. Adobe Edge Inspect CC
   It includes a fairly lightweight tool for checking web designs. You can download toolbars and plug-ins and test designs on different devices. This Adobe Edge Inspect CC follows a minimalist approach when designing.
8. The Responsive Calculator
   The Responsive Calculator is a tool for web designers to convert PSD pixels to percent. This tool is very useful to use during the early development of your responsive website.

Basic Steps to Create Responsive Web Design — Creating a responsive website is difficult and easy, it will be easier if you know what are the main things to pay attention to when you want to make a responsive website.

The login is simple, a website that used to have several columns will usually expand when opened on a smaller device such as a tablet or smartphone. So for that, it is necessary to set some of these columns to be more proportional when opened on a smaller device, for example by changing the column that was two columns into one column, extending downwards.

Responsive design is a design technique that makes websites look good when opened in various browsers with different screen sizes.

screen device size
Photo via line25.com

Some examples of responsive web are The Boston Globe, The Next Web and Okezone. If you want to check whether a website is responsive or not, you can use responsive web test tools.

There are at least three basic steps to create a responsive web, here are the steps.

1. Define Meta Tags For Responsive Design
   Mobile browsers will usually scale the html page according to the viewport width, which ultimately makes the website appear on the mobile screen. You can use the viewport meta tag to reset this. The viewport tag itself is used to tell the browser to use the device width as the viewport width reference and disable initial scaling. You can include meta tags like the following in the section.

Internet explorer browser versions 8 and lower usually don’t support the above tag, you can use media-queries.js or respond.js in IE by writing the following tag.

2. Define HTML Structure
   The second step is to determine the HTML structure of the website, the website usually consists of a header, content, sidebar and footer. Headers are usually made in full width and height according to needs.

While the content can be specified for example 660px width and 300px sidebar, so the overall width is 960px.

web design layout
web design layout (photo: monstertut.com)

3. Create Media Query in CSS To Command Browser.
   This is the last step that will make your website responsive, CSS3 capabilities here are very sophisticated, we seem to be able to use conditions (IF) like programming languages ​​such as PHP and JS. But here CSS3 only provides conditions for how the browser must render the page for the viewport that has been set in width with CSS3 as below.

The CSS below will tell the browser, when the screen width is 960px or less, then run the script, set the width according to the script. Here the wrapper width is set to only 96% of the screen width. While the content is set so that the width is only 66% of the screen width, and the sidebar width is 30%.

/* If the screen is 980px or less */

@media screen and (max-width:980px) {

wrapper{

width: 96%;
}

maincontent{

width: 66%;
}

sidebar{

width: 30%;
}
}
However, if the screen size is only 680px or less, then run another script as below, where the width is set to auto, or automatically follows the screen width, as well as the sidebar, made auto too so that the width follows the screen width, while the float is set to none so that the div elements are arranged downwards.

/* If the screen size is 680px or less */

@media screen and (max-width:680px){

maincontent{

width: auto;
floats: none;
}

sidebar{

width: auto;
floats: none;
}
}
Then set if the screen size is 480px or less (usually this is the size for cellphones/smartphones), then we can hide the sidebar and set the header height to be auto. You can set all conditions yourself based on your needs.

/* If the screen size is 480px or less */

@media screen and (max-width: 480px) {

headers{

height: auto;
}

sidebar{

display: none;
}

}
Those are some important steps to make a website responsive, so you need to pay attention to the meta tags and media queries in CSS so that the website can appear proportional, this is of course just a theory, for an example of how to make it you can read the previous article entitled Tutorial How to Make a Design Responsive Web.

Hopefully this short article can help you understand the basic steps of making a responsive website.

Amazing web design facts — If you are someone who is easily fascinated or easily irritated by the appearance of a website. Then you need to know how the ins and outs of the web design process. Being a visitor is indeed trivial, just open the web here and there, but only a few people understand the activities behind the creation of the visited website.

You have to understand how different web browsers display websites, visitor experience or visitor habits towards a website is very dependent on basic factors such as the loading time of the website, browser variations, code age and website content. Following are some pretty amazing and interesting aspects of web design that you need to know about.

1. Websites are processed differently on each web browser.
   rip ie
   Photo via blog.thepitagroup.com

When you view a website using Google Chrome from your home computer you may see the same view as in Safari on an iPhone. But not necessarily the same when viewed with Internet Explorer or Opera, because each browser usually translates the code to display the website differently. In some browsers there are new features or technologies that have been adopted, while other browsers sometimes have not been able to adopt these features, as a result the display becomes different. The difference in the way the browser does rendering is hell for developers who always want to provide good security to their visitors. Professional web designers are usually experts in dealing with this problem because they are familiar with standard HTML and CSS codes.

2. Design determines where the user will focus on your website.
   The internet has changed the way we read and browse content. According to a report from the Nielson Norman Group, “How Users Read on the Web” that a successful site with a clear and scannable layout had a usability increase of up to 47%. If visitors can’t find information quickly from your website, then they are likely to leave your website and visit another site instead.

web design facts
Web Design Facts (Photo: picjumbo.com)

Web designers try to create a site display that allows visitors to immediately focus on important information to be conveyed (target), such as an online store, company blog, an organization’s history, or other content that is important to them and to you as a visitor. Web professionals can also use heat maps and analytical tools to see which popular buttons or links are clicked frequently so they can continue to improve the user experience by updating regularly.

3. Website age: 2 years is considered old
   Web designers are constantly working hard to be able to compete quickly as technology advances. As web browsers and the devices used to access websites continue to change, so must the way in which websites are designed and developed. To be able to stay updated with the latest technology, digital professionals must stay on the latest coding standards, update compatibility between browsers and keep up with changes in search engine algorithms.

Seconds Old Display
Seconds Old Display (Photo:dunia-reja-sehat.blogspot.com)

An outdated site runs the risk of not performing optimally in web browsers, experiencing unexpected formatting issues, or not showing up properly in search engines. In this case, the two-year-old site may be outdated and not in line with current changes. Hm… tired of following technology.

4. Templates limit what you can do with your website.
   milleur bootstrap template

Many people are now turning to websites with template systems as an “easy way out”. Initial template packages usually allow people to build websites with little or no coding knowledge. But unfortunately, companies can lose credibility by relying too much on templates, which usually includes too much code that the website doesn’t really need, and even premium templates that provide too many elements that are not needed. There are some templates that are flexible in what to use and what not, but others can’t. It would be better if your website is specially made and uses a special design and with a concept that is also specially designed to better suit the needs of the website.

– Also read: Examples of Smart UX Implementation in a Sports Equipment Website

5. Your website code helps to attract the attention of search engines
   keywords

You may be able to have a site that has guests

We definitely know and have seen this hamburger icon. For example, almost every day you see the icon in the upper right corner of the Google Chrome or Mozilla Firefox browser, which is a sign for the Settings menu.

hamburger menu icon

For the world of web design, we also see debates about how to use the hamburger icon well and in which position the hamburger icon is generally placed so that users don’t get confused.

Norm Cox
Norm Cox

This Hamburger / hamburger menu icon was first designed by Norm Cox for Xerox Star, the world’s first graphical user interface. Norm Cox is the co-founder of Cox & Hall and has been a consultant for interaction/experience design since 1982. He has also designed the icon documents for the same interface. Geoff Alday is an awesome software designer who went looking for the hamburger icon creator and managed to find this video.

hamburger menu icon history
It was created in 1990, sponsored by ACM CHI, tells the history of widgets. Source: Brad Myers on Vimeo.

From there he emailed Norm Cox, who was happy to share the origin story of the hamburger icon. Here’s what he said:

“Its graphic design was meant to be very “road sign” simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16×16 pixels to render the image. (or possibly 13×13… can’t remember exactly).”

After using Xerox Star, the hamburger icon disappeared for some time.

Hamburger Icon Revival
Newer, smaller hamburger menus, owned by smartphone interfaces, designers had to figure out how to make things fit for a screen that was only 4 inches. It’s not clear what app first used the hamburger icon on a smartphone, but what some people remember is

Voice Memos on iOS
This seems to be the oldest (outside of Xerox) to use the hamburger icon as a menu button. This happened on June 17, 2009, which is currently available on iPhone 3Gs. If you click on the menu, it will bring up a list of recordings and options.

iphone voice memo

Tweetie for iPad
Tweetie was the first app available for Twitter, created by Loren Brichter, who happened to be working at Apple at the time. This app came out in 2009 and uses the hamburger icon for lists. It seems like a mere coincidence that an Apple designer uses this.

tweetie for ipad

Facebook Makes It More Trending
Facebook also seems to have been a big contributor to the spread of using the hamburger icon for menus. It started with a Grid icon like this in 2008.

Facebook

And the number of rows increased with the Facebook app update in 2009

Facebook

And in 2010 it became just lines, no longer in the form of a grid.

facebook 3

Facebook is now using a side menu for its app, this seems to be one of the most memorable first sightings of the hamburger icon.

It seems like Apple is the biggest reason for the revival of the hamburger icon. They brought the hamburger icon to their big smartphone. Apple was a fan of the Xerox idea and they started using it in the interface, from there the massive social media apps took over and others followed suit.

Currently the hamburger icon is widely used to represent the side menu / side menu on websites and applications as lists. Some of the great applications that use it are.

Path

Path uses the hamburger menu for the navigation section.

path

Twitter Bootstrap and Navigation menu on the mobile version of the Starbucks website.

starbucks bootstrap

Here are other examples of using hamburger menus on modern websites

Example of a hamburger menu

Hamburger Menu

Use of Hamburger menu

The Future of Hamburger Menu
The hamburger icon has become a staple in apps as well as on websites, and this is likely to last a very long time, and become increasingly massive in use. The hamburger menu also seems to have been warmly welcomed by the various UX / UI communities. Some say it’s a terrible thing and should be discontinued right away and replaced with a menu or with a more useful tab bar. Some hate it but some like it.

Some people also collect websites that use hamburger menus in a simple and simple way as inspiration for other designers.

So when did you first see an icon like this ?

That’s a brief history of the ha icon

Tutorial on making website form designs with Photoshop — Forms are an important part of being on a website, any type of website usually has a form, be it a login form, contact form or subscribe.

The form is very useful so that visitors can interact with the website owner either through comments or special messages, the form also needs to be well designed so that the expected interaction can be carried out.

Here are some tutorials on how to create a form using Photoshop that you can follow in the tutorial.

1. Create a Web 2.0 Login Form With Photoshop
   create a photoshop login form

In this tutorial, we will teach you how to create a login form for web 2.0 which has a clean and slightly glossy characteristic.

Follow the Tutorial Part 1 (Creating the PSD) & Part 2 Coding HTML & CSS

2. Tutorial to Create a Contact Form With Photoshop
   create a photoshop contact form

In this tutorial you will learn how to design a contact form with a classic theme in green.

Follow the tutorial

3. Tutorial on Creating a Contact Form With PSD, HTML and CSS
   create a contact form with photoshop html css

This tutorial will teach you how to create a contact form from design creation in photoshop to converting to HTML and CSS

Follow the tutorial

4. Create a Login Form With Photoshop
   create a login form with photoshop

This tutorial will teach you how to create a login form using Adobe Photoshop from scratch, good enough for those of you who are learning web design.

Follow the tutorial

Those are some tutorials for making forms using Photoshop that you can follow both for learning purposes and to support work. Hopefully Useful, Greetings Web Design Indonesia

Tips for making the perfect web design / perfect — Creating a perfect web design is a task that is not easy even classified as very difficult for some people, and this is far from just looking beautiful, but also must be rich in content. Here are five tips to help you get started.

1. Know your market
   Research is the foundation of any graphic design project – web design is basically the same thing. Getting information about the market will give you a better understanding of these industry trends. Knowing the purpose of the website as well as the target audience of the website will help you to decide what elements should be present and which elements should not, as well as coloring and other things.

– Also read: Some Important Elements In Responsive Web Design

2. Make it as simple as possible
   You never get a second chance to make a first impression! This applies to everything. The brain prefers to think about things that are easy to think about – so a website design with a simple navigation structure that is clear and visible on whatever page the user is on is important to pay attention to. You can use the first page/homepage as a portal to other areas of the site; make a snapshot or a brief description of the website that was created.
3. Balanced between Art and Science
   web design
   Web Design via ragingcreations.com

Using a structured grid will help create order and consistency. A grid defines elements that appear in the same position throughout the website, such as logos and navigation. However, depending too much on the grid can make the design look monotonous, so a little out of the way of the grid with text, testimonials and images will make the website interesting to look at, make sure you pour your knowledge about the web in balance with your artistic spirit.

4. Put Users as Top Priority
   Making users feel that the time they spend visiting your site is not in vain is also very important, making it easier for them to find information on the website so they don’t get bored and waste time. As mentioned in point 3, use a grid system to establish trust in the eyes of users, which allows them to find information and navigate the site easily.
5. Make sure it looks good
   Pay attention to the details of the web design, make sure the pixels in the image look perfect, and the image looks sharp, clean and has good contrast. And don’t forget to test your site in several different browsers as well as on several different devices to make sure your website looks good on all devices, if not, of course you have to optimize again.

– Also read: Tutorial How to Create Responsive Web Design

Differences between UI and UX — Nowadays, the terms UX designer and UI designer are increasingly being heard in forums about design, in seminars, workshops or in a number of blogs that discuss matters related to the design world.

Not only being discussed, but a number of companies have also been looking for employees who have UI and UX skills. We need to know that UI stands for User Interface, while UX stands for User Experience.

There are still many who are confused about what UI looks like and how it differs from UX. In the web world, UI is more about the physical appearance of a website design that is pleasing to the eye, including attractive colors, layout sizes, and so on. Whereas UX is the more interactive side of a website, and how that interaction behaves with visitors, such as where to place the “Buy” button, or where to position the search form best, and so on.

To understand a little about the difference between UI design and UX design, take a look at the following infographic.

(click image to enlarge)

Difference between UX Design and UI Design
Difference between UX Design and UI Design via wassai.com.uy

(click image to enlarge)

It can be seen in the figure that UX is more focused on functional matters, in the example of the dining table atmosphere, it can be seen how well the knife is placed, for example, the knife is placed on the right while the fork is placed on the left, because most people will cut something by holding the knife uses the right hand, while the fork is used to resist friction against the object of food when someone uses a knife to cut. The position of the sharp knife is directed inward so that when held the position is immediately right for cutting food. A person’s tendency towards something he likes is something a UX designer should be able to capture so that the user feels safe and comfortable. While the UI is more about the beauty of the appearance, good color selection, the right color composition, and things that make the display pleasing and pleasing to the eye.

Hopefully this article clears up your confusion a bit about the difference between UX and UI.