Join Justin Seeley for an in-depth discussion in this video Exploring the final project, part of Illustrator for Web Design: Aesthetics.
- Before we get started actually building out the aesthetic portions of our website, I thought it'd be important for me to go through and show you the final project so you know exactly what it is you're working towards. This course is the third installment of the Illustrator CC for Web Design series. So if you haven't already, you might want to go back and check out Illustrator CC for Web Design: Core Concepts, and Illustrator CC for Web Design: Wireframing, just to get yourself up to speed. This is the final project. It's the MOUNTAIN RAIN app laboratory website.
This is a fictional company, of course, and theoretically they build mobile applications for iOS and Android. And so they've asked us to build their website and we've already gone through the wireframing portion of it, so now we're just basically skinning the wireframe with all the aesthetic elements that we need. So you can see here, this is a one page website design, and there's a lot going on inside of it. There is a header up here at the top that's got the logo, which is semi-transparent, ghosted on top of a mountain image. You've got this headline here, all three of these icons, text everywhere all over the page, input elements like forms and buttons, you've also got some interesting shapes across all of these different team member photos.
And of course you've got this app mock up and badges for the iOS store and Google play store down here towards the bottom. You'll also notice inside of this document that there are several different Layers and sublayers. If you haven't already watched the wireframing portion of this course, then you might not know exactly why I've added in things like Notes, Gestures and Labels. Go back and watch the Illustrator CC for Webdesign: Wireframing course for more information on that. But in this one, I've already added the Guides Layer for you, and I've already organized everything into their own sublayers inside of the UI Layer as well, making it very easy for me to hand this off to a developer at the end of the day.
However, it's not going to be that easy for you once we start off, because we're not starting off with something that looks like this, we're starting off with something that looks like this. This is just the basic wireframe that we've been handed by someone and it's our job to take this monochromatic, very basic, thing and transform it into what you just saw. As you can see here, the text is completely unstyled, there's no images, there's just placeholders for everything. There's no color, there's no nothing. And if you look inside of the Layers panel, there's really no structure whatsoever.
So it's our job to bring life to this lifeless mock-up and transform it into what you saw earlier. And then it's also our job to clean it up and deliver it to the developer in an easy to understand format that he can quickly and easily convert into code.
- Finding color inspiration
- Applying color
- Choosing the right typeface
- Using character and paragraph styles
- Optimizing graphics in Photoshop
- Placing photos and vector artwork in Illustrator
- Creating buttons and other UI elements
- Organizing and sharing your project