technology

How to create a Web page that will boost business and build your brand

Last week I was approached by a New York Post journalist, Faye Penn, who found me by Googling ‘graphic designer NYC‘, of which I am fortunate enough to have the #1 search position for. Faye wanted to interview me for her next article on the topic of building a web business. I happily accepted and I soon found myself answering a variety of questions on the topics of SEO, social media, branding and online business.

A few days later, I had a photographer around to my apartment in NY and today the article went to print. You can view the article in print below or read it online here: You.com: How to create a Web page that will boost business and build your brand.

For those playing at home, you can find the article as the cover story for the Work section and can be found on Page 39, of the Monday 18th 2011, New York Post.

Below is a short snippet from the article:

By one measure, Jacob Cass is the top graphic designer in New York City.

It’s not because he’s won a million awards or runs a big design firm. Nor does he specialize in food-truck design.

What he does possess: a Web site, justcreativedesign.com, that tops the results when you type “freelance graphic designer NYC” and its variations into Google, a feat Cass achieved through back-end fiddling, weekly blogging on design topics and intelligent site architecture.

According to a recent study by Optify, the first three organic (nonpaid) results in a Google search get 58.4 percent of clicks, with more than half of those going to the first entry. As a result, Cass never has to look for work; he claims to receive a half-million site visits a month ,and 15 substantial project leads a week.

“All of my business comes through my Web site,” says Cass, 23. “I don’t do any advertising at all.”

You can read the rest of the article here.

Below you can see a scan of the article in print. You can click the images below to view them larger.

One thing that did catch my eye was the poorly positioned hyphen in my Twitter username. Got unlucky there, but the link from NY Post sure makes up for it!

My other newspaper appearances:

How to Create a Web Page with Google Page Creator

After you register for a Google account, you can use Google Page Creator to build your own Web pages. Google Page Creator gives you a lot of options; the following steps take you through some of the most important ones:

If you are not already signed in, the sign-in area appears in the upper-right corner of the page.

2If you are not already signed in, enter your password and click the Sign In button.

The Google Page Creator start page appears.

3Click the Create a new page link.

You are asked for a title for your page.

4Enter a title, then click the Create and Edit button.

A new page appears. Your page may look slightly different, but the overall layout of editable areas should be the same.

5Try different layouts by clicking the Change Layout link.

Although the Change Look button seems to come before it, it’s actually better to choose the layout first. The layout underlies everything else, so choosing it early makes it less likely that you’ll need to make big changes later.

6Click the layout you want.

At this writing, there are only four layouts. The classic layout for a Web page is the second one, with a title across the top, a navigation area on the left, and a main content area.

When you select a layout, you are returned to the main Google Page Creator page, now sporting your new layout.

7Try different looks by clicking the Change Look link.

Before you start entering content, take a stab at changing the look of the page. When you click the Change Look link, a collection of looks appears, but the “looks” are a bit generic and may not necessarily reflect the details of your selected layout.

8Try different looks by clicking Preview under each look.

Preview brings up a new window with a sample page, using the previewed look.

Although you can change it later, the look affects all the other choices you make as you design the page. If you change it later, you may find yourself wanting to change everything else on the page as well.

9Select the look you want.

You return to the main Google Page Creator page, with your page shown in the new look.

10Edit the page title.

The initial page title is your e-mail address plus the words “Home Page”.

11Highlight the new page title and choose a header style.

Use every formatting option you can on the title to get a feel for them:

12Enter new content.

Be sure to provide plenty of headers to break up long blocks of text; Web visitors tend to scan, rather than read, and headers help make that easy.

13Click Publish.

Your page appears at the URL e-mail name.googlepages.com.

14Click the View It on the Web link.

You’re a real Google publisher.

How to Create a Web Page Size in Photoshop

by Elizabeth Mott

Whether you code your own websites or produce mockups for a coding guru to construct behind the scenes, use Adobe Photoshop to create detailed visualizations for team review and client approval. Because Web browsers display in the pixel-based world of monitors and mobile device screens, Photoshop's focus on bitmapped imagery matches up with the view your visitors will see when you finish building your designs.

Size Matters

When you mock up or prototype a Web page, keep viewers' monitor dimensions in mind as you set up working files in Adobe Photoshop. Although the W3Schools website attracts tech-centric visitors whose equipment may not match average computer users', its long-term site statistics clearly show the impact of big viewing devices and high screen resolutions. In January 2014, 47 percent of its visitors set their viewing preferences to 1920 by 1080 or higher resolutions, compared with 10 percent 10 years earlier. Along with full-screen site versions, if you're building the mobile-device view of a responsive layout that will adapt to visitors' screen dimensions, you can set up your working file at a size that matches common screen dimensions on smartphones and tablets.

Ready, Set, Go

As you instigate the process of creating an Adobe Photoshop document, you start with the basics: dimensions, resolution and color mode. Set the resolution to 72 pixels per inch and your color mode to RGB for online compatibility. Photoshop's "Web" preset automatically creates an 800-by-600 pixel file, which may not be what you want, depending on the type of page you create and the hardware you assume your visitors use. The program's New dialog box also shows you the amount of disk space your document requires. Use the background contents setting to establish a file that includes a white Background layer, starts with a transparent Layer 1 or fills the background with the current foreground color from the Tools panel. If you expect to build many files at this size and with these settings, save your setup as a preset. In the Advanced section of the New dialog box, turn on -- or ignore -- color management and assign a color profile.

On the Grid

Gridded Photoshop files provide a productive work area in which to design Web layouts based on consistent arrangements of columns, column gutters and vertical page divisions. When you set up these types of arrangements, take a moment to do the underlying math first. Add up the widths of your columns and the gutter spaces between them to determine overall page width or divide the width you want to use by the sizes of the units in which you want to break it up. With your calculations in hand, create a file that contains the right dimensions for your intended use. Note that if you base Photoshop layouts on any measurement system other than pixels, you risk creating design units that don't match the invisible pixel grid imposed by document resolution. You'll see softened edges around rectangular solids because your measurements won't fall exactly on the file's own grid. Of course, if you're accustomed to working in points as a unit of measure, a 72-pixel-per-inch file destined for the Web correlates exactly with point measurements.

Other Considerations

If you design with the ultra-high-resolution screens of Apple's Retina-display devices in mind, create a set of graphics at twice the dimensions of your regular online assets and serve them up to visitors with qualifying hardware. Depending on how you code your website pages, you can use two separate sets of graphics, scale down the Retina-ready files for other visitors or serve up regular images to everyone. Add "@2x" -- without the quotation marks -- to the end of high-res website file names so the software that loads your pages can recognize these documents. You'll have better results if you build the larger files first and create downsized versions of them for regular screens, rather than the other way around, because of the inevitable softening introduced through image-scaling operations.

Version Information

Information in this article applies to Adobe Photoshop CC 2014, Adobe Photoshop CC and Adobe Photoshop CS6. It may differ slightly or significantly with other versions or products.

About the Author

Elizabeth Mott has been a writer since 1983. Mott has extensive experience writing advertising copy for everything from kitchen appliances and financial services to education and tourism. She holds a Bachelor of Arts and Master of Arts in English from Indiana State University.