Designing—or redesigning—a site can be so much fun. (We understand. We get excited about this stuff, too.) But in discussions of content, design elements, and awesome interactive plans, it can be easy to lose sight of what should drive all decisions you make: what is your site’s goal?

As project manager, I’m reminding clients of this all the time. It’s my job to keep plans moving forward—and also on task. While this goal may elude you at times, it shouldn’t be too hard to come up with. Chances are, it’ll be right in line with the aims of your business overall.

For example, if you sell gourmet gluten-free cupcakes for dogs, you may want customers to visit your shop to admire your canine confections. If you’re a purveyor of bouncy castles for birthday parties, maybe you’d like interested party planners to call you up to check availability. Or maybe you want visitors to set up a meeting, request a quote, place an order online, or comment on your site’s content.

No matter what your purpose, you should define it—clearly—from the very beginning of a project. Make sure clients and design teams alike understand it, and know how to bring it to life. This ensures that every step, from sitemap to content placement, supports the goal you want to achieve.

If you want visitors to get in touch, place a simple call-to-action form on every page of the site. This makes it easy for readers to do what you want them to—without them having to search the site to find your phone number or email address.

(And please, please: keep contact forms short and sweet. If visitors have to spend too long trying to reach you, or don’t feel like giving personal information right off the bat, they’ll get out of there quick.)

When a site is built around a central objective, everything else just falls into place. It makes for on-task design teams, satisfied clients—and site visitors that find exactly what they need.

Are you sure your site is doing what it should? Contact Atomic, and tell us about your goals.

We’ve talked a lot lately about responsive web design—and if you’ve been paying attention, you know it’s an innovation we’re pretty excited about. As Atomic’s new web development manager, I’ve noticed something else: responsive design has changed the designer-developer relationship.

It used to be that a graphic designer would create a finished Photoshop document depicting his or her vision for a site. The developer’s job was to make the site match the doc, pixel for pixel. In design school, you’d lose points for wrongly-sized columns or incorrect text. And if you were a professional developer, the consequences weren’t any friendlier.

Now, things are different. As Web platforms, screen sizes, and resolution types multiply like rabbits, a layout that looks great on one screen might not look so good on another. This means that designers and developers alike have had to learn to compromise.

Designers have to accept the fact that their designs aren’t going to be exactly the same form one viewport to the next. And developers have to realize that they can’t build a unique site for every device—coding time and costs would be way too high.

Another downer for developers: with the number of screen sizes out there, we have to give up on pixel perfection. Why? Responsive designs use percentages, rather than fixed widths, to tell browsers how to display websites. For ensuring a consistent look from one screen to the next, this is great. The problem is that when percentages aren’t expressed as whole numbers, browsers get confused. The number ends up getting rounded either up or down, meaning that sites don’t always display the way we plan. But fortunately, most of these rounding errors are usually only obvious to other keen-eyed developers.

So yes, responsive design has created some bumps in the road. But ultimately, I think it’s led to a more collaborative relationship between style-minded designers and code-bound developers. Designers still bring the initial creative force with a site mockup. But developers don’t have to follow it blindly: they’ll create a beta site, and we’ll test it on different devices to make sure all of the responsive elements work. The designer comments; the developer tweaks. We’ll go through as many iterations as we need until both sides (and of course, the customer) are happy.

And when my team’s happy, I’m happy.

Need a site that looks great on every screen? Call up Atomic and we’ll make it happen—no matter how many trials it takes.

If you’ve used the Internet in the past, like, three years, you’ve probably noticed something: Fonts are looking good these days. Custom web typography is huge, and it’s a trend that’s here to stay. Here’s why.

  • It’s insanely easy to implement. Plenty of free services can help you get beautiful fonts up and running on your site. Typekit and Google Web Fonts are great online apps. You can also use CSS3’s @font-face query, which lets you upload custom fonts to your site’s server. Even visitors who don’t have the font installed will be able to view the font in all of its typographic glory.
  • It doesn’t limit designers’ creativity. Quite the contrary. Advanced typography multiplies what web designers can do. For us at Atomic, it allows us to create more beautiful websites, and better represent our clients’ brands.
  • It’ll only get better with time. Back in the day (you know, 2008), if you wanted to use a special font, you had to apply a Flash plugin. But Flash is no good on mobile devices, and now there are easier ways to flaunt your fonts. Plus, font libraries will continue to grow, and fonts themselves will become more standardized. As a designer, that’s a lot to look forward to.

 

But there’s a catch: even as gadgets and programming languages surge ahead, advanced fonts can still mess with layout on older browsers. That’s where responsive web design comes in. Programs like Modernizr can sniff out compatibility issues, and input queries to tell a site to switch the font based on screen size, browser version, and so on.

Custom typography is making the web more beautiful. And it can really add value to your site. It’ll set you apart from the rest—and look awesome while doing it.

Still stuck in a Times New Roman time warp? Contact Atomic and we’ll get you up to speed.

When Apple rolled out the Retina display-equipped MacBook Pro earlier this year, the world oohed and aahed at its eye-popping renderings of nature photographs and smiling stock photo models. Meanwhile, web developers everywhere did a collective facepalm.

‘Retina’ quality devices are said to have such high pixel quality that at a normal viewing distance, the human eye can’t detect pixelation. Less pixelation means, crisper, cleaner, more beautiful-looking websites. Newer iPhone and iPad models already use Retina displays, and with the release of the new MacBook Pro, these devices are gaining market share.

That’s great. But for web designers, Retina displays pose a few problems. Plenty of consumers have scrambled for the new MacBook Pro (despite the hefty price tag)—but plenty haven’t. When Retina-display users view a site designed for an ordinary low-res screen, all that pricey pixel potential just gets wasted. But completely revamping web graphics and typography in Retina quality means larger image sizes and longer page-loading times—even for users without Retina display. It’s a lose-lose.

So how’s a designer to create a great cross-platform web experience and stay cutting-edge? The answer is responsive web design (RWD). Just as media queries can be applied to CSS to tell a site how to behave on different devices, they can also be used to change what users see depending on whether they’re viewing in a high-res or low-res environment. It means non-blurry, fast-loading pages for everybody—and less headache for developers.

Dealing with a new set of compatibility standards isn’t always easy. But at Atomic, we’ve made RWD part of our standard development processes, so we can respond and adapt with ease. As it happens, so-called retina-quality devices don’t even come close to the pixel-perceiving quality of the actual human eye (they’re based on 20/20 vision—but plenty of people can see even better).

Retina 2.0 may not be far off—and we’ll be ready.

Do you know how your site looks in Retina-vision? Contact Atomic and we’ll get your page up to snuff.

Ever visit a restaurant that got the dining experience just right? I don’t mean only great food. I’m talking about a place that really understood what they were about. From the impression when you walked in the door, to the look of the menu, to taste of the meals themselves—this place showed that they were something special. You probably recommended the restaurant to friends, and maybe even became a regular customer. You went for the grub, sure, but it was the experience that kept you going back.

The way we interact with websites isn’t so different. While it might be a little easier (for us non-programmers, at least) to pick out the details that set restaurants apart, it doesn’t take a trained eye to tell the Bob’s Diners from the hip eateries of the web world.

As Atomic’s business developer, I get asked all the time what the big difference is between template-based and custom websites. Why shell out for a custom site when you can get an off-the-shelf template for a fraction of the cost? It’s a valid point—but one you may end up paying for later. Here’s why:

Credibility. Your website reflects your business. A custom-made site says, “I know what I’m doing. This look takes work. Let’s get to know each other. Sit down and stay a while.” And a template looks like, well, a template, no matter which “unique” design you pick. As a veritable fast-food chain of websites, it says…not much.

User experience. Good luck incorporating your company’s branding elements into a template site. All templates have virtually the same navigation and site map, leaving little room for customization. Have extra service lines, a unique business model, or want additional functionality? Too bad. Visitors may never find out about them, because if they don’t fit within the template’s preset formula, you’re out of luck.

Custom design, on the other hand, shakes things up. It gets users excited about all the cool things the Web can do. Plus, it allows for all the business-specific gadgetry your enterprising heart desires (like order tracking, purchase histories, and clear calls to action).

Back-end ease of use. Web code has high standards. These standards help developers organize data so that it’s logical for upgrades. They’re also important for sharing information with search engines, like Google. If standards aren’t obeyed, search engines won’t index your site correctly, making any SEO work you’re doing for naught.

But website templates aren’t always built with standards-compliant code. The worst part? You won’t know if a template is compliant or not until after you’ve purchased it. Reputable web companies build custom websites with clean, well-organized code.

The bottom line is, you just can’t accomplish a memorable user experience using a template (did I mention they’re also prone to hacking?). By the time you spend the time and money to deal with the headaches templates cause, you’ll wish you’d invested in a custom website from the start.

Be the place people are talking about. Don’t be the greasy spoon.

Fortunately for you, custom web design is kind of our thing. Contact Atomic for ideas on how to help your site chuck the cookie cutter.

If you’ve ever worked in Photoshop, you know it’s a complex application. Its depth of features and functionality make it extremely powerful. But they also make it tough to master.

That being said, I thought I was getting to know Photoshop pretty well. As it turns out, I knew less than I thought. Just in the past few weeks, I’ve learned a ton of new tricks that are helping me work faster and make my Photoshop work about 10 times easier.

Here are just two cool, super-simple tips.

1. Use a Smart Object to embed a PSD in a PSD. I never really got what Smart Objects were or how to use them. But now that I know, I’m loving them. Smart Objects are like little containers you can use to hold an image or a vector graphic safely within a Photoshop file. If I want to edit that image, I just double-click on the Smart Object and transform it right there in a new window. Previously, I had to go back to the source file, edit the image, and then re-embed it in the PSD. Clunky.

This method has the added bonus of minimizing the number of layers you have to have in your working file. That keeps things cleaner and less confusing.

2. Use Shape Layers and the Direct Selection Tool. If you’ve ever struggled with controlling the “shape of a shape,” this is the tip for you. Instead of using the Transform Tool to manipulate shapes, try using Direct Selection.

First, make sure that you draw the shape as a Shape Layer. Or if you’re using the Pen tool, make sure it’s set as Shape Layer instead of Paths.

Then, you can use the Direct Selection tool to select individual anchor points and handles to fine-tune the shape however you want. Using this method gives significantly better control than using the Transform tool. It’s been a huge help with things like keeping rounded corners from getting distorted and keeping shapes proportional.

The bottom line? Don’t assume you know everything about the programs you use … even those you use every day. Pay attention to how other people use them. Be an avid reader of blogs and forums that discuss your app … and contribute to them as well. And don’t be too proud to take a tutorial or attend a seminar.

If you find it takes you a long time to do any task, that’s probably a clue that there’s an easier way to do it. Challenge yourself to find out. You’ll be one step closer to being a true Photoshop master.

A lot of our clients go wiggy when they see a wireframe. Maybe because of how they look: spare, utilitarian … definitely not sexy. But they play a critical role in the web development process. Here are the top four things to know about what wireframes do … and what they don’t.

A wireframe is a blueprint. A wireframe is very simple diagram that lays out the essential elements of your web pages. For example, a wireframe might have placeholders for a header, navigation, body copy, an image, a search bar, a “call to action” box, and “contact us” information. By carefully assessing which elements are needed for each page of your site, we prevent unpleasant “uh-oh, we forgot that piece” moments once we’re into full development.

It’s not a design. People often mistake a wireframe for a design document. They start to panic because they think we’re using Times New Roman for their font, or arranging their content into boring squares and rectangles. To prevent this, when looking at a wireframe, repeat this calmly to yourself: “This is not my design.” Remember, the wireframe does not represent how your page will look. It represents what it will include.

Wireframes are a step in the development process. Wireframes are just one step in a process that takes your website from idea to launch. These steps include creating a sitemap, wireframes, and design for your site, and then undertaking development. Walking through these steps one by one ensures that the basic elements of your site are established before development begins. So there’s much less chance that development will start, stop, and start over from scratch—which can drive up costs and create a clunky product.

Wireframes are not your final product. Once again, when you see a wireframe, close your eyes and take a deep breath. Repeat to yourself: “This is not my website. This is getting me to my website.” Then, open your eyes and take a critical look. Is everything on the page that should be? Are there too many items in the navigation? Too few? Are there images on the right pages? Is the live chat button where you want it? Ignore the aesthetics, think about what your customer will want to see on each page, and make sure it’s there.

Now you’re seeing a wireframe for what it is – a content planning tool that makes sure nothing critical is left out of your site. And you’re using it the way it’s meant to be used: to increase usability while saving time and money.

Many clients approach us in need of their very first E-Commerce website, or at least their first modern website. Clients just beginning to build a web presence for their business are often in need of quality photos of their product offering, as there wasn’t much need prior to the online business boom.

Ultimately, my job as Atomic’s resident photographer is to take pictures that will lead to sales. With that in mind, I try to capture how the item is supposed to be used, the key selling points and the benefit ownership will provide to potential customers. This Apple ad for their MacBook Air perfectly communicates both the key selling point and the benefit of ownership – http://www.apple.com/macbookair/ This ad for the Kammok brand hammock very clearly demonstrates how their product should be used and the benefit of ownership – http://www.kickstarter.com/projects/1615737438/kammoktm-no-longer-bound-to-the-ground

Along with encouraging sales, a compelling photograph can communicate tangible qualities about the product in question, including its size, weight and build quality. Good photography should also give the potential customer an indication of what it will be like to use the product; what it’s like to hold it in his or her hand. – http://www.stoneriveroutdoors.com/knives/ceramic-folding-knife-titanium-handle.html

As a professional web designer, I’ve often been forced to incorporate outside pictures into my existing web designs. While I am able to create compelling web designs using someone else’s pictures, I usually have an idea of what kind of image will work well inside my design and I love that Atomic often gives me the opportunity to artistically combine the pictures I took with the design I created.

After months of strategy, planning, and production, we’re happy to announce the launch of Atomic Interactive’s new website.

Nearly everyone on our team touched the site in some form or fashion. Ryan, Alexis, and I worked on the creative concept and strategy, and Curt and I came up with the design. Eric and David worked on development, and Zach and Ryan handled strategy and execution for search engine optimization. Curt pitched in with his camera on photography, and Marshall created the great line drawings that accompany our client testimonials.

We feel like the site is a great representation of Atomic’s overall capabilities. We’re proud of the work that each member of our team did in pulling it together, and we think the site really showcases each person’s individual talents and reflects their knowledge and creativity.

In addition, building the site gave us a chance to work with some of our favorite creatives in the region. People like Kenny Mosher with Showdown Visual, who produced the killer video on our home page; Jason Joseph, who shot the additional videos throughout the site; Sam Enslen at Dragonfly Editorial, who lovingly wrote the many pages of copy; and Ben Prince, who did the Flash programming for the home page. Thanks guys, you’re awesome.

A couple things we’re especially proud of are the Work section, which allows users to filter and view our work samples by date, industry, and type of service. We built this on WordPress with custom plug-ins that categorize and tag our work. We’ve improved the search, which also runs on WordPress. And we feel the blog is better than ever. It’s now easier to navigate, makes better use of archives and categories, includes its own search feature, and has a multiple author system. These are all components we build for our clients everyday. It’s nice to see them shine on our site as well.

To sum up, let me thank everyone on our team one more time for the creativity and dedication they brought to this project. You’ve helped create a site that really reflects where Atomic is in 2011. You’re what makes our company – and our new website – great.

These days, it seems like we’re bombarded with products whose sole purpose is to move life faster.

Take coffee, for example.

I’m too young to remember, but I bet that when drip coffee makers came onto the market, people were blown away by the ease of use. No more boiling water on the stove! Then came a certain retailer who brought good coffee to the eyes and tongues of the masses, in a convenient to-go cup. Next came their instant coffee, supposed to be “just as good” as what you’d get at their coffee shop.

At this point, how much more time can we save?

Don’t get me wrong; I’m all for efficiency but personally, I see something being lost in our rush for results. I think we’re losing our connection with the process of creation. We’re forgetting the tangible sensation and satisfaction of making something. Instead, we just consume.

This is why I draw.

When I pick up my pencil, I start by drawing basic shapes. Then I flesh these shapes out into whatever they’re supposed to be: a face, an arm, a car, or a building. Then I go back and thicken some lines, scribble here to indicate shading and light, and think about how to highlight what’s important. After this, it’s time to really polish things up, do some fine shading and fix lines. And this doesn’t mean I’m done. I may get out another piece of paper, slap it on top of my drawing, go to my lightbox, and redo the whole thing.

Something happens when I slow down and immerse myself in this process. Psycologists call it being in a “flow state.” I just know that it’s when I’m most creative, and I find that happy mistakes often occur — like when I wind up drawing something other than what I intended, but it looks great anyway.

Going through such a time-consuming process when I’m drawing may seem tedious, but I believe that it’s an essential part of the creative process. It helps me connect with what I’m creating, care about it, and feel like I’m part of it.

Designing a website isn’t much different.

I start by drawing squares and circles on a page, carefully deciding where text, images, and buttons should go, according to the client’s needs. I may end up doing this three or four times until I find what’s right for the job. Then it’s onto choosing fonts, colors, and images, all the while keeping in mind the site’s audience and purpose.

I constantly hear people say that they’re “passionate about their work.” I don’t think this can really be understood until you yourself are passionate about something. As designers, we need passion. We need to feel connected to our work.

That’s accomplished by giving the process of creation the time it needs. Only then can we create something that we’re proud of — and something that our clients will be proud of too.