Learn Current User Interface (UI) Design Techniques
Learn to design websites for mobile phones, tablets, and desktops using the visual design principles of color, layout, and typography.
You’ll learn about visual conventions, standards, and industry trends, and gain experience with the process and principles for designing responsive websites through lecture and hands-on practice.
You will design and produce one or more projects in this class to come out with portfolio material. Your work will be critiqued and you’ll get the feedback you need to help improve your designs.
This course is offered at our design school, Noble Desktop. View upcoming dates and register for this course directly on Noble Desktop’s website.Register at nobledesktop.com
Students get a custom workbook with step-by-step instructions.
Modern computer classroom with your choice of Mac or PC to work on.
Small In-Person Classes
Get personalized attention in small groups with an expert instructor in the classroom.
Refresh the course materials within six months for free as long as there's space in the class.
What You'll Learn
- Learn to design websites for mobile, and desktop
- Apply design principles such as color, layout, and typography to webpages
- Learn about visual conventions, standards, and trends
Full Course SyllabusDownload PDF Outline
What You’ll Learn
- User Experience (UX) Design
- Visual Design
- UX Is Not UI
Learning from Existing Websites
- What Works & What Does Not?
- Color Harmonies
- Creating Contrast with Color
- Guidelines for Proper Color Usage
Typography & Fonts
- Display Text (Such as Headings) versus Body Text
- Type Trends
- Typeface Selection & Pairing
- Where to Get Web Fonts
- Ideal Line Height
- Column Width (Line Length)
- Hyphenation & Justification
Trends in Web Design
- Analysis of Example Websites
- Example Design Patterns
Multiple Screen Sizes
- Responsive Web Design
- Mobile Considerations & Limitations
- Discoverability Challenges
- Mobile Navigation
Workflow: Idea to Design
- Example Web Design Workflows
Getting to Know a Project: Creative Briefs
- What is a Creative Brief?
- What to Include in a Creative Brief
- Issues to Solve
- Steps in Creating a Wireframe
- Designing on a Grid System (like Bootstrap)
Wireframe to Refined Design
- Iterate & Refine
- Understanding the Mobile Experience
Time for You to Design
- Create Wireframes
- Turn Your Wireframes into Refined Designs
- Get Critiques
- Incorporate Feedback & Improve Your Designs
Frequently Asked Questions
Do I need to bring a computer?
No. We provide a computer with the necessary software for each attendee. Choose a Mac or a PC during the checkout process.
Are discounts available for this course?
No. This course is not eligible for any discounts.
We offer discounts for packages of classes, including our Excel Bootcamp, SQL Bootcamp, Data Analytics, and PowerPoint Bootcamp.
We also provide discounts for ten or more classes purchased together. Please reach out for more information on our voucher programs.
Does this course come with a book?
Yes. This course includes a complimentary book or manual at no additional cost.
What if I need to retake this course? May I retake it for free?
Yes. You may retake this course for free once within six months, provided that the class is running with an available seat. For more information, visit our policies page.