0% found this document useful (0 votes)
76 views21 pages

Assignment 1 Front Sheet

This document discusses DNS (Domain Name System) and how it converts domain names to IP addresses, allowing users to access websites. It describes cached DNS records and common record types like A, MX, CNAME, and NS records. The document also discusses subdomains and how they function as extensions of the main domain to create multiple websites. Name servers are defined as the systems that associate information with domain names, allowing users to look up IP addresses and locate networking devices using easy-to-remember domain names.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
76 views21 pages

Assignment 1 Front Sheet

This document discusses DNS (Domain Name System) and how it converts domain names to IP addresses, allowing users to access websites. It describes cached DNS records and common record types like A, MX, CNAME, and NS records. The document also discusses subdomains and how they function as extensions of the main domain to create multiple websites. Name servers are defined as the systems that associate information with domain names, allowing users to look up IP addresses and locate networking devices using easy-to-remember domain names.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 21

ASSIGNMENT 1 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title 10: Website Design & Development

Submission date Sep – 03 – 2021 Date Received 1st submission Sep – 03 – 2021

Re-submission Date Date Received 2nd submission

Student Name Dang Tan Tai Student ID BSAF200013

Class PBIT16101_CNTT1 Assessor name Dao Ngoc Anh

Student declaration

I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that
making a false declaration is a form of malpractice.

Student’s signature

Grading grid

P1 P2 P3 P4 M1 M2 M3 D1
❒ Summative Feedback: ❒ Resubmission Feedback:

Grade: Assessor Signature: Date:

Signature & Date:

Assessment Criteria

Pass Merit Distinction

LO1:

P1 Identify the purpose and types of M1 Evaluate the impact of D1 Justify the tools and

DNS, including explanations on how common web development techniques chosen to realize a

domain names are organised and technologies and frameworks custom built website.

managed. with regards to website


design, functionality and
P2 Explain the purpose and relationships
management.
between communication protocols,
server hardware, operating systems and M2 Review the influence of
web server software with regards to search engines on website
designing, publishing and accessing a performance and provide
website. evidencebased support for
improving a site’s index value
and rank through search
engine optimisation

LO2

P3 Discuss the capabilities and M3 Evaluate a range of tools


relationships between front-end and and techniques available to
backend website technologies and design and develop a custom
explain how these relate to presentation built website
and application layers.

P4 Discuss the differences between


online website creation tools and custom
built sites with regards to design
flexibility, performance, functionality,
User Experience (UX) and User Interface
(UI).
Table of Contents
Introduction 6

I. Identify the purpose and types of DNS, including explanations on how domain names are organised and managed 6

1. What is DNS? 7
2. What are cached DNS records? 7
3. What are subdomains? 7
4. What is name server? 8

5. How does DNS work? 8


6. Is DNS important to us? 8

II. The purpose and relationships between communication protocols, server hardware, operating system and web server 9

1. Communication Protocols 9

2. Server Hardware 9
3. Operating Systems 11

4. Web Server 12
a. Web server hardware
b. Web server software

III. Discuss the capabilities and relationships between front-end and back-end website technologies and explain how these relate to
presentation and application layers 14

1. What is Front-End? 14
2. What is Back-End? 15
3. The relationship between Front-End and Back-End 15

IV. Discuss the differences between online website creation tools and custom built sites with regards to design flexibility, performance,
functionality, User Experience (UX) and User Interface (UI) 16

1. U.X Design 16
2. U.I Design 17
3. The relationship between U.I and U.X 19

References 21
Introduction

The Fourth Industrial Revolution is a combination of technology in the fields of physics, digital technology and biology, creating entirely new
production possibilities and having a profound impact on economic life. , political, social of the world. Besides, with the development and
resurgence of the digital technology empire, most companies or individuals today have to transform digitally with the times and adapt to them due
to the strong development power of the internet world and most of us have a phone to access world news, shop on each website and that's why
web technology was born. To serve this problem, BFSOFT technology group was established with the vision of bringing a combination of traditional
lifestyle combined with a technological lifestyle and that's why we were born an online coffee selling application through the internet and more
clearly through the Web application.
I. Identify the purpose and types of DNS, including explanations on how domain names are organizing and managed.

1. What is DNS?
DNS (Domain Name System) is domain name resolution system. In the most succinct way, DNS is basically a system of converting the
website domain names we are using, in the form of www.tenmien.com to a digital IP address corresponding to that domain name and vice
versa.

2. What are cached DNS records?


DNS cache refers to the temporary storage of information about previous DNS lookups on the machine's operating system or web browser.
Keeping a local copy of a DNS lookup allows your operating system or browser to quickly retrieve it, and so a website's URL can be resolved
to its respective IP much more efficiently. The basic functionality of the different types of caches is the same. However, if you need a more
comprehensive explanation of cache, check out our cache definition article.
Summary, DNS record is a record located in DNS servers that provides information about the DNS database, showing domains, IP addresses
associated with a domain name and how to process requests to that domain name… All domain names On the internet, there must be a few
DNS records needed so that users can access the website when entering a domain name and performing other purposes.
 We have 7 types DNS records cache:
o CNAME Record: Allows you to create a new name, point to the original name, and set a TTL. In short, if the main domain
wants to set one or more other names, this record is required.
o A Record: This record is commonly used to point the Website name to a specific IP address. This is the simplest DNS record,
allowing you to add Time to Live, a new name, and Points To.
o MX Record: With this record, you can point Domain to Mail Server, set TTL, Priority. The MX Record specifies which Server
manages that domain's Email services.
o AAAA Record: To point a domain name to an IPV6 Address, you will need to use AAA Record. Nod allows you to add new
host, TTL, IPv6.
o TXT Record: You can also add new TXT, Host, Points To, TTL values. To contain the Domain's text formatting information, you
will need this record.
o SRV Record: A record used to determine exactly which service runs on which port. This is a special record in DNS. Through it
you can add Name, Priority, Port, Weight, Points to, TTL.
o NS Record: With this record, you can specify the Name Server for each subdomain. You can create a new Name Server, Host,
TTL.
3. What are subdomains?
Sub Domain is a subdomain or extension of the main domain name. Usually free to install and can function like a regular domain name.
Sub Domain allows users to create many different websites. By adding subdomains to the main domain. This will help businesses reduce a
lot of costs for domain name registration and new website creation.
And what is the different between subdomains and domain?

Domain Subdomain
It supports users to create and run multiple websites on the same Sub Domain is the subdomain of the main domain name, can be
hosting. To put it simply, the registration of a domain name used as a domain name. With the identifying feature is the prefix
(domain) is created to distinguish it from other websites. that precedes the main domain name.
Example: I want to have a The main domain name is Example: From the example in the left we would have a subdomain
https://www.matbao.net is https://www.wiki.matbao.net

4. What is name server?


Name server is an ordinal naming system for computers and services participating in the Internet. It has the effect of associating a variety of
information with the domain names assigned to them so that users can use that domain name to look up the information they need to
know.

It is important that you choose a domain name that makes sense and leaves an impression on the user, which links with network devices to
locate and provide the necessary information.

The Name Server is responsible for assigning domain names and networking IP addresses by specifying authoritative servers for each
domain name.

Authoritative name servers that will be responsible for their own domain names may assign their own proprietary other name servers to
subdomains.

5. How does DNS work?


Before we are going to start research how does DNS work we would to know about an organization “INTERNIC”, “AT&T” and Network
Solution.
INTERNIC (Internet Network Information Center) is responsible for monitoring domain names and their respective DNS servers. INTERNIC is
an organization formed by the NFS (National Science Foundation), AT&T and Network Solution, responsible for the registration of Internet
domain names. INTERNIC is only responsible for managing all DNS servers on the Internet, not for resolving names for each address.
What is the working principle of DNS?
Each service provider operates and maintains its own DNS server, consisting of machines within each service provider's own portion of the
Internet.

That is, if a browser searches for the address of any website, the DNS server that resolves this website's name must be the DNS server of
the organization that manages the website, not an organization (service provider). ) any other.
DNS has the ability to query other DNS servers for a resolved name. The DNS server of each domain name usually has two different things.

- First, it is responsible for resolving names from machines within the domain to Internet addresses, both inside and outside the domain it
manages.
- Second, they respond to external DNS servers trying to resolve names within the domain it manages. The DNS server is capable of
remembering the resolved names. For later resolution requests. The number of name resolutions stored depends on the size of each DNS.
6. Is DNS important to us?

DNS is responsible for how we use the Internet. Without it, you wouldn't be here at the website you currently visit, use Google, visit
Facebook, watch Netflix, or send email in Outlook.

This is because remembering a domain name like bfsoft.com is often much simpler than remembering the IP address. Another problem with
IP addresses is that, unlike domain names, they can change.
For example, if we switch our web hosting provider for vnpt.vn, our IP address may change. Without DNS, our users wouldn't be able to find
us without knowing the new IP address.

II. The purpose and relationships between communication protocols, server hardware, operating system and web server

1. Communication Protocols
A communication protocol, also translated as communication protocol, internetworking protocol, interaction protocol or information
exchange protocol, is a set of standard rules that allow two or more entities in a system to communication to exchange information and
data through communication channels. The protocol defines the rules, syntax, semantics, and synchronization in the communication
process, and can add methods to overcome errors on the transmission line. Communication protocols can be implemented on hardware,
software, or both.
We have 8 type communication common protocols:
 TCP( Transmission Control Protocol): establish a connection between computers to transfer data. It breaks data into packets
(packets) and ensures successful data transmission.
 IP(Internet Protocol): is a protocol, or set of rules, for routing and addressing packets of data so that they can travel across networks
and arrive at the correct destination.
 HTTP(Hyper Text Transfer protocol): Access to exchange the information, and be sure the data will receive at the place request
 FTP(File Transfer Protocol): Access to file exchange
 SMTP(Simple Mail Transfer Protocol): allows sending electronic mail messages (e-mail) over the Internet.
 POP3(Post Office Protocol): allows to receive e-mail messages over the Internet.
 MIME(Multipurpose Internet Mail Extension): an extension of the SMTP protocol, allowing to send binary files, movies, music, ... by
email.
 WAP(Wireless Application Protocol): allows the exchange of information between wireless devices, such as mobile phones.
2. Server Hardware

Server Hardware is the hardware of the device, the components that make up a complete device. With PC, devices such as mouse,
keyboard, monitor, hard drive, DVD drive... are hardware devices.

Simply put, hardware is the parts that you can see.

Standout features of server hardware:

Depending on the user's needs, the server application will have different hardware requirements for that server. The server's job is to
provide services to many users on a network, resulting in different requirements.

With the characteristic of operating continuously for a long time, server hardware requires very high availability. So hardware reliability and
durability are extremely important criteria.

When choosing a server, users should choose branded and reputable ones.

How does server hardware work?


Servers typically do pre-boot memory checks and start remote management services.

The hard-drive controllers then start the drives continuously, rather than all at once. The goal is not to overload the power supply with a
gradual start-up. They then start running to a RAID system that requires testing for the correct operation of the backup device.

This process can take a long time compared to a computer that only takes a few minutes to boot. Sometimes it may not need to restart for
months or years.

Many server hardware configurations take a long time to boot and load the operating system.

Server hardware components

Basically, a physical server has a server system structure like a regular PC. However, there are certain differences between the components
of server and PC hardware.

Server board

The chip set of the main server is always completely different from the PC because of its extremely strong virtualization support. These must
be server-specific chips with specialized virtualization capabilities, especially with the main types of servers to create virtual servers.

Normally, most PC motherboards run on old chipsets such as Intel 845, 865 or new Intel 945, 975, etc.

Server hardware motherboards often use specialized chipsets such as Intel E7520, Intel 3000, Intel 5000X, etc. These chipsets stand out for
their ability to support high-speed interfaces such as RAM ECC, HDD SCSI – SAS, Raid or support for multiple Xeon CPUs, etc.

Processor (CPU)

A server CPU is a powerful CPU with excellent processing capabilities with lots of cores and threads. At the same time, the CPU must also be
able to support superior server functionality. Do not use Sockets in the form of 478, 775 with Pentium 4, Pentium D, Duo core, Quadcore
lines such as PCs, servers using separate CPUs, mostly Xeon series.

Operating on sockets 771, 603, 604 with high L2 cache capacity, hard virtualization capabilities, other specialized instruction sets, etc., the
Xeon series has a completely different architecture. Some low-end servers still use the Socket 775 CPU as their main processor.

Memory (RAM)

In the market, you can find DDR RAM I, II with Bus 400, 800, etc. Actually, RAM for server is similar but with ECC feature added.

What is the EEC feature?

EEC (Error Corection Code) is a type of RAM that has the ability to control the flow of data accessed in it to automatically correct errors.

What are the advantages of EEC?


When a collision occurs, RAM ECC simply requests to resend the correct packet that crashed. You will reduce risks and operating costs
because ECC RAM is very stable.

EEC helps your machine not hang, dump blue screen when any 1 bit is faulty during data processing.

Furthermore, these RAMs are hot-swappable for replacement when damaged without having to shut down the system. However, the
motherboard must support this new RAM standard to be able to use this RAM.

What is server hardware? 4

Hard Drive (HDD)

To ensure the ability to store extremely high volumes of data, the hard drive and the speed of the hard drive are always a top concern. The
storage capacity and rotation speed of dedicated hard drives for servers are always much higher than those of PC hard drives.

If the PC's HDDs usually have IDE, SATA I, and SATA II interfaces, the server HDDs operate on SCSI or SAS (Serial Attached SCSI) interfaces.
This interface has a higher bandwidth (600MB/s) and has an almost 30% higher rpm (10,000RPM). In particular, some new SAS drives even
reach 15,000 RPM to maximize data read / write speed.

Raid controller board

This is an important component of server hardware in a modern server. This controller board combines the hard drives into a single unit
with backup mechanisms. In the event of a physical failure, these backup mechanisms protect against failure to keep your data safe.

Depending on the board, the ability to support different levels of Raid. Two levels that are common in most servers are Raid 1 and Raid 5.
However, you may not need to retrofit as some server boards already have this controller chip built in.

Power Supply Unit (PSU)

The component that supplies power to the internal devices plays an important role in the server's operation. Therefore, dedicated server
lines often follow high-power power supplies that can be replaced or backed up when the main power supply fails.

3. Operating Systems
Define: An operating system (Operating Systems, abbreviated as OS) is software that allows users to run other applications on computer
devices, mobile devices, hereinafter collectively referred to as machines. The operating system is also responsible for managing hardware
and software resources on the machine such as:

Input devices such as mouse, keyboard, touch screen, camera, microphone


Output devices such as monitors, printers and scanners, speakers
Network devices such as modems, routers, antennas, WiFi modems, SIM cards
Storage devices such as hard drives, USB drives, SSD drives, flash memory
The operating system also takes on the role of execution and management to efficiently allocate memory for the applications running on
the machine. For example, if many programs run at the same time on the computer, the operating system allocates the resources of the
computer so that all running programs as well as additionally opened programs receive the required resources.
Some details of O.S:
Basically a software application can communicate directly with the hardware. However, most current software applications are written for
operating systems to take advantage of common utility libraries, saving programmers from having to worry about hardware problems.
Overall, the operating system is like a comprehensive framework that interacts consistently with all applications. The advent of operating
systems greatly simplifies the entire process of developing software applications.
Some of the main components of the operating system
Kernel
The kernel of the operating system controls the basic features of all hardware devices on the machine. The primary role of the Kernel is to
read and write data to memory, process executable instructions, determine how data is received and sent by devices such as monitors,
keyboards, and mice, and define data interpretations. whether received from the network.

User Interface (UI)


This is the component that interacts with the user, conducted through screens and graphical icons or through the command window. UI has
two types as Command Line Interface (CLI) where the user communicates with the system using commands. The other type of UI is the
Graphical User Interface (GUI), which most of us use every day.

The GUI is much more intuitive as it allows the user to interact with the system through the icons on the screen using an input device such
as a mouse, keyboard or touch screen.

Application Programming Interface (API)


This is a component that allows developers to write modular code. APIs decide how the system or other components can use a given
application.

What are the uses of the operating system?


With the advent of operating systems, computer systems became more user-friendly. The operating system provides users with a
convenient, easy-to-use interface that helps them make better, more efficient use of their system.

Meanwhile, the operating system also manages and allocates resources to help the computer system work better. For programmers,
software developers, operating systems make their work much simpler.

The most popular operating system for computers is Windows, while on mobile Android and iOS have almost complete control of the
market
The most popular operating system for computers is Windows, while on mobile Android and iOS have almost complete control of the
market

Current typical operating systems


Google's Android, for smartphones and tablets manufactured by various manufacturers
Apple's iOS, iPhone only
Apple's iPadOS, iPad only
Windows by Microsoft, for computers and tablets manufactured by various manufacturers
Apple's macOS, Mac only
Linux, the open source operating system favored by programmers, can be installed on many devices. Most Windows computers can install
Linux, and there are also some versions of the Linux operating system for tablets and smartphones, but not very prominent.
Netmarketshare 10/2020: Windows 10 continues to dominate the market, Edge market share hits double digits hai
Things to do to "live well" on Windows 7 after this operating system is dead
Microsoft offers $100,000 for hacking its custom Linux operating system
This is the most commonly used version of Windows 10 in the world

4. Web Server
Define web server: Web server is known as a web server that is used to process requests from client web browsers and send information to
the client via HTTP or other protocols. There are many popular webservers commonly used today such as: Apache, Nginx, IIS...

Programs on a web server are installed to serve web applications. When receiving requests from the browser, the webserver will
immediately send a response to the client via HTTP or other protocols.

To do this, each web server must be a repository with a very large capacity and can load at very high speeds to be able to store and operate
well all data stores on the Internet. Through separate communication ports, the web server configuration is set up to help effectively
operate a whole computer system operating on the Internet.

Building a web server server must ensure a rigorous, continuous and non-stop operation process to maintain regular data supply for the
computer network. In a nutshell, this will be the place to store all the internet activity data that it is authorized to manage.
The main important parts of the web server
The two main parts that are important to make an indispensable web server configuration are hardware or software, sometimes both
software and hardware.

On the hardware side


The web server will be connected to the internet and accessed using a domain name like mozilla.org. This is also where a website's
component files (such as image files, CSS, Javascript and HTML files) are stored and can be delivered to the end user's device.

On the software side


The web server will include sections to control user access to files stored on an HTTP server. An HTTP server is a piece of software that can
understand the URLs and protocols the browser is using. Whenever the browser needs a data file on the server, the browser sends a
request for that file via HTTP.

The main important parts of the web server


With these 2 hardware and software, you can completely build a simple or sophisticated web server for research, development and
business.

What is the function of the web server?


The basic function of an indispensable web server is to store, process and distribute website content to customers.

Data processing over HTTP protocol: Process and provide information to customers through personal computers on the Internet via HTTP
protocol. The content shared from the web server is HTML formatted content, style sheets tags, images, scripts that support text content
only.... You can understand simply when you access the content. When accessing Bizfly.vn, the server will provide you with all data about
that website via communication command.
Flexible connection: Any computer can be a server if it has a server software program installed and has an internet connection.
Smart conversion program: Web server software, like other software, allows users to install and operate on any computer that meets the
memory requirements.
Store data on the form of renting small servers, VPS servers or hosting.
How does a web server work?
To know how the Web Server or web server works, you can understand it as follows: Based on the server configuration, when you want to
get a web page, your browser will send a request to the server. webserver. At this point, it will search for the requested file on the drive it
stores. When the file is found, the server will read it and process it (if needed), and finally send it to the browser. To understand more
specific steps or see right below.

How does a web server work?

Hosting files
Web server software is the place to store website files, including html documents, images, CSS files, Javascript files, fonts and videos. Users
can store files on personal computers but it will have many benefits when we store them on a separate server. Those benefits are:

Always up and running


24/7 internet connection
Own a fixed IP address
Serviced by the supplier
Based on those benefits, choosing a good Web server provider plays an extremely important part in the development of your website.

Communicating via HTTP


What is HTTP? HTTP (Hypertext Transfer Protocol) - hypertext transfer protocol, a protocol that will be a set of rules for the connection
between two computers. Specifically HTTP is a Textual and Stateless protocol.

Textual: All commands are plain text and can be read by the user.
Stateless: Is a server application whose task is to provide clear rules about how the server (server) and client (client) communicate with each
other. The specific rules are as follows:
The web server is required to respond to every HTTP request and only receives at least one error message.
Only clients can make HTTP requests to servers. Similarly, only servers can respond to client HTTP requests.
When requesting a file over HTTP, the client must provide the URL of the file.
Static vs dynamic content
A webserver can handle static content or dynamic content.

Static web server: Each static will include a Hardware associated with HTTP Server. At this time, the server server will send files such as
HTML, CSS, Javascript... to the web browser
Dynamic web server: Includes a static along with an Application Server (application server) and a database. Now the Application Server will
update the files stored directly on the Database and send it to the web browser via HTTP Server.

It is the server that processes the content or can generate data based on the database. This solution will be more flexible, but requires more
techniques to handle and the process of building dynamic websites is quite complicated.

III. Discuss the capabilities and relationships between front-end and back-end website technologies and explain how these relate to
presentation and application layers

1. What is Front End?


Front End is a very common term in Website Application and Mobile Application programming. Front End we understand simply what we
can see, just like when we use a TV, we can only see its outer appearance and the image on their LCD screen. Front End is the same, Front
end is a term used to describe the interface of an application that we can see with the naked eye, including images, sounds, scroll bars,
colors, menus to tasks that handle user interaction logic. Front End is created by HTML, CSS and JavaScript, in which HTML is a language of
hypertext structure that only displays information such as text, images, .... but not beautiful, CSS is the language used to Structural format
to make HTML lively and beautiful, user-friendly, and JavaScript is the event handling language that makes websites and mobile apps able to
interact with users on the browser side at the same time. JavaScript also helps the website from static to dynamic but that is not enough, to
be able to handle all the logic of the user that needs data, we will have a concept called Back End, also known as programming. On the
server side, we can process the data that their users request

2. What is Back End?


In the computer world, "backend" refers to any part of a website or software program that is not visible to the user. It contrasts with
Frontend, which refers to the Frontend of a program or website. In programming terms, the backend is the "data access layer", while the
frontend is the "presentation layer". Most modern websites are dynamic, which means that website content is generated on the fly. A
dynamic page contains one or more scripts that run on the web server each time the page is accessed. These scripts generate the content of
the page, which is sent to the user's web browser. Everything that happens before the page is displayed in the web browser is part of the
Backend program. To make it possible for the server, the application, and the database to communicate with each other, the back-
developers- end uses server-side languages like PHP, Ruby, Python, Java, and .Net to build an application, and tools like MySQL, Oracle, and
SQL Server to search, store, or change data and serve it back to the user in the front-end. Back-end developer jobs also often require
experience with PHP frameworks such as Zend, Symfony, and Cake , PHP; experience with version management software such as SVN, CVS,
or Git; and experience with Linux in system development and deployment.
3. The relationship between Front-End and Back-End in Website Development
The relationship between programming on the interface side and on the server side are two inseparable relationships in the programming
world in general and website programming in particular. If a website can only run each interface without the support of the server to handle
data manipulation tasks, it is just a static website that can display the data. are pre-installed by default and they are not user-friendly and
very limited in handling exceptions without Back-End support. In addition, the Back-End side cannot miss the importance of Front-End
because a website without an interface cannot run and manipulate the data from the client sent to the server for processing. reason and a
website has only Back-End part, that website will not be able to run and also suppose if Without Front-End, it means there will be no Back-
End because the problem is Back- End only receives processing from requests from Front-End side sent to Back-End side to process data,
without Front-End, Back-End is just a stone that can't be moved because they can't be moved. have data to process. Therefore, the
importance of Back-end and Front-end Programming is inseparable, because without one of the two websites, it will not be able to be
complete and run.

IV. Discuss the differences between online website creation tools and custom built sites with regards to design flexibility, performance,
functionality, User Experience (UX) and User Interface (UI)

1. What is U.I?
UI stands for User Interface is a concept to refer to the place where humans and machines work together. With the advent of computers, UI
can be considered as what we see on the screen and interact with the computer through coded command.
Simpler than UI is how users see the design of the program on the desktop, laptop, handheld computer (table) or smartphone.
For example, in a smartphone, the user screen of an application such as Google Maps or Facebook, through which the user can input
information and receive feedback, is the user interface UI.

The main components of the UI are:


- Layout: Layout specifies what elements you will have on the page, where and how they will be placed. This is the
deciding factor. The layout should be simple, easy for users to find what they are looking for, and most importantly,
attract them to do what you want.
-
- Colors: The colors you use have a direct impact on the user interface design. They must represent the company's
brand, and also resonate with users. Using an opaque gray color for a gym website will not motivate and encourage
users to join.
-
- Typography: Typesetting can make or break your UI design. Although it may seem like a piece of text, it needs to be
visually appealing. For example, how bad would a Fortune 500 website look when all fonts were ComicSans?
-
- Graphics: Beautiful graphic design is an art. It's about conveying the messages you want in just one picture. Again, like
all other elements of interface design, graphic design needs to be taken care of in order to attract the target
audience. A good user interface design is one in which there is a mix of different features, free flow of information,
and well-placed icons for better visibility.

The key elements of a good design to keep in mind when designing your website or app are:

Simplify: For a great user interface, make navigation and navigation easy. Just like in iTunes, users can easily navigate between playing
music, searching playlists, opening drives, etc. because it has easy-to-understand menu options. Likewise, any app whether it's an e-
commerce app or a social media platform, the user finds no difficulty in navigating and using the features.

Keep it consistent: Users often get used to a certain pattern of use such as commonly used functions and icons. For example, in the iTunes
app, Apple uses familiar icons for the play, pause, and rewind buttons and brings this consistency to their other products and apps like iPod,
iPad, iPhone. Users can easily recognize these features; so you need to be consistent when using standard UI elements across different
platforms. This will enhance their recognition to quickly adopt new technology and be able to share their learning experiences across
different websites or app features.

Accessibility: Always keep important controls and menu options easily accessible on the user interface; Don't leave them embedded in
submenus or hidden in deeper layers of the application. In iTunes, for example, the Genius option may be used less often, but it's still easy
to access when you want to find songs that go well together and create playlists automatically. . Likewise, the iTunes Store icon is placed to
the right so users can access recommended songs based on your past purchases and help them find the best albums of the week.

2. What is U.X?
UX (User Experience) is how a user interacts with a system. That system can be a website, an application or a desktop program.
The term user experience was first coined by Dr. Donald Norman. He is a cognitive science researcher who was also the first to talk about
the importance of user-centered design. Compared to many other fields, Web-based systems, UX is a relatively new term.
Why is user-centric design important? If you work in the design industry or have worked in the creative services industry, you will find that
there are two completely opposite working trends: one is following the mindset of a creative person, creating products. which they think is
the best and two is to follow the customer's wishes.

And often, you will be more successful if you understand and meet the customer's wishes and your product will be appreciated by them.
However, a problem occurs that sometimes, what the customer chooses is not what the consumer wants. Consumers are the people who
end up using a product or service. And if they don't like a certain product/service, this equates to neither the designer nor their client
succeeding.

Currently, there is no exact scientific study of user experience, all judgments are based on statistics and intelligent analysis from UX people.
Of course, every system always needs to implement user experience design. Increasing the experience always helps your website be more
appreciated by visitors. Among them, the following cases are necessary:

A complex system
In a complex system, more planning and structure is needed.

Given a huge website system like Lazada.vn with countless user tasks, the UX requirement is that all interactions with the system must be
simple, valuable, pleasant and effective.

Startups
Although we know that the budget for UX design is not low, and it is very difficult for a Startup to start a career this way. However, we have
many alternative solutions so that they can own first-hand products that ensure the most perfect user experience, at the most economical
cost. Instead of hiring a professional staff, Startups can hire a professional application design unit which may be a more suitable option.
Things to know about UI/UX design:
- No cloning: User interface design and user experience (UI/UX) will not be the same on every website. Just like each of
us is very different, has our own personality, what is right for one person may not be true for others and vice versa.
The UI/UX designs in a website are researched specifically to serve a target group of customers. We can't duplicate
the user experience for different websites without doing research and filtering.

- No specific measurement: You can't determine the effectiveness of UI/UX design based on pageview statistics,
bounce rate, conversion rate, etc. Because of those metrics It also depends on a lot of other factors on the website,
not just UI design or user experience.

The above is the basic information to help you have an overview of UX - User experience in website design.
3. The relationship between U.X and U.I
Only UI without UX will make the product look very nice and eye-catching but unusable. Having UX but no UI would make for an app that's
very usable, works well, but… looks bad.
Real-life examples: Like good, docile men, but bad "faces" are often difficult to find a partner or affect work
UI and UX never stand alone but always go hand in hand to create a complete product. A website with sloppy fonts, flashy colors, and small
buttons (bad UI) is hard to bring good UX to users.
Craiglist website, UI is a bit ugly but because the UX is quite good, it still attracts many users
UX itself is not only encapsulated in the product (software) but also related to many aspects such as: customer service, brand value.
For example, the UX of Apple products is very good because in addition to good products, they also take care of customers with dedication,
a "luxury" brand. In the scope of the article we discuss UX in the programming industry, i.e. product UX.
References

Từ coder đến developer - Tôi đi code dạo. 2017. Series UI/UX Cho Developer – Phân biệt UI và UX | Từ coder đến developer – Tôi đi code dạo.  [ONLINE] Available
at: https://toidicodedao.com/2017/06/20/phan-biet-ui-va-ux/. [Accessed 23 July 2021].

timviec365.vn. n.d. Backend là gì? Giải mã những thông tin cần biết về Backend.  [ONLINE] Available at: https://timviec365.vn/blog/backend-la-gi-
new12707.html. [Accessed 23 July 2021].

NordicCoder. 2019. Backend là gì? Tại sao chúng ta lại cần nó? - NordicCoder.  [ONLINE] Available at: https://nordiccoder.com/blog/backend-la-gi-tai-sao-chung-
ta-lai-can-no/. [Accessed 23 July 2021].

L.B , N., 2018. Front End là gì? Kỹ năng cần thiết với lập trình viên Front End?.  ITviec. [online] Available at: https://itviec.com/blog/hoc-lap-trinh-front-end-nang-
cao/. [Accessed 23 July 2021].

viblo.asia. n.d. Just a moment....  [ONLINE] Available at: https://viblo.asia/p/ui-ux-la-gi-ui-ux-design-la-gi-m68Z0MJ6lkG. [Accessed 23 July 2021].

techmaster.vn. n.d. Techmaster Việt Nam.  [ONLINE] Available at: https://techmaster.vn/posts/34032/trai-nghiem-nguoi-dung-user-experience-no-la-gi-va-tai-


sao-toi-nen-quan-tam-den-no. [Accessed 23 July 2021].

You might also like