Lesson 1- Introduction to Web Design Flashcards
The PROCESS of creating the visual and functional aspects of websites
WEB DESIGN
It involves planning, conceptualizing, and arranging content intended for the internet
WEB DESIGN
_______ goes beyond aesthetics to include the website’s overall functionality
Modern Web Design
KEY COMPONENTS OF WEB DESIGN(5)
(LCT IN)
Layout
Color Scheme
Typography
Images and Graphics
Navigation
The ARRANGEMENT OF ELEMENTS ON A WEBPAGE, including headers, footers, navigation menus, and content areas.
LAYOUT
The SELECTION OF COLORS used throughout the website to create a cohesive and visually appealing look.
COLOR SCHEME
The CHOICE OF FONTS AND TEXT STYLES to ensure readability and enhance the website’s aesthetic
TYPOGRAPHY
the USE OF PHOTOS, ILLUSTRATIONS, ICONS, AND OTHER VISUAL ELEMENTS to support content and engage users.
IMAGES AND GRAPHICS
The SYSTEM THAT ALLOW USERS TO MOVE THROUGH THE WEBSITE, including menus, links, and buttons
NAVIGATION
Principles of Good Web Design(5)
(SCRAU)
Simplicity
Consistency
Responsiveness
Accessibility
User-Centered Design
Keep the design clean and uncluttered to make it easy for users to navigate and find information
SIMPLICITY
Use consistent design elements, such as colors, fonts, and layout, to create experience
Consistency
Ensure the website looks and functions well on various devices, including desktops, tablets, and smartphones
Responsiveness
Design the website to be usable by people with disabilities, following guidelines such as the Web Content Accessibility Guidelines(WCAG)
Accessibility
Focus on the needs and preferences of the target audience to create a user- friendly experience.
User-Centered Design
Examples of a Bad Web Design
(POSS BBS CS)
Poor Navigation
Outdated
Small Fonts
Slow Website Speed
Bad Mobile Responsiveness
Bad Color Scheme
Spacing Issues
Confusing
Small Visuals
Tool and Technologies(5)
(HSJ WC)
HTML(HyperText Markup Language)
CSS(Cascading Style Sheets)
JavaScript
Web Design Software
Content Management Systems(CMS)
The standard language for creating web pages
HTML (HyperText Markup Language)
Used to style and layout web pages
CSS(Cascading Style Sheets)
A programming language that adds interactivity to websites
JavaScript
Tools like Adobe XD, Figma, and Sketch for designing and prototyping websites
Web Design Software
Platforms like WordPress, Joomla, and Drupal for building and managing websites
Content Management Systems(CMS)
Steps to Design a Website
(DRD DTL M)
Define the Purpose and Goals
Research and Plan
Design
Develop
Test
Launch
Maintain
Understand the website’s objectives and target audience
Define the Purpose and Goals
Conduct research on competitors and gather inspiration. Create a sitemap and wireframes
Research and Plan
Develop the visual elements, including layout, color scheme, typography, and graphics
Design
Write the HTML, CSS, and JavaScript code to build the website
Develop
Check the website for functionality, usability, and compatibility across different devices and browsers
Test
Publish the website and promote it to the target audience
Launch
Regularly update the content and fix and issues that arise
Maintain
Is the standard language for creating web pages
HTML(HyperText Markup Language)
HTML is use to create the ____ on the web and to add elements like text, images, links, and more
CONTENT
T or F
HTML is a programming language
F
its a markup language that defines the structure of web pages
Websites are built using HTML, CSS, and
JavaScript, where HTML provides the
content and _______
STRUCTURE
It is the foundation of every webpage
HTML
Every HTML document starts and ends
with the _________ tag
<html>
</html>
Declares the document type and version of HTML being used(HTML5)
<!DOCTYPE html>
This is the root element that wraps the entire HTML content
<html>
</html>
Contains metadate (e.g., title, character encoding) and is not directly visible on the page
<head>
</head>
Specifies the character encoding to support different languages and character
<meta charset=”UTF-8”
The title of the webpage shown on the browser tab
<title>
</title>
This contain the content of the webpage that will be visible to users
<body>
</body>
HTML Document Structure(6)
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<title>
<body>
</body></title></head></html>
Text Formatting Tags(5)
<h1> to <h6>
<p>
<b>
<i>
<u>
</u></i></b></p></h6></h1>
Header tag
<h1> to <h6>
</h6></h1>
Paragraph tag for text
<p>
</p>
Bold text
<b></b>
Italic text
<i></i>
Underline text
<u></u>
Used to create hyperlinks. Linking and Anchors
<a>Link text</a>
Images. Embeds an image into the webpage
<image>
</image>
Lists tags(2)
Unordered List<ul>
Ordered List<ol>
Table tags(4)
<table>
<tr>
<td>
<th>
</th></td></tr></table>
