- Overview
- Transcript
1.1 Welcome to the Course
Let’s begin with a quick overview of what this course entails and the things you’ll be learning to help developers understand your designs. I'll also introduce you to the design we’ll be working on.
1.Introduction
1.1Welcome to the Course01:16
2.Laying the Foundation
2.1Basic Wrapper Layout06:51
2.2Design Shortcut: Start With an Image10:21
2.3Create Content for the First Panel14:32
2.4Start Forming a Color Palette09:11
2.5Test Color Contrasts as You Go03:45
2.6Choose and Preview in a Handoff Application Designed for Coding07:06
2.7Check for Half Pixels and Prevent Misalignment13:41
3.Fleshing Out Content
3.1Create a CSS-Ready Gradient Background05:46
3.2Basic Typography and Buttons12:36
3.3Don’t Forget to Design Links!06:07
3.4Complete Typography: Headings, Line Heights, and Margins22:35
3.5Ensure Content Is Collapse Friendly15:52
3.6Tidy Up and Add Notes for the Coder13:35
4.Conclusion
4.1Wrapping Up07:54
1.1 Welcome to the Course
It's a pretty common approach to web design to have one person create the design of the site and another person go through and code up that design. And what's also pretty common is for a design that's intended to be coded up to look a little something like this. So this all looks very pretty, but there's actually a lot that's missing in order to be able to properly turn this into a coded up, fully functioning website. A design that's properly code friendly should actually look more like this. In here, we've got a lot more of kind of information that a coder really needs to take your design, your concept, and actually make it work on the web. This course is the first in a two-part series, one where we're gonna use Adobe XD to create a code friendly design, and another where we're going to use Avocode to take that design and code it up. In this course, we're gonna cover some of the most common things that designers tend not to be aware of, that really need to be included in the design in order for it to be a complete website design, and it's part of the process. We're also gonna cover some shortcuts that can help you speed up the process of making really cool designs for the web. We're also gonna bring in a little practical application of color theory, and we're gonna include a little bit of accessibility as well. Let's go ahead and get started on code friendly design with Adobe XD. I'll see you in the first lesson.
