Pratt SCPS Design for the Web: 2017-01-29

Setting Up Photoshop

The resolution for the web is 72 dpi (dots per inch); a good resource for screen resolution and dimensions is: Website Dimensions

I would recommend beginning with a white background to start with as you can always change it.

The size of your document is typically determined by your target audience, and the type of site you're designing for, e.g. web, tablet, mobile. When designing for web, the lowest common denominator for your document should be 960 pixels wide, which will fit in a 1024x768 pixel screen resolution. Depending on your audience, you could go larger, but I typically like to keep all content within 1440px wide by the length of your content.

You also need to be aware of the browser window around your site. If you plan on having a background image, color, texture, etc., you may want to make your document larger than the content area so the background is visible. Even if you're not using a background, you need to remember that there could potentially be space around what you see in Photoshop.

The "Invisible" Fold

If your client wants all the content on the homepage, or any other important information, to be visible without scrolling, it should not extend past 750px from the top of your document. Keeping "the fold" in mind, remember that the viewing size is smaller because of the space that the browser takes in your window, so the above number could possibly be a little less.

Workspace

Check all your settings.
Info tab and rulers need to be set to pixels; there are no inches on the web.
Set up your color profile for Web and sRGB.
Make sure "snap to" is on.
Open your rulers (Command R) and drag out a center rule at 600px.
If you're working with a grid, setting up your grid lines should be one of the first things you do - more about grids to follow.
Create a new layer for site stroke if needed.
Make sure your info palette is open.
Create the main groups in your layers panel.

Photoshop Layers & Groups

The image below shows how you might organize your layers using groups. Make sure all groups and layers are named and you can think of it in terms of your layout and content.

You will have the following main groups; and all of your content will go within one of them:

Header
Content
Footer

You can (and should) create sub-groups within each main group of content. This will help to keep your files clean and neat and is proper industry etiquette, especially if you need to share files with colleagues.

Grid Systems

“The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.” Josef Müller-Brockmann

In the most basic terms, a grid system is a structure that designers can work with and present content and imagery in a more manageable way. Even simpler, a grid system is a structure of horizontal and vertical lines that intersect and are then used to arrange content.

Grids allow the designer to build a solid structure and form into their designs. Having a solid grid system creates consistency and familiarity, thereby building trust in your designs. When using a grid system, it doesn’t mean that your designs will become boxy or boring, but rather it should be seen as something that will enable you to create a design that’s unique and intuitive to the user rather than restrictive.

By engaging with your user and building a sense of familiarity with them, you, as the designer, are in turn creating a good user experience - and enabling a grid system helps you achieve that.

“Although your grid system is something that will eventually be invisible to your final user, you can use it to aid you in creating layouts for your designs. But, like all rules when designing (and sometimes when developing) rules are made to be broken. You might not necessarily always need to stick to your grid formation, but you do need to understand grid systems, before you can commit to breaking the rules.”1

Choosing A Grid System: Framework vs. DIY

A framework is a grid system that someone else has already built; take a look at some here.

Creating your own grid can be challenging if you’ve never done it before, but there are so many tools available to help you, and with a little practice it becomes second nature.

Tools to help build grid systems:

Frameworks
960.gs
Responsive Grid System
Golden Grid System
Bootstrap

DIY
Gridset App
Gridpak
csswizardry-grids

Designing Your Wireframes

Wireframing is a very important step in any design process as it allows the designer to define the hierarchy of the design. This makes it easier for the designer to plan the layout according to how the user should process the information. A wireframe is also very useful in determining how the user interacts with the interface. In addition, it allows the designer to plan the layout and interaction of an interface without the distraction of colors, fonts or even copy and other content.

"Like the foundation of a building, it has to be fundamentally strong before you decide whether to give it an expensive coat of paint."3

Design Processes

Different designers approach design (and wireframing) differently, and everyone needs to find his own process. If you don’t have a preferred process, take some time to find yours as it’s something you’ll want to get comfortable with.

Take a look at some common processes:

Sketch…
Low-Fidelity Wires…
High-Fidelity Wires…
Final Visual.

As mentioned, there are many different processes, along with many different softwares that can aid in the development of your wireframes, but it’s always best to begin with sketching out your ideas. This will help you quickly visualize your ideas on paper to see which design(s) to move forward with. From there, you can choose 1 to 3 sketches to develop into low-fidelity wires using any of the tools below:

OmniGraffle
Balsamiq
Axure
Flairbuilder
InDesign
Illustrator

Creating high-fidelity wireframes is optional, but it will help you design more efficiently and is essentially the first step in preparing your final visual design.

From your sketches or low-fidelity wireframes, choose a design and lay it out in Photoshop using solid grey blocks for images and dummy copy as place holder text - a good widget you can install on your computer for instant “lorem ipsum” is Loremify.

By creating a high-fidelity wireframe, it will help you to organize your file and get a better sense of how content will look laid out to scale. That’s not to say that your low-fidelity wires shouldn’t be to scale; they should always be to scale unless you’re working directly from sketches to high-fidelity wireframes.

I prefer to design my high-fidelity wireframes in Photoshop because this makes it easy to quickly modify the wire into the final visual design, but you could also use Illustrator since you have the capability to export files to a .psd file, keeping most of the layers editable.

Take a look at some high-fidelity wireframes that have been translated into the final visual.

Finally, this stage of the process should be fun, as are all the stages! Look to other sites for inspiration and like any process, don’t be afraid to iterate, iterate, and iterate again!

References:

Pratt SCPS Design for the Web

Pages

Wednesday, February 1, 2017

Preparing Your Photoshop Files