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.
Compare this to my original design from back in the day, and you’ll be glad I’m not doing the design work anymore:
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:
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:
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:
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.
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.
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.
Loading ...This week was a very exciting one for us here at T&S Web Design! We’ve launched three new websites this week. Check them out and let us know what you think.
Avanti Skin Care Center of Norman
Associate Medical Professionals
Fireworks is often overlooked. Many (most) web designers today use Photoshop to design their websites, and a lot of them have never considered or (*gasp) even heard of Fireworks. Adobe Fireworks is made for creating websites. That is what it was built for, and it does it well. Fireworks enables you to rapidly prototype and design for the web. With it you can create a clickable PDF that will act as a prototype. Also, you can quickly create export and optimize slices (Fireworks is better at optimizing images than Photoshop).
Now don’t get me wrong, Photoshop is an extremely powerful tool and is amazing; it has way more features than Fireworks, but if all you are doing is designing websites, then you should use software that was specifically made for doing just that. Another excellent feature to note about Fireworks is that it is compatible with Photoshop. For the most part, you can open a psd in Fireworks, and it will recognize all of your layers and styles, and with CS4, compatability between Adobe’s programs have been further improved.
If you are a web designer and have not looked into using Fireworks, you should at least try it out and see for yourself how efficient it really is. There are hundreds of other excellent features Fireworks has to offer, read more about them at Adobe’s site.
When designing a site in Fireworks, I have found that working with rounded corners can be a bit tricky if you don’t know some specifics. First off, there are two main ways to make rounded corners, the rectangle tool, and the rounded rectangle tool.
When using the rectangle tool, you can round the corners by using the ‘rectangle roundness’ slider on the properties panel. Yes, this creates pretty rounded corners, but a couple problems can arise when using this method.
First off, the rectangle roundness is relative to the size of the rectangle. If you have two rectangles of different sizes, both at 50 rectangle roundness, they will not appear the same.
Someone using this method to try and match corners will end up being off by a couple pixels, which can be crucial when it comes to coding.
So this is where the rounded rectangle tool comes in handy. When you create a rounded rectangle, you can just use the yellow handles to resize the entire rectangle and to adjust the roundness, even specific corners. Even better, resizing the rectangle via the yellow handle will not affect the roundness (unless you make it super tiny).
Sounds easy enough, right? Well yes, but there are unseen issues here. When designing a site, pixels matter. For this reason, I like to type in the width and height of my rounded rectangle in the properties panel. The problem with this is that if you type values for a rounded rectangle it stretches it. It does not matter which method you use, the rectangle will stretch, and your corners will stretch as well. Luckily, there is an excellent solution to this problem!
What you need to do is to convert your rectangle into a symbol. You can make as many states of a symbol as you want, and then all you need to do is change one symbol and they all will change accordingly. Let me walk you through it.
First off, make a rounded rectangle with the rounded rectangle tool. Doesn’t matter the size or color.
Next, select the rectangle, and hit F8. Name the symbol whatever you want, make the type a graphic, and check the box that says “Enable 9-slice scaling guides” and click OK. Congratulations, you have made a symbol.
Now you need to double click on your symbol to go inside of it and edit it. In the window that pops up, you can resize, recolor, change the roundness of your rectangle, apply filters, whatever you want. Then what you need to do it set up the 9-slice scaling guides. These guides allow you to resize your rectangle (outside of the symbol editing window) without distorting the corners. Just align the guides so that the rounded edges are outside of the guides.
Now you can exit the symbol editing window and resize your rounded rectangle with the transform tool or by typing in the values in the properties panel. The only thing you need to watch out for is making the rectangle too small. If you shrink it so the corners meet, then they will distort like before.
The great thing about using symbols for rounded rectangles is that you can duplicate them and then edit one symbol’s corners and all instances of that symbol will change, no matter what size they are. This is especially useful if you change your mind later in the design process. Using symbols is really easy once you get used to them, and can streamline the web development process.
If your business is like many other small businesses, you’re probably on a relatively tight budget, even when creating a website. You’ve signed a contract with a web design company, and they’re wanting your content for the website, including photographs. Money is tight, so you opt to take them yourself.
Big mistake.
Taking the photographs yourself will, 99% of the time, result in ruining the visual aspect of the website you’ve just paid big bucks for. It’s like paying for a commercial during the Superbowl, then trying to shoot it yourself with a $200 camcorder.
But I have a nice, expensive camera
“But Tim,” you might say, “I just paid big bucks for this fantastic camera. My photos are going to look great!”
While a fantastic camera along might work for family photos or vacation memories, it doesn’t mean your pictures are going to be good enough to pass muster for your website. After all, if better equipment was all that was needed, couldn’t anyone perform brain surgery?
Okay, okay, so that’s a pretty extreme example. Let’s look at something a little closer to home for the average small business. What about printing your own business cards with a nice new printer? After all, printers have come a long way from the old days. But let’s face facts. Business cards printed on your printer are still not going to look as good as a professional printer.
It’s the same exact thing with photography.
A picture’s just a picture
“You’re just making a mountain out of a mole hill,” you might respond. “My photos aren’t going to make that big of a difference.”
Really? Studies performed at the University of Aberdeen asked website visitors to rank the credibility of an article. The first group had a good photograph of a doctor, the second a poor photograph of a doctor, and the third had the article with no photograph at all. The highest ranked version in terms of credibility was the one with the good photograph, the second the one with no photograph, and coming in last place was the one with the poor photograph.
I’m under no illusions that this will convince all small business owners to pay a professional to take photographs for their website. But there are plenty of options better than doing it yourself. You can use stock photos, hire a student, or hire a hobbyist. There are plenty of inexpensive options available.
Merry Christmas, all!
For those of us who are not officially designers, but still like to create, it can be hard to come up with a color scheme. I had a few websites I liked to use for inspiration back when I wore all the hats here at T&S (scary, I know), and some other neat ones have come to my attention since then. So whether you’re designing a website, a brochure or just a business card, here’s some websites that can help you come up with a color scheme.
Free. Something everyone wants and something designers thrive on. Smashing Magazine is constantly giving away inspiration to designers, which we’ll always accept with open arms. Here is a link to some desktop calendars that will spark some design creativity, and you can alternate monthly! These were created by designers around the world, and Smashing Magazine is always looking for fresh designs. I am constantly amazed with the quality of their website; their information is insightful, they always have freebies, and they’re innovative. Check out the website with the calendars and download one for your desktop; don’t hesitate to browse the rest of the site!
http://www.smashingmagazine.com/2008/10/31/desktop-wallpaper-calendar-november-2008/