Visual Design for the Web
Learn how to create responsive and beautifully-designed web pages. You'll cover basic principles of HTML and CSS, responsive design, typography, color, layout, and more. Software required: Photoshop CC 2015, Illustrator CC 2015, Browser.
What you'll learn
Beautiful design is just as important as functionality when it comes to the Web. In this course, Visual Design for the Web, you'll learn basic principles of design while creating two visually different interior pages for desktop and mobile. First, you'll go over the basic principles of HTML and CSS (as ideas, not actual code), and discover how you can make your page accessible and usable to all audiences. Along the way, you'll be covering important aspects of design such as typography, use of color, layout, and design aesthetic. Finally, you'll go over navigation principles and how to make your web design responsive for desktops and mobile devices. When you're finished, you'll not only have two uniquely beautiful web pages, but you'll also have a better understanding of what you can do to design a front-end experience for your webpage. Software required: Photoshop CC 2015, Illustrator CC 2015, Browser.
Table of contents
- Setting up the File Structure 6m
- Creating Our Base Files 8m
- Grids 10m
- Placing the Logo and Creating the Primary Navigation 11m
- Making the Typographic Selection for Your Primary Navigation 12m
- Accessibility Basics and Dropping Text in the Main Content Well 11m
- Typography of Paragraph and Header Styles 11m
- Continuing Typography on the Intro Copy and Unordered List 12m
- Continuing Typography on the Image Caption and Pull Quote 11m
- Thinking Through Padding and Margin with Variable Content 11m
- Designing Interactions 7m
- Continuing Interactions with Link Styles 9m
- Color - Considerations When Using Brand Color Palettes on the Web 6m
- Designing White Space for the Context of the Web 10m
- Beginning Design of the Right Sidebar Elements with the Related Block 10m
- Finishing Our Right Sidebar Design Elements 11m
- Designing the Footer and Adding in a Final Design Element to the Mockup 11m
- Responsive Design Principles 5m
- Beginning to Implement Responsive Design on Our First Mockup 7m
- Continuing Mobile Implementation for Our First Mockup 12m
- Adjusting the Right Sidebar and Footer Elements for the Mobile Design 11m
- Visual Design - the Supporting Character? 6m
- Getting into Our Second Mockup 2m
- Why Use a Conventional Layout for Your Page (And Website)? 4m
- Distinct Aesthetic Choices That Separate Our Second Mockup from Our First 8m
- Color Palettes and the Web 5m
- Navigation Interaction in Responsive Design - Is There a Best Practice? 8m
- Creating Design Specs 8m
About the author
Kerri is a visual interface designer who's first life in design began at a boutique branding firm in Boston's South End, Sametz Blackstone Associates. There she learned the theory and application of systemic design and branding, which became the foundation for her design practice as she grew into a focus on the web. She's since been designing for the screen, learning how to apply that systems thinking to intuitive user interfaces and beautiful (hopefully) designs. She's worked both on agency and... more