Web Design is not Print Design

By Elyssa Dolinger on January 18, 2010 at 5:11 pm in Design

art

It’s easy to think that design is design and that there isn’t a whole lot of difference between the types of design.

For the most part this is true. There are definitely fundamental principles that translate across genres. Principles like the golden ratio and the rule of thirds and all of that good stuff. (If you’re a designer, even if you don’t know the name you’d know the rule.)

Aaaaand then there are concepts that definitely don’t translate.

Resolution

The great thing about web design is that you don’t need high resolution photographs. If you are buying stock images, this means you can buy the smaller (and usually cheaper) images.

As far as print goes, the higher the resolution, the better. You don’t deal with resolution as much in print design except for the dire need of a higher resolution image. Working in a higher resolution file means working in a larger file. Working on a larger file means higher processing needs.

Color Formatting

These are CMYK

Cyan, Magenta and Yellow printing pigments.

CMYK and RGB are two different animals. I could tell you one is additive and one is subtractive, but that doesn’t mean a whole lot to most people. It makes more sense to me to realize that one is light based (the light from the computer screen) and one is pigment (or ink) based.

It is very difficult to match print and web colors since they work with two entirely different color systems. Metallic colors are difficult to achieve, but more difficult for print unless you have access to metallic inks.

Fonts

aliasingIn large blocks of text such as books, brochures and newsletters, it’s advised to use serif fonts for ease of reading. The serifs have a way of directing the eye and helping you keep your line placement. It’s especially beneficial for the dyslexic because of the more obvious differences in i, I, l and 1. (Yeah those are all different characters.)

On the web, it’s advised that you don’t have large blocks of text. Sometimes it’s unavoidable, but for a lot of sites the fewer words, the better. The more you break up your paragraphs, the better too. So the need for serifs is pretty much gone.

There are also some technical benefits to using sanserif fonts. For example, sans serif fonts can be sized smaller than serifs and still be readable. There are also some aliasing issues (hard pixilation) with windows and serif fonts.

Organization

On the web, it is best to have your navigation available on every page so that you can navigate anywhere from anywhere. The print equivalent would be to have the table of contents on every page. It certainly takes up space.

Good design transcends browsers and platforms and material, but unfortunately a lot of times it is defined by them. Since the very make up of Print and Web are different, by definition shouldn’t the design be different too?

Alternating column colors with jQuery

By Tim Priebe on January 4, 2010 at 7:04 pm in Design, Technical, css, html

jquery-tablesWe recently had one of our designers create a table design for a client with alternating column colors. Instead of laughing at her and not coding it, we instead decided to use a little jQuery goodness to get it taken care of.

We included the following code in our document’s head, using the Google jQuery implementation:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");

google.setOnLoadCallback(function() {
$("table tr td:nth-child(even)").addClass("even-column");
$("table tr th:nth-child(even)").addClass("even-column");
});
</script>

So that’s the code that gives every other table cell, including header cells, the class of even-column. Now we can style those cells however we’d like.

In our case, a little CSS transformed the table pictured below on the left into the table on the right.

screen-shot-2010-01-04-at-64457-pm screen-shot-2010-01-04-at-64510-pm

Of course, putting the following in our google.setOnLoadCallback function will do something similar for rows.

$("table tr:nth-child(even) td").addClass("even-column");

This would result in the following:

screen-shot-2010-01-04-at-64554-pm

While this could have been solved by actually hard-coding the table’s cells with the even-column class, we are using Wordpress on this site. This means the client could add their own table on down the line, having no idea what a class is, much less to add a specific one to every other cell in every row of the table. Plus, that would be a lot of work.

Can you find the mistake? We obviously failed.

By Emily Spirek on November 20, 2009 at 1:57 pm in Business Identity, Design, General

Case in point. Web is better than print.picture-23

Okay, not all the time, but when you find a mistake 10 weeks down the road, website has been launched, and it’s been through the hands of at least half a dozen people, thousands of dollars aren’t poured into correcting the piddly error.

We might suffer a little embarrassment and swallow our pride until the inaccuracy is forgotten, but we don’t waste the time and money that goes into reprinting the project. We simply redesign and/or work our magic in the code and voilà, error fixed.

Of course, print products (business cards, brochures, etc.) can be necessary for a business, but we are a big fan of instant gratification in the web industry. Besides our other 99 reasons to buy a website, the idea of quick and easy fixes is one of our biggest.

I’m guessing you’ve found the mistake in the screenshot above by now, and if not, you make us feel a lot better about ourselves. Check out the new and improved JJH Media.

Improve Content Absorption

By Elyssa Dolinger on November 12, 2009 at 1:18 pm in Design, How-To

Hey, I’m Elyssa Dolinger, a recent T&S designer hire (Yeah! Helping to even out our designer/programmer ratio.) and I believe strongly in the power of information design.

Print design theory can really help in classing up a web page. More importantly, print designers are used to working with a lot of content. A lot of times people want a lot of content on their web pages. We’ve learned a few things here and there to make content not only readable, but understandable.

Little tricks like the “rag” of a block of text and “leading” and “kerning” can take a page from unintelligible to just plain classy. It’s amazing what small changes to spacing can do for comprehension.

So, what are these amazing tricks, you ask?

Paragraph breaks: Yep. You heard me. Paragraph Breaks. If a reader sees a GIANT BLOCK OF TEXT, they will skip it every time. Give them hope that they can finish your content in the form of spacing between paragraphs.

Rag: The rag is the right hand side of a left-aligned block of text. (Or, conversely, the left hand side of a right-aligned block of text.) Confusing? Yeah. Here’s a picture.

Rag

The rag helps people keep track of where they are when they are reading. If a block of text is justified-aligned, there are no visual clues to help the reader. (Also it messes up your kearning.) The reader is more likely to loose track of where they are in your paragraph. Rather than start all over again, most will abandon the attempt.

Center-aligned or justified-aligned blocks of text are not advisable as far as large blocks of text go, but are okay as far as single lines are concerned.

Leading: Leading (rhymes with heading) is the vertical space between lines of text. It’s sometimes called line-spacing. The more leading you use, the easier a block of text is to read. Too much leading, though, and you’re wasting space.

Leading

See how this block of text (as opposed to the one about rag) seems somehow more approachable? This block of text has about 50% more leading than default.

Kerning: Kerning is the horizontal spacing between individual letters. It is sometimes referred to as tracking. This is most helpful in the case of headlines or specialty “decorative” fonts. (You know, the fonts used in logos and super cool web pages?) Most everyday use fonts or web safe fonts have the kerning ironed out already.

Kerning

Utilizing these 4 tricks, you too can make any content readable, understandable, and absorbable.

Evaluating a website’s credibility

By Tim Priebe on August 26, 2009 at 10:41 am in Design

A couple years back, Stanford performed a large study to determine how people evaluate a website’s credibility. Take a look below and see different factors influence your website visitors.

(Categories with less than 3% incidence are not in this table.)

Percent
(of 2,440 comments)		 Comment Topics
(addressing specific credibility issue)
1. 46.1% Design Look
2. 28.5% Information Design/Structure
3. 25.1% Information Focus
4. 15.5% Company Motive
5. 14.8% Information Usefulness
6. 14.3% Information Accuracy
7. 14.1% Name Recognition and Reputation
8. 13.8% Advertising
9. 11.6% Information Bias
10. 9.0% Writing Tone
11. 8.8% Identity of Site Operator
12. 8.6% Site Functionality
13. 6.4% Customer Service
14. 4.6% Past Experience with Site
15. 3.7% Information Clarity
16. 3.6% Performance on Test by User
17. 3.6% Readability
18. 3.4% Affiliations

Just the look of the site made up 46.1% of the comments! The next closest was over 10% away. This is a dead giveaway that sites like craigslist are the exception to the rule, not the rule.

Your website really does need to show your best side. Not just because a web designer tells you so, but because the research shows that it really does make a difference.

New trendy clothing website redesign launched

By Tim Priebe on May 30, 2009 at 1:28 pm in Client Plug, Design

We’ve just launched a redesign of one of our long-time clients, Nstyle Fashion Xchange. They first signed up way back when I was doing all the design work. We’d tweaked their design a couple of times since then, but this is the first time they’ve had a complete make-over.

Nstyle Fashion Xchange redesign

Compare this to my original design from back in the day, and you’ll be glad I’m not doing the design work anymore:

Nstyle old design

Review of LittleSnapper (as a designer)

By Dave Roach on April 27, 2009 at 6:00 am in Design, Mac, Reviews

Recently I purchased LittleSnapper through Macheist, a super amazing bundle of mac applications (plus the proceeds go to charity). Sorry PC users, this application is for Macs only =( Anyways, LittleSnapper basically takes screenshots of entire webpages…no matter how tall the page is and puts it in a library of screenshots:

LittleSnapper Gallery

This is very handy for many applications. If you have a need to display a screenshot an entire webpage for a portfolio or gallery, LittleSnapper makes this easy. Furthermore, if you are a designer, you can bookmark screenshots of a tutorial and go back to it later, and even make a colleciton of tutorials to view whenever you need them.

Another cool feature about LittleSnapper is that it allows you to snap specific elements within a site. This makes things much more accurate than trying to make a screenshot yourself:

Element screenshot

Screenshots can be taken straight from your browser  and are automatically imported into LittleSnapper, or you can use LittleSnapper’s built in browser, which is especially handy when taking images of specific elements.

What makes LittleSnapper so cool though is what you can do with your screenshots after they have been taken. You can easily annotate your screenshots and upload them to share with others! Check out my website dnroach.com in edit mode:

Annotating

As a designer, LittleSnapper is a handy little tool that I have used daily since I got it. It makes things much easier and streamlined on my part, and it’s a simple application that doesn’t get in the way either. Check out http://www.realmacsoftware.com/littlesnapper/ to read about more features and check it out for yourself.

LittleSnapper is on Twitter!

Our new website design has launched!

By Tim Priebe on April 4, 2009 at 3:21 pm in Business Identity, Design

Well, in the very, very early hours of this morning, we launched our new website’s design. It had been a traditional “shoemaker’s children” type problem, where our quality of websites and design in generally has continuously improved over the past year, but our site stayed the same because we were busy work on other people’s websites and print design.

After putting it off for much too long, we all pitched in and worked really hard these last couple of weeks to get our site done. And it’s really paid off.



Take a look above at our old site on the right compared to our new site on the left, and you’ll see what I mean about our drastic increase in skill over the last several months. Although the website we designed for ourselves at the beginning of last year was solid, it was no longer reflective of our collective capabilities.

Major kudos goes to Dave, who spent hours and hours working on the site, getting it done  phenomonally fast while still doing an outstanding job. And to Eric, who still plans to redo much of the coding his boss threw together to get the site online quicker. Eric, please don’t cry when you start looking at my code.

Please, take a look around. We would love any feedback on the new design.

Business Card Special

By Tim Priebe on March 23, 2009 at 8:14 pm in Design, General

We’re running a great business card special this week. Although normally $250, this week only, you can get business card design from T&S for just $200.

Just contact us for more details!

For fun, vote on your favorite business card we’ve designed from the options listed below. Not that whichever of our designers loses will be teased mercilessly.



Which of the above business cards do you like the best?

View Results

Loading ... Loading ...
Older Posts »