com117 – psa – grids and web deisgn grids...

1

What is a grid?A grid breaks space or time into regular units…Typographic grids are all about control. They establish a system for arranging content within the space of a page, screen or built environment.— Ellen Lupton, Thinking With Type

Why use one?• Helps break up “White Space”• Gives order, structure to chaos• Helps proportional relationships• Overall polish (amateur vs pro)

Why use one for web design?Website design uses many of the same design principles as print. The grid is just one tool borrowed from print design. The other key ingredients of great design:• Use of white space• Use of typography• Use of color• Image use

COM117 – PSA – GRIDS AND WEB DEISGN

GRIDS&GUIDES

How to Display grids & Guides in PhotoshopView > Show GridView > Show Rulers ( or Command–R )To use a guide, simply go to the ruler on the left with your cursor (for a veritcal guide) and drag onto your canvas or go to the ruler at the top (for a horizontal guide) with your cursor and drag onto your canvas.of each asset is critical.

2


Grids & Guides continued…

1140 GridDownload it here: http://cssgrid.net/

Why use it?Works great with 1280 monitors and by using “Media Queries” it becomes “fluid” and “adapts” to the width of your browser and device. It speeds up design, overall production.

Note: The Photoshop template is just for visual design (the mockup).

3



Using the 1140 GridHere are a few tips to help you get started using the 1140 Photoshop template.

1. Extend Your Canvas Go to Image > Canvas Size

Adjust the height

Make sure the anchor is set to the top arrow from the center

Modify the canvas extension color to the background color of your choice.

You should see the following dialog box (below).

2. Plug in a new height Tip: 1200-1500px is a good starting point. You can always adjust the canvas as needed to accommodate your content.

4



3. Extend Your Grid Layer Go to Edit > Free Transform

You should see “hand bars” around the grid columns and gutters.Tip: Make sure the grid layer is selected

Pull down using the bottom center bar the length of your canvas. You can always adjust this as your canvas height grows or shrinks.

Pull down using the center “handle bar” that appears when you select “free transform”.

Make sure the grid layer is selected in your layers window before using the free transform tool.

5



Your 1140 grid template should look similar to the image below.Tip: The darker “bars” are your grid columns. The white “spaces” are your grid gutters.

6



4. Save your file Giving your production files an easy to remember name makes it easier for you and anyone you collaborate with understand what is in the file. Keep your naming conventions easy to remember and consistent.

Examples: SiteName-Home-V1.psd SiteName-About-V1.psd SiteName-Contact-V1.psd

5. Stay Organized. Use Layer Groups. In your Layers window (Window > Layers) create groups for each major section (or division) of your website structure. A good starting point are creating groups for the following: Header, Navigation-Main, Content-Main, Sidebar1, Footer Adjust your layer groups as needed. Keep your layers organized within these groups. It will help you track your layers. Once you get in the design groove, your layers can get all crazy. Round ’em up with layer groups!

A. Use the Options flyout menu in the layers window to create a new layer group.

B. Name your new Layer Group.

7



6. Think of Your Content Types as Shapes Sometimes it helps to use the shape tool to quickly map out shapes in your Photoshop file to give you an idea of how each of your content types will relate to each other on the “page”.

Examples of Rough Layout “Maps” These examples are just examples. There are many ways to structure a website and these are some of the standard layouts out in the wild. As always explore ways about how content can be orchestrated in a viewer’s (user’s) browser.

Tip: Remember that the browser window has a frame so give your content enough “padding” away from those frames.

8

GRA217 : WEBSITE PROJECT : GETTING STARTED WITH WEB DESIGN : PROFESSOR KEN HARPER : 2012


Website Content Does Not “Stay Put”Unlike print designs, website content does not always align vertically or “fit” in predetermined spaces. The web is interactive after all! Now with mobile screens and devices, be prepared to design for different types of screens.

Also, users have control over their browsers. You do not. Do not expect your designs to look the same in everyone’s browser. Design with flexibility in mind. It’s OK for your “columns” or sections to be unequal in height.

Design in Digestible ChunksThink about how you consume content on the web. More than likely you scan a web page rather than reading every word. Think about how headlines, subheads, pull quotes, images, etc. can help break up longer articles.

More Typography OptionsWith browsers supporting the @font-face property and typography delivery services such as Typekit, the web is more beautiful due to a greater range of well-designed fonts available to designers. Yay! But, use with caution. Don’t go crazy. It can affect page load times. (The longer a page takes to load, the more people “bounce”). Check out the many free font sites such as FontSquirrel.com to use something other than Arial or Helvetica.

Avoid the “Box” Look of the 1990sWant to look so 1998? Not. Approach your designs thoughtfully with content, goals and ease of interaction, navigation in mind. Vertical “space” is unlimited (and even horizontal space - wow!). Take advantage of it. Perhaps even make it fun. Consider using the “motion” of the online space

to make the experience of your website engaging for your audience. Go box crazy with your website and it might as well be wearing parachute pants.

Follow and Establish “Design Patterns”As westerners, we read left to right so make it easy on your visitors (users). “Don’t Make Me Think” is a book by Steve Krug (highly recommend it!) about usability. Design web interactions that are easy peasy. Websites that are intuitive, easy to navigate, accessible, “usable” are more successful.

Be consistent across your web pages. Don’t change the placement of your navigation just because you feel like it. Don’t make it hard to find. Use the same color to signal to your visitor that text is a link.

Establish patterns and your visitors will have an easier time moving around your website and consuming your content.

Text Should be ReadableWhy bother with a website if you design it so visitors have a hard time reading it? The design principles you’ve learned for print also applies when designing websites!

Explore Website Galleries for InspirationTo really get a sense of the best interactive designs on the web, visit some web design galleries for inspiration. Take note of scrolling, interaction, designs of buttons, navigation styles, animations, changes in “states”, placement of key actions (e.g. “donate now”, “buy this product”, “sign up for our newsletter”, etc.)

** IMPORTANT ** Websites scroll! (Whaa? Duh.) Not long ago, scrolling was frowned upon. You may even hear something about best practices and “the fold”. Don’t believe it. Design standards evolve. Users expect to scroll. Design with the scroll in mind. Take advantage of the unlimited vertical space. Be sure to quickly communicate what your site is about but that age-old myth about “the fold”? Don’t worry about it.

A Few Tips For the Beginner Web Designer – Part One

DESIGN EVERY “STATE” OF INTERACTION

Visit a website and move your mouse over the navigation links. What happens? Do they change colors? Is there any kind of animation? What about when you click on the page and read the content? How do you know you are on that page?

When designing you site, your “About” link may be white on a black background but when a visitors hovers over it, the link changes to white and has a black background. Then when the user clicks on the page, the link remains white with a black background to communicate to the user their place in the website.

Your design file should show the link condition of each “state”. There are four states:• Link = Normal (or unvisited link)• Visited = A user has clicked and “visited” this link, page or section• Hover = When a user mouses over a link• Active = When a link is clicked

Links are just one example of signaling to the user interactivity. You may have a form with input fields that change their states when a user places their cursor in the field to type. Whenever you have a design element that changes its condition to help give a signal to the user, your Photoshop file must include those different conditions and/or you will need to clearly communicate it in your functionality document.

9



Cascading Style Sheets, or CSS, is the recommended way to control the presentation layer in a web document. The main advantage of CSS over presentational HTML markup is that the styling can be kept entirely separate from the content. Source: http://reference.sitepoint.com/css/css

HTML or Hyper Text Markup Language is a language for describing web pages. HTML is not a programming language, it is a markup language that uses a series of markup tags. HTML uses markup tags to describe web pages. Source: http://www.w3schools.com/html/html_intro.asp

Adaptive or Responsive Website: An adaptive website adjusts the structure, content, or presentation of information in response to measured user interaction with the site, with the objective of optimizing future user interactions. Adaptive websites “are web sites that automatically improve their organization and presentation by learning from their user access patterns.” Source: http://en.wikipedia.org/wiki/Adaptive_website

Bounce or Bounce Rate: Bounce rate is the percentage of single-page visits or visits in which the person left your site from the entrance (landing) page. Use this metric to measure visit quality - a high bounce rate generally indicates that site entrance pages aren’t relevant to your visitors. The more compelling your landing pages, the more visitors will stay on your site and convert. You can minimize bounce rates by tailoring landing pages to each keyword and ad that you run. Landing pages should provide the information and services that were promised in the ad copy. Source: http://support.google.com/googleanalytics/bin/answer.py?hl=en&answer=81986

SEO (Search Engine Optimization): Search engine optimization (SEO) is the process of improving the visibility of a website or a web page in search engines via the “natural,” or un-paid (“organic” or “algorithmic”), search results. In general, the earlier (or higher ranked on the search results page), and

more frequently a site appears in the search results list, the more visitors it will receive from the search engine’s users. SEO may target different kinds of search, including image search, local search, video search, academic search,[1] news search and industry-specific vertical search engines. Source: http://en.wikipedia.org/wiki/Search_engine_optimization

@font-face Property: @font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn’t got that font installed. This means that web designers will no longer have to adhere to a particular set of “web safe” fonts that the user has pre-installed on their computer. Source: http://font-face.com/

Fluid website: A fluid or liquid website layout is flexible. The components within the layout are based upon percentage widths. This allows the layout to change based on the resolution of the users screen. While there may be a few settings that are fixed such as margins, the general layout is based upon percentages. Source: http://webmasterformat.com/blog/fixed-vs-fluid-web-design

Media Queries: HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets.

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.

Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself. Source: http://www.w3.org/TR/css3-mediaqueries/

Usability: Usability is the process of making a website easy for customers to use. It encompases the heuristics of the site as well as the methods that people use to manipulate the site.

A website is considered usable if the customers coming to that site can find what they need and accomplish their goals. Source: http://webdesign.about.com/od/usability/g/usability.htm

Website / Web Design Terminology – Part One

Recommended Books• Designing for Emotion by Aaron Walter• Responsive Web Design by Ethan Marcotte• Mobile First by Luke Wroblewski• CSS: The Missing Manual by Dave McFarland• Learning Web Design by Jennifer Neiderst Robbins

UNDERSTAND DATA & GET YOUR HANDS “DIRTY” WITH PROGRAMMING

If you are more “right-brained” than “left-brained”, it’s time to get in touch with the other half of your noodle. These days, a successful communications career is a blend, a collaboration between art and science.

The ability to analyze, distill, organize and present data clearly will help you create new experiences that engage your audience.

If you are able to program or code (HTML, CSS, Javascript, XML, etc.) or even have a base understanding of how they work, chances are you’ll be ahead of those who do not.

Today is multi-device, multi-dimensional. Understand how the engineering behind the “creative”, the “idea” works and craft the meaningful experiences of tomorrow.

com117 – psa – grids and web deisgn grids...

Documents