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?

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.

Websitepalooza coming soon…

By Tim Priebe on October 1, 2009 at 7:05 pm in General

Websitepalooza is coming on October 29th 30th. Websites while you wait. More info coming soon…

websitepalooza

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.

Brand spankin’ new sites!

By Dave Roach on August 21, 2009 at 6:48 pm in Client Plug

Recently we have launched three more new sites, Dental Depot, Westwind Digital and TS Dudley.

Dental Depot’s site covers all of their locations in Oklahoma, Texas, and New Mexico. Their site resembles what the inside of their offices look like, truly a unique dentist office. You can view their website in our portfolio.

Westwind Digital Communications installs business telephone systems, provides computer networking hardware and services, and installs video surveillance equipment. You can view their website and their business cards in our portfolio.

T. S. Dudley Land Company Inc. (TSDI) is an energy service company in the business of providing professional landmen, acquisition agents, and project management to the energy industry.

large-ddplarge-wdclarge-tsd

We always have more websites in development, and we will post them here around the time of launch, so check back often!

Check out our updated portfolio!

By Dave Roach on August 3, 2009 at 12:11 pm in Updates

Our portfolio has been recently updated to show some of our more recent work. Here is a list of what was added:

Websites

Print

Logos

Also added are links to our websites! Now you can actually view the site instead of just a screenshot (honestly, we really do make websites, now you have proof).

Free T&S Orange Icon!

By Dave Roach on July 17, 2009 at 6:00 am in freebies

Orange Sizes

Now everyone can have fun with their very own ‘Orange’ icon fresh from T&S. You can use it for whatever you want! Here are a couple ideas:

  • You could change all of your icons to oranges
  • You could change just some icons to oranges
  • You could change one icon to an orange
  • You could put an orange on your dock and look at how pretty it is
  • You could print out a copy of the orange and pretend to eat it
  • You could invert the orange and make it a blue

As you can see, the orange icon is very fun and versatile, so download it for free today!

Download Orange Icon

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!

99 reasons to buy a $99/month website from T&S

By Emily Spirek on April 23, 2009 at 12:17 pm in General

Here at T&S, we’re in the process of launching our new, low-cost websites that run just $99/month. You can read all the details here.

We came up with 99 reasons you should buy this new, affordable website option from T&S, and thought we’d share those reasons with  you.

1. inexpensive
2. easy
3. effective
4. domain name included
5. hosting included
6. unlimited # of pages
7. T&S takes care of initial setup
8. no setup costs
9. T&S fills in initial pages
10. no special software on your computer
11. Easy updates
12. 1 hour training included
13. up to 60 email addresses
14. unlimited email support
15. only 1 year commitment
16. hundreds of designs to choose from
17. no hidden fees
18. T&S speaks english, not techno-babble
19. save money compared to other advertising
20. increase professionalism
21. compete online
22. don’t pay thousands of dollars
23. content management system is expandable
24. customizable with your logo
25. content and template checked for compatibility
26. one central location online
27. more room than a business card
28. more space than the phone book
29. did we mention unlimited pages?
30. establish online presence
31. supplement traditional advertising
32. no technical knowledge needed
33. create a hub for your social network marketing
34. blog is included 35. quick gallery updates
36. upload any file type
37. more room than a magazine ad
38. no more newspaper ads
39. add features without changing monthly cost
40. easily advertise specials
41. provide better customer service
42. it’s your answer to everything
43. be accessible 24/7
44. update site anywhere, anytime
45. replace traditional advertising
46. get customer/client feedback
47. look better than competition
48. widen customer base
49. compete internationally
50. expand your business
51. save money
52. give favorable impression
53. generate leads
54. more room than a brochure
55. get customers’ business
56. strengthen brand identification
57. simplify your marketing
58. make info available about services
59.  no more phone book ads
60. yearly payments available
61. appeal to target market online
62. user friendly
63. very low risk
64. quick setup
65. make your small business look better
66. receive setup assistance
67. blogs increase traffic
68. blogging helps you learn
69.  advertise your business
70. it will help grow your business
71. receive flexible service
72. communicate better with clients
73. no html knowledge needed
74. ecommerce capabilities
75. control your updates
76. keeps prices competitive
77. establish customer trust
78. if you don’t exist in search engines, you don’t exist
79. establish word-of-mouth
80. try unique marketing ideas risk-free
81. easy to fix snafus
82. use an award-winning content management system
83. no print costs
84. no color matching with print items
85. update content quickly
86. expand your target market
87. templates are professionally designed
88. no more mail-outs
89. increase your credibility
90.  more room than a flyer
91.  make product info available
92. inexpensive redesigns
93. easy to add new pages
94. your customers expect you to have one
95. professional installation & setup
96. it’s green
97. you can’t afford not to
98. allows for easy payment
99. if you don’t exist online, you don’t exist

Thanks for reading, and contact us if you would like to meet to see if our $99 per month website would work for you.

Older Posts »