My Web Training

UI/UX

User experience, interaction, and interface design - how the user interacts with the website including visual design, user interface, quality and message of the content, site performance, ease of use.

Visual Design

Visual or Graphic design refers to the look and feel of the site including logos, graphics, typography, colors, and layout.

Front-End and Back-End Development

Front-End Development

Focuses on the client-side of websites, creating the visible structure and design using HTML, CSS, and JavaScript.

Back-End Development

Involves server-side programming, managing databases, and ensuring site functionality using languages like PHP, Python, and Node.js.

Video Tutorial on Design Concepts

Design

Web Design includes a number of different disciplines. Here are 10 Principles of Effective Web Design you should keep in mind as you develop your web skills.

Purpose

What are your users looking for? What will they find at your site?

Communication

Is your text readable? Is the content concise with headings and subheadings for users to scan?

Typefaces

Are you choosing fonts for their specific purpose, feeling, or function?

Colors

Colors convey unspoken meaning through subconscious feelings. Are your colors intentional?

Images

A picture is worth a thousand words. What do your pictures say?

Navigation

How easy can visitors find all the pages of your site? If you don't give them a link, it's like the page doesn't exist.

Layouts

Have you planned how the content will be presented?

Design Patterns

Did you consider how humans scan computer screens?

Load Time

Since over half of website visitors use mobile devices, did you consider the time and bandwidth it takes to load your pages?

Mobile Friendly

Over half of website visitors now use mobile devices to find your content. What does your site look like and how does it work on a phone?

Publishing and Layout Design Principles

Good design requires careful planning of several principles. Each contributes to the overall user experience. Overuse of these can distract from the site design and confuse visitors.

Emphasis

Adding importance to an element to increase user awareness. This could be done with text decoration, scale, imagery, proximity, color, or negative space.

Balance and Alignment

Adding interest through symmetrical and asymmetrical alignment, and adding weight with scale, color, and texture. The Rule of Thirds helps guide visitors' eyes through the design.

Contrast

Adding importance to an element using contrasting color, scale, or negative space.

Repetition

Building site brand recognition through the consistent use of color, imagery, fonts, and layout.

Proportion

Giving users emphasis on elements using size, color, or contrast.

Movement

Guiding user awareness of elements with the use of text, lines, and images.

Negative Space

Also known as white space, this empty space adds emphasis by showcasing important elements.

Content

Semantic HTML tags play a crucial role in organizing content and improving accessibility. These tags provide meaningful structure to your page, helping both users and search engines understand the purpose of each section.

For example, using <header>, <nav>, <main>, and <footer> tags ensures that your content is logically grouped and easy to navigate. These elements are the foundation of good information architecture, which ensures that content is organized logically and effectively.

Information Architecture

Organizes content logically to make it easy to find information.

Content Strategy

Ensures all content supports brand identity and goals, supports content reuse, and manages update schedules.

Web Design Steps

Creating a web page is a process that includes these steps:

1. First collect the content that you want on the page.
2. Use HTML elements to mark up the text so that it appears in the browser the way you want it to.
3. Add images, multimedia, and links to the page.
4. Use a style sheet to add formatting.
5. Use JavaScript to enhance the user experience through interactivity.
6. Add server-side programming to enable a database-driven site (not covered in this course).

Building Web Pages

No special software or tools are required to create a web page. You can use a simple text editor such as Notepad on the PC or TextEdit on the Mac. However, specialized tools like Visual Studio Code (VS Code) make the process easier.

VS Code has become the de facto IDE for web developers due to its cross-platform compatibility, Git integration, and extensive library of extensions.

Download Visual Studio Code

Browser Considerations

When a browser requests a document, the server locates the document starting with the root directory. A slash (/) at the end of a URL indicates that the URL points to a directory, not a file. If no specific document is identified, most servers display the contents of a default file such as index.html. Confirm this with your server administrator as some servers are case-sensitive.

• Different browsers may display content differently.
• Follow web standards for the best results.
• Organize your page using HTML tags.
• Make your pages accessible for disabled viewers.
• Consider mobile web design.

The Mobile Web

• Over half of all internet use comes from mobile devices.
• Design your pages with mobile devices in mind following W3C standards.
• Use progressive enhancement to ensure usability regardless of styles or layouts.
• Place important content first.
• Use responsive design techniques for different screen sizes.

Accessibility

• Accommodates disabled visitors.
• Aids with search engine indexing.
• Improves usability on mobile devices.

Guidelines

• Use clean HTML.
• Provide alternatives.
• Allow text to resize.
• Don't use graphics for text.
• Use accessibility features for forms and tables.
• Be careful with colors and backgrounds.

Check your pages for accessibility with a tool like WAVE Accessibility Tool. Paste the URL of the page you want to check into the tool or use a browser extension to identify common accessibility issues.