5 Reasons why Fireworks kicks Photoshop’s Web Designing Butt

By Elyssa Dolinger on September 3, 2010 at 11:50 am in General

kickinbutt

When it comes to designing webpages I prefer working in Fireworks. I know, I know. There seems to exist a real prejudice against Fireworks. Sort of like you’re not a real designer if you use it. I challenge any web designer to give Fireworks the old college try. Making the switch to Fireworks was the best thing I ever did for the efficiency of my website building. And here’s why:

1. Fireworks is intuitive to web design.

Click to see full size.

Fireworks was built originally by Macromedia with a focus on web designer needs. That means it is optimized for a web designer’s needs. They made web-related things readily available like image compression, an intuitive slicing system and a whole different way of grouping and layering. One of my favorite features is that when you copy something, it pastes it in exactly the same place.

And for those of you desperately clutching to Photoshop because it is familiar to you, lots of things are just the same as in Photoshop -  some keyboard shortcuts, toolbars, panel layouts, etc. The design environment feels very similar.

Click to see full size.

2. Pages.

The way that Fireworks does its layer groupings is incredibly inclusive compared to Photoshop. One Fireworks file, like an InDesign file, may contain many pages. Each of those pages contains a unique set of layers including but not limited to a web layer where you make your slices (toggle those on or off by pressing the number 2 on your keyboard) and a locked master layer (so you can’t mess it up). If you make a master page, much like InDesign, those design elements will transfer to every page designed after. This is incredibly useful after you design the navigation, for example.

3. The Web Layer.

Click to see full size.There is more to it than just slicing and optimization. If you’re a non-coding designer, you can set up links and even rollovers for a working demo version of your site. Coders, you just keep doing your thing. The code it spits out is in no way clean, but it works for instant gratification. Which is nice ‘cause it’s instant.

4. Pixel-perfect sizing.

Do you need to make a box 697 pixels wide? With Fireworks’ inspector (reminiscent of Flash, isn’t it?) you can type in exact amounts. You can even tell it what degree to round the corners. No messy measuring or dragging handles. Simple.

Click to see full size.

5. Reactive Gradients.

Interactive Gradients

Gradients are all the rage ever since web2.0, right? Aren’t you tired of fighting them in Photoshop? In Fireworks, the gradients have handles. You can grab and drag the points so your gradient starts and stops exactly where you want it to within the object.

Don’t get me wrong. There are some things that can only be done in Photoshop- any kind of bitmap editing, actions, quick mask mode, to name a few. To some degree some of these things can be imitated in Fireworks, but it’s not made to edit everything under the sun- it’s specifically made for building websites.

It’s not like I hate Photoshop. Photoshop is good at what it does. We’ve been good friends for many years and I still use it in conjunction with Fireworks for bitmap editing. It’s just that designing a site in Photoshop always, to me, feels like using a fork to eat soup. Use the tool that was designed specifically for the job. Use Fireworks.

Websitepalooza: Part Deux coming soon

By Tim Priebe on June 23, 2010 at 12:54 pm in General

Websitepalooza: Part Deux is coming on July 22. Websites while you wait. More info coming soon…

Websitepalooza: Part Deux

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).

Older Posts »