Web Builder

User Interface Design

Course overview

Course Summary

Duration: 10 weeks, 70 hours

Project will be written after course completion


This course introduces strategies and tactics necessary to design user interfaces, with particular emphasis on creating user interfaces for mobile devices. It focuses on teaching specific development techniques and strategies.

This course teaches how information obtained from the client, sales, and marketing to design and develop compelling visual experience Web sites for multiple platforms, including mobile, tablet, and desktop. You will learn more about wireframes, color schemes, tones, design templates, formatting, and typography. This course builds upon your abilities to implement user analysis techniques, usability concepts, usability testing procedures and the vital role of testing to publish and maintain a Web site.

You will also learn branding considerations and responsive design implementation in relation to the user interface design of Web sites.


Topics


1. Introduction to User Interface Design

     i. What Is User Interface Design? 

     ii. Evolution of Web User Interfaces 

     iii. Current Trends in Web Design 

     iv. Web Design Team Roles and Responsibilities 

     v. Web Design Project Management 

     vi. Collaborative Web Design 

     vii. Creating a Web Design Portfolio 

     viii. Creating a Plan for a Web-Based Business Project


2. User Interface Design Process

     i. Choosing a Web Design Methodology 

     ii. Creating a Web Site Vision Statement

     iii. Creating and Implementing a Web Site Strategy

     iv. Creating a Web Site Specification

     v. Publishing a Web Site

     vi. Choosing a Web Site Host

     vii. Securing a Web Site

     viii. Creating Ethical and Legal Web Sites

     ix. Creating a Mind Map

     x. Using Metaphors

     xi. Creating Word Lists and Mood Boards

     xii. Creating a Site Map


3. User-Centered Web Design

     i. User-Centered Web Design

     ii. The Cognitive Psychology of Web Design

     iii. Personas and Usability

     iv. Accessibility


4. User Interface Design Principles and Legal Guidelines

     i. Web UI Design Principles

     ii. Visual Design Principles

     iii. Branding

     iv. Legal Issues Impacting Web Design


5. Color, Typography, Layout and Wireframing

     i. Color

     ii. Typography

     iii. Layout

     iv. Wireframes and Mockups

     v. Responsive Web Design


6. Designing a Basic Web Site

     i. Creating a Web Site 

     ii. Part 1: Creating One Site Page

     iii. Part 2: Creating the Remaining Site Pages

     iv. Spell- and Grammar-Check the Site


7. Navigation Concepts

     i. Why is Web Site Navigation So Important? Site Structure, Directory Structure and URLs 

     ii. Positional Awareness 

     iii. Primary and Secondary Navigation 

     iv. Navigation Elements 

     v. Navigation Conventions and Principles 

     vi. Creating a Navigation System


8. Designing and Developing a Professional Web Site

     i. Why is Prototyping So Important? 

     ii. User-Centered Web Design 

     iii. User Interface Design Patterns 

     iv. Optimizing the look and feel of a Web site 

     v. Focus on Web Forms 

     vi. GET and POST 

     vii. Constructing a Professional Web Site 

     viii. Web Framework 

     ix. User Interface Libraries 

     x. Web Content Management Systems 

     xi. Additional Web Development Tools 

     xii. Web Hosting Services and Domain Names


9. Site Publishing, Maintenance, Security, and SEO Strategies

     i. Making Sure a Web Site is Ready to be Published 

     ii. Maintaining a Web Site 

     iii. Search Engine Optimization (SEO) 

     iv. SEO and Written Site Content 

     v. SEO and Mobile-Friendliness 

     vi. SEO and Metadata


Target Audience

Individuals preparing to enter or continue in the workforce fields of Web site development and design can benefit from the User Interface 

Professionals working in Web site development and design fields for any industry can benefit from the User Interface Designer course and/or certification:

  • Web and graphic designers
  • Web marketing professionals
  • Mobile application developers
  • Creative directors
  • Advertising professionals
  • Entrepreneurs


Job Responsibilities

User Interface Designer job responsibilities can include:

  • Creating UI sketches and converting them to wireframes.
  • Elaborating the wireframes into page mockups.
  • Creating the site's graphic images, which can be extremely time-consuming.
  • Programming the front-end UI (using client-side code such as HTML, CSS, JavaScript, etc.)
  • Programming the back-end application (using server-side code such as PHP, MySQL, etc.)
  • Testing, revising and re-testing multiple times, using multiple browsers, including mobile devices until everything on the site looks and behaves exactly as the project design dictates.


Prerequisites

The User Interface Designer courseware requires an understanding HTML5 and CSS3 coding. Suggested prerequisites are the Website Development Associate course and the Advanced HTML5 & CSS3 Specialist course, or equivalent knowledge.