LEARNING WEB DESIGN

Part 1. Getting Stated

Website Hosting Services:

- wordpress.com
- squarespace.com
- wix.com
- sitebuilder.com
- weebly.com

Website Creation Roles

- Content Wrangling: good writing can help the user interfaces we create be more effective, from
button labels to error messages. Good writers and editors are an important part of the team. 2
specialists in modern web developtment: The Information Architect (IA) and the Content Strategist.
- Information Architecture (Information Designer): organizes the content logically and for ease of
findability. Responsible for search functionality, site diagrams and data are organized on the server.
- Content Strategy: make sure that every bit of text on a site supports the brand identity and
marketing goals of the organization.

All Manner of Design

User Experience(UX), Interaction (IxD), User Interface (UI) design (Overlap)

It is not uncommon for one person or team to handle all three.

- UX designer takes a holistic view of the design process-ensuring the entire experience with the site is
favorable. According to Donald Norman (who coined the term - người đặt ra thuật ngữ này) UX design
includes “all aspects of the user’s interaction with the product: how it is perceived, learned and used.”
For a website or application, that includes the visual design, the user interface, the quality and
message of the content, and even the overall site performance. The experience must be in line with
the organization’s brand and business goals in order to be successful.

- IxD has the goal to make the site as easy, efficient and delightful to use as possible.

- UX Design is closely related to IxD. UX Design tends to be more narrowly focused on the functional
organiztion of the page as well as the specific tools (buttons, links, menus,..) that users use to navigate
content or accomplist tasks.

Production of UX, UI, or IxD designers deliver:

- User research and testing reports. (Nghiên cứu người dùng và phân tích báo cáo)
- Wireframe diagrams:
+ shows the structure of a web page using only outlines for each content type and widget.
+ purpose: indicate (chỉ ra) how the screen real estate is divided and where functionality and
content are placed.
+ colors, fonts, visual identity elements are not shown not to distract from the structure of the
page.
+ usually annotated (chú thích) with instructions for how things should work.
- Site Diagram: indicates the structure of the site as a whole and how individual pages relate to one
another.

- Storyboards and user flow charts

+ A storyboard traces the path through a site or application from the point
of view of a typical user
+ It usually includes ascript and “scenes” consisting of screen views or the user
interactingwith the screen.

Books about UX, UI, IxD design:

- The Elements of User Experience: User-Centered Design for the Web and
Beyond by Jesse James Garrett (New Riders)
 - Don’t Make Me Think, Revisited: A Common Sense Approach to Web
Usability by Steve Krug (New Riders)
- The Design of Everyday Things by Don Norman (Basic Books)
- About Face: The Essentials of Interaction Design, 4th Edition by Alan Cooper,
Robert Reimann, David Cronin, and Christopher Noessel (Wiley)
- Designing Interfaces, 2nd Edition by Jenifer Tidwell (O’Reilly)
- 100 Things Every Designer Needs to Know about People by Susan
Weinschenk (New Riders)
- Designing User Experience: A Guide to HCI, UX and Interaction Design by
David Benyon (Pearson)

Visual (Graphic) Design (Thiết kế đồ họa)

- First impressions are everything.
- A graphic designer cre-ates the “look and feel” of the site—logos, graphics, type, colors,
layout, andso on—to ensure that the site makes a good first impression and is consistentwith the
brand and message of the organization it represents.
- The most traditional method to present a visual design to clients and stakeholders are
sketches or mock-ups (created in Photoshop or similar tool) of the way the site might look.
- Technique: Style tiles (introduced by Samantha Warren) http://styletil.es/
- Required skill: optimize images and how to address the requirements of varying screen
sizes, creating a style guide.
- Visit the “Website Style Guide Resources” page at styleguides.io for more.

Frontend Development
Frontend Development includes the following web technologies:
- HyperText Markup Language (HTML)
- Cascading Style Sheet (CSS)
- JavaScript and DOM scripting, including AJAX and JavaScript - based frameworks.

Backend Development
The following technologies are typically in the domain of the backend developer:
- Server software (Apache, Microsoft IIS)
- Web application languages (PHP, Ruby, Python, JSP, ASP.NET)
- Database software (MySQL, Oracle, SQL Server)

Full-Stack Developers and Unicorns

- Full-Stack Developer is a person who is fluent in both frontend (HTML, CSS, JS) and backend
(server applications, databases) languages.
- Unicorns are web designers who can handle from content strategy to UX to frontend
development to what happens on the server. It’s rare.

Other Roles
- Product Manager: who guides the site’s design and development in a way that meets
business goals. PM delevops the overall strategy for the site from a marketing perspective, including
how and when it gets released.
- Project Manager: who coordinates the designers, developers and everyone else who is
working on the site. They manage things like timelines, development approaches, deliverables,..
- SEO specialist: Search Engine Optimization is a discipline focused on tweaking the site
structure and code in a way that increase the chances it will be highly ranked in search results.
- Multimedia Producers.
Skills Every Web Designers Needs
- Excellent communication skills.
- Flexibility.
- Critical thinking and good judgment.
- A good attitude.

Test Yourself
 1.
a. Graphic designers: “Look and feel” deliverables.
b. Production department: HTML and CSS documents.
c. UX designer: Storyboards.
d. Backend programmer: PHP scripts.
2. W3C: The ongoing development of web technologies is overseen by the World Wide Web
Consortium
3.
a. HTML: identifies text as a second-level heading.
b. CSS: Makes all second-level headings blue.
c. JS: Checks a form field for a valid entry.
d. Ruby: Creates a custom server-side web application.
Part 2. How the Web works

The Internet versus The Web

- The Internet:
+ The internet is an international network of connected computers.
+ No company owns the internet.
+ The purpose of connecting computers together is to share information.
+ Many ways information can be tranfered, including email (POP3/IMAP/SMTP), file transfer (FTP),
secure shell (SSH). These standardized methods for transferring data or documents over a network
are known as protocols.
+ Besides The Internet, there are Intranets and Extranets.
- The Web (originally called the World Wide Web - www):
+ The Web is just one of the ways information can be shared over the internet.
+ It is unique that it allows documents to be linked to one another via hypertext links - thus forming a
huge “web” of connected information.
+ The web uses a protocol called HTTP (HyperText Transfer Protocol).
+ The web is a subset of the internet. It is just one of many ways information can be transferred over
networked computers.

Server
- The computers “serve up” documents upon request are known as servers.
- The role of server software is to wait for a request for information and then retrieve and send that
information back as quickly as possible.
- Web servers are also called HTTP servers.
- The 2 most popular server software options are Apache (open source software) and Microsoft
Internet Information Services (IIS).
- Open source software is developed as a collaborative effort with the intent to make its source code
available to other programmers for use and modification. Open source programs are usually free to
use.
- “IP” stands for “Internet Protocol”.

URL
- Every page and resource on the web has its own special address called a URL, which stands for
Uniform Resource Locator.

HTTPS, the Secure Web Protocol

- HTTPS is a modification of HTTP that encrypts form information when it is sent between user’s client
and the server. Any web page that has form fields that accept text (search bar or a login) should use
HTTPS.
- If you have a site that accepts text input and you don’t use HTTPS, your site won’t rise as high in the
Google search results. In addition, in Chrome, these sites arae marked with “Not Secure” in the top
bar of the browser.
- HTTPS protects form data as it is sent to the server, but doesn’t do anything to make your site
“secure” and safe from hackers.
- If you want to minimize round-trips to the server, include slashes at the end of directory names in
URLs in your links.
HTTP Status Codes
- 200: OK
- 301: Moved Permanently
- 302: Moved Temporarily
- 404: Not Found
- 410: Gone (no longer available)
- 500: Internal Server Error

TEST YOURSELF
1. HTML: the markup language used to describe web content
2. W3C: the organization that monitors web technologies.
3. CERN: particle physics lab where the web was born.
4. CSS: the language used to instruct how web content looks.
5. HTTP: protocol for transferring web documents on the internet.
6. IP: Internet Protocol
7. URL: the location of a web document or resource.
8. NCSA: home of Mosaic, the first graphical browser.
9. DNS: matches domain names with numeric IP addresses.
10. FTP: a protocol for file transfer.
CHAPTER 3. SOME BIG CONCEPTS YOU NEED TO KNOW

Responsive Web Design: RWD

The need for speed (Site performance)

- Optimize images so they are the smallest file size possible without sacrificing quality.
- Streamline HTML markup, avoiding unneccessary levels of nested elements.
- Minimize HTML and CSS documents by removing extra character spaces and line returns.
- Keep JS to a minimum.
- Add scripts in such a way that they load in parallel with other page assets and don’t block rendering.
- Don’t load unneccessary assets (images, scripts, JS libraries).
- Reduce the number of times the browser makes requests of the server (HTTP request).
PART II. HTML FOR STRUCTURE

CHAPTER 4. CREATING A SIMPLE PAGE (HTML OVERVIEW)

Naming Conventions
- Use proper suffixes for your files.
- Never use characters spaces within filenames. Use “_” or “-” instead.
- Avoid special characters such as ?,%,#,..
- Filenames may be case-sensitive. Consistently using all lowsercase letters in filenames is one way to
make your filenames easier to manage.
- Keep filenames short.
- Self-impossed conventions.

The Anatomy of an HTML Element

1. It is a document type declaration (also called DOCTYPE declaration) that lets modern browsers
know which HTML specification to use to interpret (thông dịch) the document. This DOCTYPE identifies
the document as written in HTML5.
2. The entire document is contained within an html element. The html element is called the root
element. It may not be contained within any other element.
3. Within the html element, the document is divided into a head and a body. The head element
contains elements that pertain to the document that are not rendered as part of the content such as
it’s title, style sheets, scripts, metadata.
4. meta elements provide document metadata, information about the document. In this case, it
specifies the character encoding (a standardized collection of letters, numbers, symbols) used in the
document as Unicode version UTF-8).
5. Also in the head is the mandatory title element. According to the HTML specification, every
document must contain a descriptive title.
6. The body element contains everything that we want to show up in the browser window.
Attributes
Chapter 5. Marking up text
Use the id attribute to identify.
Use the class attribute to classify.