Web Design Principles PDF

**Designing a Web page** 1. **Emphasis** - Communicate your **message effectively** - Highlight placement of important topics - Determines the **organization of information.** 2. **Contrast** - **Generate visual interest** by making the page appealing. - Enable easy navigation. 3...

**Designing a Web page** 1. **Emphasis** - Communicate your **message effectively** - Highlight placement of important topics - Determines the **organization of information.** 2. **Contrast** - **Generate visual interest** by making the page appealing. - Enable easy navigation. 3. **Typography** - **The arrangement of text** - Enhance readability - Complements graphics to cultivate an image in a reader's mind - Assists in conveying a message (professional, recreational, whimsical) - **Mono-spaced or proportional** - Maintain clean look by using **serif and sans serif.** - **No bigger than 14-18pts and no smaller than 12-10pts for body**. - Avoid dancing letters. - **Choose fonts that:** - Fit the character of the site. - Easily readable. - Widely available across many browsers - Provide alternatives. - Use Cascading Style Sheets (CSS) - Define formatting of features. - Apply styles using cascading styles hierarchy. - Generate inconsistent results on different platforms. 4. **Colors and graphics** - Defines identity of the web page - Draws eyes to the page elements - Impacts reader's mind (flashy or subdued) - Adds recall value. I. **Color rules:** - Understand color theory and schemes a. **Monochromatic**: One color b. **Analogous**: 3 to 5 colors next to each other c. **Complementary:** Colors on the opposite side of the color wheel. Provides contrast. - Use black and white when in doubt. - Text color schemes for visually impaired readers. - Provide alternate schemes. II. **Graphic Rules:** - Use correct file format. - **Graphic interchange format** (GIF), 256 colors - **Joint photographic experts group** (JPEG) for photo graphics with complex colors. - Place buttons at the top of the page. - Use standard icons for recognizable concepts. - Provide matching texts links to help low bandwidth users. - Use browser-safe colors. - Make animated graphics turn off automatically to minimize distraction. - Avoid flashing images. 5. **Navigation** - **How a web page is structured** to direct users to a desired destination by providing visual clues. - **Navigation rules:** - Group navigation tools in one place, either horizontally or vertically aligned. - Present all available features to help visual direction. - Make consistent use of tools and terminology. - Place '**bread crumb trail'** - Relevant links - Divide browser window to separate frames. - Create uniform information presentation. - Use a **site map or index.** 6. **Visual Balance** - **The combination of all elements** in a web page. Keep elements evenly distributed. - **Visual Balance rules:** - Placing elements based on how eyes follow. - Considering alignment, repetition, and proximity of elements. - Using proper links, graphics, and tools. **Principles of Webpage Content** 1. **Clarity:** Communicate the purpose of the page clearly. 2. **Brevity**: Use short sentences. Write a summary of the page. 3. I**nformality**: Maintain informal tone. Make content interesting. 4. **Accuracy:** Check facts before publishing and eliminate typos. 5. **Relevance**: Identify target audience based on their needs. Place relevant info at the top. Keep info updated. Provide language options. 6. **Consistency:** Use standard terminology and key words. Use consistent organization. Follow a style guide. **EXTRA: DO\'S AND DONT\'S** I. **DO\'S:** - Address the target audience directly - Customize pages to suit different users - Communicate with visual elements, such as white space, contrast, layout, etc. - Provide alternate graphics and multimedia versions for low bandwidth users - Keep the design user-friendly. Provide consistent navigation tools - Provide breadcrumb trails - Provide links to other relevant sites - Get consent before publishing outside material. - Test the site. - Ask for feedback and update. II. **DON'T'S** - Don't limit audience. - Make everything obvious. - Keep information straight forward. - Make it easy to navigate. - Don't use large files. - Don't overuse multimedia. - Don't overfill with information and don't keep inactive links - Don't use jarring colors - Don't publish outside content without consent **HTML** **Internet - International Network**. The Internet is a global network of billions of computers and other electronic devices. **Network** - A network consists of **two or more computers that are linked in order to share resources,** exchange files, or allow electronic communications. - **LAN - (Local Area Network)** is a computer network that interconnects computers within a limited area such as a residence, school or office building. - **WAN - (Wide Area Network)** is the technology that connects your offices, data centers, cloud applications, and cloud storage together. **History** - **1964** - **Paul Baran and RAND Corporation** created a machine that **send and receive messages**. The tech they invent **cuts messages into small packets**. - **1969** - At first, the internet is small with 4 pcs. The people in **Department of Advanced Research Projects Agency (DARPA)** invented this. They upgrade it and eventually called **ARPANET.** - **1971** - **Ray Tomlinson** invents a **PROGRAM** that lets people send mail electronically. Uses @ - **1972** - The first PC to PC chat takes place between **two men apart.** - **1973** - The invention of **Network Voice Protocol** lets people have a **conference call.** - **1979 - Mackenzie** suggests using symbol to tell how you feel when writing a message. First symbol was **{ -) }.** **Scott Fahlman** changes it to **{ :-) } and { :-( }.** - **1980 -** The **first virus** makes the ARPANET stops working. - **1984** - **The Domain Name System** is invented. It acts like a phone number. www (world wide web) - **1989** - **Tim Berners-Lee from CERN** writes a proposal for a communication system that **creates link to documents online.** - **1990 - Alan Emtage** invents **archie, a web engine**. It is a system that can find files on the internet that match a keyword. Next is **Gopher**. - **1993 -** One of the first graphical **web browser** was released \"**Mosaic**\". Later, the netscape navigator, internet explorer and more were invented. - **1994** - The first internet **banner ad** was on **hotwired.com** - **1995** - **Sun Microsystems invents JAVA**. It is a code that **makes items move on a web page**. - **Social Media** - 2003 - Friendster - 2004 - Facebook - 2005 - Youtube - 2006 - Twitter - 2007 - LinkedIn & Tumblr - 2010 - Instagram & Pinterest - 2016 -- Tiktok **Internet Protocols** - **HTTP -** This stands for **Hyper Text Transfer Protocol**, which is the standard means of transmitting files written in Hypertext Markup Language or HTML over networks. - **SMTP** - This stand **for Simple Mail Transfer Protocol**, which is the standard format for sending email, messages and attached files to one or more electronic mailboxes. - **FTP** - This stand for **File Transfer Protocol**, Which allows for the transfer of files between an FTP server and a computer. - **VoIP** - This stands for **Voice over Internet Protocol**. VoIP allows delivery of voice communications over IP networks by converting analog voice signals into data packets - **URL** - **Uniform Resource Locato**r. A URL is nothing more than the address of a given unique resource on the Web. In theory, each valid URL points to a unique resource. 1. **Scheme**: It tells your web browser to e**ncrypt any information you enter onto the page.** 2. S**ubdomain**: A subdomain in a URL indicates **which particular page of your website the web browser should serve up**. 3. **Second-level domain**: It is the **name of your website.** It helps people know they're visiting a certain brand's site. 4. **Top-level domain**: The top-level domain (TLD) specifies **what type of entity your organization registers as on the internet**. 5. **Subdirectory:** also known as a subfolder --- helps people understand which **particular section of a webpage** they're on. **Origin of HTML** - **What is HTML?** - **Hyper Text Markup Language** - It is the standard markup language **for creating Web pages** - It describes **the structure of a Web page** - HTML consists of a series of elements - **Who invented HTML?** - **Tim Berners-Lee developed HTML** - He started with his idea in WWW and HTML code in **1989** - **In 1990**, he posted to the internet the very first web page made using HTML code - **Why was HTML invented?** - Tim was **a computer scientist at CERN** in Geneva, Switzerland (**CERN - international nuclear research lab)** - He saw that scientists around the world **needed to communicate with each other** - He developed a **COMPUTER CODE** to create web pages that could be linked together using **hypertext.** - To share information - **How does HTML work?** - HTML is a code that tells **what a web page looks like.** - The **code sets what elements to show, tells where to place the picture, and how to connect one page to another.** - A web browser reads the code (HTML) and **changes it into the content visible to the screen.** **Attributes of HTML** - All HTML elements can have attributes - Attributes provide additional information about elements - Are always specified in the start tag - Usually come in name/value pairs. ex: name=\"value\" - **\ (The href attribute)** - **Creates a hyperlink to web pages**, files, email addresses, locations in the same page, or anything else a URL can address - \ tag defines a hyperlink. The HREF attribute specifies the URL of the page the link goes to. - \ - **\ (The src attribute)** - The \ tag is used to **embed an image in an HTML page**. It is linked to the webpage. - \ - **Use image as link** - Put the \ tag inside the \ tag - \\\ - **The width and height Attribute** - The \ tag should also contain the width and height attributes, which **specify the width and height of the image** (in pixels). - \ - **The alt attribute** - **Specifies an alternate text for an image**, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader. - \ - **The lang attribute** - Declares the **language of the Web page** - \ - **The style attribute** - The style attribute is used to **add styles to an element, such as color, font, size, and more.** - \This is a red paragraph.\ a. Background color b. Color c. Font-family d. Font-size e. Text-align - **The title attribute** - **Defines some extra information** about an element. - \This is a paragraph.\ - **The target attribute** - By default, the linked page will be displayed in the current browser window. You must specify another target for the link. The target attribute **specifies where to open the linked document.** a. **\_self** -- **Default,** opens the document in the same window. b. **\_blank** -- Opens the document in a new window or tab. c. **\_parent** -- Opens the document in the parent frame. d. **\_top** -- Opens the document in the full body of the window. - **ID attribute (Link bookmark)** - Can be used to **create bookmarks** so that readers can **jump to specific parts of the page.** The id name must contain at least one character, cannot start with a number, and must not contain whitespaces. - **HTML COLORS** - Specified with predefined color names, or with **RGB(red green blue), HEX(color code), HSL(hue, saturation, lightness), RGBA(red green blue alpha),** or **HSLA(hue, saturation, lightness, alpha)** values. - **Alpha channel is the opacity.** The parameter is a number between **0.0 (transparent)** and **1.0 (not transparent.)** - Rgba(255,16,65,0.5) - **Shades of gray in RGB** - Specified using **equal values for all three parameters.** - Rgb(65,65,65) - **HEX Colors** - Specified with **\#RRGGBB** - Black = \#000000 - White = \#ffffff - **HTML HSL** - **Hue:** **Degree of color wheel from 0 to 360**. 0 is red, 120 is green, and 240 is blue. - **Saturation**: Percentage value. 0% means shade of gray, and 100% is the full color. - **Lightness**: Percentage vaue. 0% is black, and 100% is white. - **Shades of gray in HSL** - Defined by setting the hue and saturation to 0, and **adjusting the lightness from 0% to 100%** - Hsl(0,0%,30%) - **HSLA** - Extension with **alpha channel.** - Hsla(0, 50%, 50%, 0.5) - **ALWAYS USE QUOTATION FOR ATTRIBUTE VALUES** - **Double quotes around attribute values are the most common in HTML**, but single quotes can also be used. - When the attribute value itself contains double quotes, it is necessary to use single quotes. - \ (and vice versa) - **HTML LINKS** - Links are found in nearly all web pages. It allows users to **click their way from page to page.** - An unvisited link is [underlined and blue.] - A visited link is [underlined and purple.] - An active link is [underlined and red.] - **HTML HEADINGS** - HTML headings are **titles or subtitles that you want to display on a webpage.** - \Heading 1\ - \Heading 2\ - \Heading 3\ - \Heading 4\ - \Heading 5\ - \Heading 6\ **Structural tags** **Website:** A website is a collection of interrelated, publicly accessible **web pages that share a single domain name.** One of the most important stages and oftentimes consuming tasks of building a website is the **Planning Phase.** 1. **Defining your purpose**: Determining exactly why you are creating it. 2. **Determining the site structure**: Make a list of all the things you want to include and then decide how they will fit together. **Site mapping** will help you to visualize how your site will be structured. **Do's in webpage making** 1. **User-friendly website**: Don't make your visitor think too hard, wait too long, or read too much. 2. **Capture the attention**: Web users usually **don't take enough time to carefully read** and view everything that is not on the page. 3. **Use high quality content**: Web users will appreciate **high-quality and credible content.** 4. **Typography: Picking the right typeface** could make or break your design and can lead to the success or failure of your website. 5. **Try out for a test drive:** You can never know if your web page does what it's supposed to do unless you **try it out.** **\ ** **HTML Startup tags** - **Structural tags:** These tags are **mandatory and placed at the beginning and end** of an HTML file. - **Paragraph tags**: Always starts on a new line, and is **usually a block of text.** - **Formatting tags**: Display **special type of text.**  - **Inline CSS**: **Apply a unique style** to a single HTML element. - \