Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Before beginning any web design project, it's good practice to start with a wireframe of the project first. This gives you a roadmap to follow as you start to aggregate content and create your finished mockup that you'll be delivering to your client. Use the wireframe to determine things like margins and positioning of major elements like logos, graphics, and background elements. If you're unfamiliar with creating wireframes, it'll be a good idea to go back to chapter 5 of this course and go through those movies prior to jumping into this chapter. I've created a very basic wireframe for us here, and it will serve as the backbone of our design going forward in this chapter.
I also have opened a finished project for this robot toy company site that we're going to build. Notice that it has the same basic structure as the wireframe, and it also adheres to the margins and content placements that I outlined in the wireframe as well. Throughout this chapter, we'll be building up to this finished product and by the end, you'll have a full working mockup just like the one you see here. Let's get started.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.