So in the third lesson of Photoshop CC for Web Design I’m going to get into creating wireframes during the design process and in the first video of this course I going over a mock client specs for the website.
In this lesson, I’ll work on designing for fictional client provided by this course called Two Trees Creative and in the image below are some notes taken from a “meeting” with the client.
Now it’s recommended to take notes during a client meeting that way both of you are on the same page with the design. On the left-hand side you see the notes, and while taking notes it is also helpful to, at the same time, draw a rough sketch of a thumbnail of the site.
Essentially, the client wants a one-page website that is responsive and on the right you see a one-page sketch with labels to correspond with each section.
Now client meetings can be however in-depth or vague, so you could get something more specific then this sketch or something even more abstract. The more conversations you have with the client the better you can understand exactly what they’re trying to accomplish with this website.
Once we have all the specs from the client we can start to design a more in-depth sketch.
Now, once we take this sketch to the phase of designing it in Photoshop there are going to be some elements that we won’t be able to convey in the program. An example is that if you want the navigation menu to be “sticky,” meaning you want it to scroll with you as you scroll to each section you would need to communicate with the developer of what you’re looking for certain elements.
On the left side the sketch you see some rough calculations for the sizes of each section. You may not know the exact dimensions you want each section, but you can set ground rules for yourself.
IN the next video, I learned more about the reasons to have, and how to apply, a grid system to my documents when designing a web layout. The first reason is that it helps keep things organized. Number two, it helps lay things out really cleanly and precisely based on a measurement of some sort. The best way to use a grid system in Photoshop for web design however, is to use a grid system that is easily translatable into CSS.
There are some examples of grid systems out there on the Internet that you can download like: 960 Grid System, Unsemantic, Lemonade, et cetra, but you can also use Photoshop CC’s grid layout.
To set up a guide layout, we’ll need to jump into Photoshop and open a document by going to the File menu and selecting New, or pressing Command or Control+N. I customize the dimension by making it 1280 pixels in width and 2000 pixels in height.
One way to create guides is to simply click on the rulers on the left or above and drag the guides out before placing them.
The problem with this is that it is time consuming, and you have to really know your numbers right off the bat, so I would need to know how far I need to go in for the margin, how precise I need to be, that kind of thing.
To set up our guides, I’ll go to the View menu and select “New Guide Layout…” to bring up it’s dialog box. First I’ll set up the columns where I want 12 columns that are 60 pixels wide and 20 pixels for the gutter. For the margins, I just want a left and right margin and there I will enter 140 pixels for both. Now I can save this as a Present as well, and to do that I’ll click on the drop down box for the Preset and click on “Save Preset…” I’ll just name “1000 px grid” and click Save and then OK.
The grid system can be very instrumental in streamlining the design process in many different ways once you get used to them.
Now we’re finally going to get into creating and setting up our document for the web design. First I’m going to create a new document by going into the File menu and selecting NEw. I’ll title it “ttc_wireframe” and set the dimensions to 1280 pixels wide and 2900 pixels in height before clicking Create.
Next, I’ll set up the guide layout by going to the View menu and selecting New Guide Layout. I’ll start with the Margins and make the Top margin 60 px but leave the Bottom margin at zero for now. The left and Right margins I’ll set at 140 px each. In the Column section is set up 12 columns at 65 px wide and 20 px in the Gutter.
Now I want to set the guides for each of my sections. To do this I can click on the Rulers and drag out a guide till I’m 225 px for the Header section. For the next section, we wanted it about 600 to 700 px, but we’re going to split the difference to 650 px, which is 875 px. There is an easier way to do this, I can go to the View menu and click on New Guide, set the orientation to Horizontal and set the Position at 875 px and click OK.
I’ll continue to use this method to create each of my sections and for the Footer I’ll add 100 px to the last guide I created to set the position at 2625 px.
You see in the image above that we’ve overestimated the height of the document, so I’ll just use the Crop tool on the left-hand side to cut off that bottom section and our document is complete. All I have to do is save my progress.
So now that we have the guides set, it’s time to layout the wireframe of the website and I’ll start with the header. In the header I’ll start with the logo by going to the File menu and clicking Place Linked. In the assets folder, I selected “ttc_logo”. With the logo on the document, I set the height and width to 90 px each before centering it at the top of the header section.
With the logo in place, I used the text tool to type out the navigation menu. None of my text will be styled at all, right now it’s just about putting place holders for the bare bones of the site. I’ll center the text as well in this section before moving onto the “welcome” section.
In the welcome section, we’ll use a big image, so I’ll click and drag a rectangle to fill out the entire section before labeling it as an image with the text tool.
Next is the about section where I’ll start with a square that is two columns wide that will set as a placeholder for employee photos. I’ll then Shift+Option(Alt for PC)+click and drag to make a copy of the square. In the Layers panel I’ll select both rectangles and click and drag two more copies.
On the left side of this section I’ll have text there, so I’ll select the Text tool and make the text box six columns wide. To put placeholder text, I’ll go to the Type menu and click on “Paste Lorem Ipsum.” With the text left-aligned, I’ll then use the Text tool again to label this section “About Us” and center it at the top.
In the portfolio section, I’ll click and drag out a square that is three columns wide as an image placeholder. I’ll then Shift+Option(Alt for PC)+Click and drag out three more copies to fill the width of the section.
I then selected all the squares in the Layers panel and shifted them up a bit before using the Text tool to type “Portfolio.”
For the contact section, I started with clicking and dragging out a rectangle that filled half of the section to mark where the Google Maps would be located. On the right-hand side of the section is where the contact for is will be located, so I used the rectangle tool to layout the form, adjusting as needed.
And that is how to wire frame out a document. After showing it to the client and getting the approval, it will be time to move onto the adding the aesthetic elements to the design.
Leslie Nation 