And the Winner is… US!
Atomic Interactive, the digital marketing agency headquartered in Dayton, Ohio, created the design, development and marketing strategy for Slickplan.com. Slickplan was created to fill a hole in the web design process that Atomic encountered every time they picked up a new project. Like most design agencies (and freelance designers), Atomic begins the web design process by creating a sitemap that displays the page titles and navigation of the finished product. A growing frustration within the Atomic team due to an alarming absence of quality sitemap creation software led to a proactive decision – “We’ll make our own!”
Fast forward two years and two versions of Slickplan – the web application has become a trusted design industry resource for over 35,000 users who love the simplicity of the creation process and the beauty and functionality of the finished sitemap. This past weekend, the Atomic Interactive team was overjoyed to learn that Slickplan was chosen as one of three finalist for Best New Web/Mobile Application in the App It Out contest hosted by
At the conference, 4 members of the Atomic team will have 10 minutes to showcase the finest points of Slickplan in front of a huge gathering of web designers, developers and digital agencies, as well as a panel of judges that will be voting to send one lucky app development company to a conference in London. Future InSights Live is conference that hosts cutting edge trends and personalities in the web design community, and this year such well-known industry personalities and web entrepreneurs as Dan Cederholm, Josh Clark, Steve Fisher, Paul Boag and Molly Holzschlag will be featured as speakers.
Ryan McCoy, one of Atomic’s co-owners and a member of the presentation team, is particularly excited. “This is a great honor to attend the Future InSights Live conference to present our software to all of our peers within the interactive community,” Ryan said. “We created Slickplan because of a need we had as an interactive agency, and to get a chance to share our creation with a gathering of all these potential users is really a dream come true.”
Slickplan’s creators are well aware of the fact that this opportunity presented itself thanks in part to the contributions of Slickplan’s users. Ian Lawson, Atomic’s other co-owner, explains, “The improvements made to Slickplan are based on our own day-to-day use and feedback from 35,000 very active users. Together, we’ve made something great.”
Visit our media kit for more information or contact us by email or phone, 937 232 1155.
Two Tips on Using Photoshop Effectively
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.
Great Sitemaps = Great Websites
Everyone gets excited about building a website.
Why not? Creating a new site for your firm is a big deal. Often, the effort combines new branding, new functionality, and new ways of interacting with your clients.
Unfortunately, in all the excitement, some people rush the process. And the part they often gloss over is putting together a sitemap.
A sitemap looks like no big deal. It’s just an outline of your website – an “org chart” showing where each page on your site will fall.
But in reality, your sitemap is critical. It’s the foundation on which your entire website is built. It defines how your content is organized, what’s included, and what’s left out. A good sitemap also facilitates your sales process, laying out intuitive pathways for clients to follow through your site.
When folks rush a sitemap, a number of problems can occur.
Sometimes, critical content gets left out. Or the content is there, but buried in such a strange place that no one can find it.
Other times, the sitemap has to be heavily revised. And if we’ve begun design and development, that means work must be redone. On a simple site, that could mean an hour or two of extra labor. On a complex site, that could mean days.
Luckily, there’s an easy way to avoid these problems. Spend adequate time on your sitemap.
In other words,
- Think carefully about the goals of your website before you start work. Your navigational structure should facilitate your sales process, not represent any random old organization.
- Get third-party input. Talk to colleagues or trusted customers about how they approach your current site. What do they expect to find? What do they most often look for on your site? What do they have trouble finding?
- Make organization a top concern. Think carefully about what your customers need to know, then decide how that information should be organized. Make detailed notes about what content should go on each page of your site, so nothing gets left out.
- Finally, talk with us. It often helps to have one of our project managers put together a draft sitemap for you, based on your input and ideas. Because we’re not as close to your content as you are, we can often see it more clearly, and help you organize it in a logical, intuitive fashion.
And remember, take the web development process one step at a time. When you’re working on your sitemap, stay focused. Don’t get distracted by what photos might go on each page or what colors your site will be. Nail your content first, and everything else will fall into place.
Wireframes: What they are, what they’re not
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.
Web Design + Photography
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.
Rocket launch for new Atomic website
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.
Meet Atomic’s Newest Intern, Shelby White
Greetings, everybody!
My name is Shelby White, and I’ll be Atomic’s new design intern for the next 3 months. This is my second experience working in the real world, but the first one I get paid for– awesome! I’m beyond excited to join the Atomic team, and I feel very fortunate to be in the design field, doing what I’m passionate about.
For starters, I’ll let you read the obligatory segment that describes me in a nutshell:
- I’ve lived in Kettering, Ohio, most of my life. I graduated from Kettering Fairmont High School with honors, and I just graduated from the School of Advertising Art this May, also with honors. I never hated school like most people I know, and I’m very proud of what I’ve accomplished.
- I’m an only child, and I’m a lefty. Did you know that only some 13% of the world is left-handed?
- I’m sure you can tell what my favorite color is. Examine the color of my car, my hair, my clothes, my bags, and my miscellaneous office supplies: they’re all some form of pink!
- I will be a cat lady when I’m old. However, this does not mean that I like Cat Woman. The best Batman villain is Poison Ivy.
When I’m not at work, I’m usually:
- On the Computer or Xbox. I’m a pretty big geek. I love playing video games (the Fallout series is my absolute favorite!), and I love to talk about them.
- Jammin’ out. I listen to all types of music, but The Blood Brothers is my all-time favorite band. My other top choices range from hardcore music to the indie-est of indie. Add a little hip-hop to the mix, and you’ve got my iTunes! I also thoroughly enjoy musicals and soundtracks.
- Being a couch potato. I watch a lot of movies and TV. I’m a movie buff, or so I’m told. I won’t tell you my favorite movies, though, because I could go on forever. Just assume that if it’s horror or sci-fi, I’ll enjoy it. As far as television goes, Criminal Minds tops my list of favs. Bones, Fringe, House, Castle, and Firefly are also up there, along with White Collar. Can you say, “one-word crime series?”
I’m going to head back to work, now, doing what I love best. I look forward to meeting you on your next project with Atomic!
Process=Product
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.
Usability Engineering: Why Wireframes, Prototypes, and Specifications Matter
Designing a website without usability testing is like building a boat without a blueprint. You’ll make something, but whether it floats is a different matter.
Usability testing fascinates me; in fact, I’m enrolled in grad school at DePaul University, studying for an MS in Human-Computer Interaction. And when I heard some debates recently about whether current usability tools were still valid, I took notice. The crux of the issue seemed to be the value of wireframes vs. prototypes, and whether technical specification documents are necessary.
As someone who believes that a focus on usability should be the focus of building a successful web site or application, I definitely had an opinion. I believe that each of these tools has a distinct place in today’s web development cycle. And as a web developer who handles new projects daily, I’ve seen firsthand how these tools expedite development time and directly reduce the number of bugs found and revisions required after development.
Let’s take a look at how each of these tools works.
- Wireframes - Wireframes are basic layouts for a site or application. The goal of this phase of usability testing is to focus on determining the basic information architecture and interaction design for a site, without the distractions of interactivity or design elements like color, font, and images. By removing these elements, the development team can focus on the best possible placement for the individual elements of the site or application. They can also begin to think about options for interaction design.
- Prototypes - Prototypes are beta versions of a site or application that allow information flow and interaction testing. The actual functionality of a site isn’t implemented. However, a user can click through interfaces to get an idea how a site will look and feel. By getting feedback from project stakeholders at this stage and making needed changes, you avoid the difficulty and cost of making revisions after development has taken place.
- Technical Specification Document - This document combines the information flow, interaction design, and functionality decisions reached during the wireframe and prototype phases of development. It’s presented to the site developers along with other tools generated during usability engineering, giving them a complete, accurate understanding of the site’s usability and functionality requirements. This document also enables clear communication between stakeholders (agency, client, users, designers, and developers) regarding what functionality is expected for each interface.
From my perspective, all three of these tools are essential. They enable a reasonably pain-free development process, and significantly cut down on revision and rework. One small change made during usability testing can save literally days of time and struggle — and beau-coup dollars — later in the process.
So for now, I’m sold on these tools. I’ll be ready to learn about better ones as I continue my studies, but for now, they’ll stay in my tool belt.
Typekit
Fonts have been a sore spot for web designers for a long time.
Back in the day, we were limited to the most basic of fonts – Arial, Times, and Helvetica – because we needed to use fonts that most people had on their machines. Then came the time of JavaScript- and Flash-based plug-ins. They let us use a wider range of fonts … but things still weren’t great. Often the fonts didn’t load quickly or smoothly. Strange things happened when you used special fonts for links or wrapping text. And of course, Apple has decided not to support Flash in the iPhone and iPad environments.
Thank goodness, we finally have something new. It’s Typekit.
Typekit is a subscription-based library of fonts that designers can use for their websites. All the fonts are hosted online by Typeface, so anything you can find on Typekit, you can plug into your site. And your users won’t require Flash, like other font substitutors have in the past.
As a designer, I appreciate the selection of fonts that Typekit makes available. They look like they were hand-picked by someone with a strong design sensibility and an understanding of what works visually on the web.
And as a developer, I love how easy it is to find the font you’re looking for and apply it to your CSS classes, IDs, or any other HTML tag in your markup. You can also pare down your bandwidth use by choosing only the weights and styles in each font family that you need.
Finally, from a business perspective, Typekit is just plain affordable. You can buy one subscription for your company and use it across all the sites that you develop.
I can hardly believe I’m saying this, but Typekit may make fonts fun again for web designers. I think it’s time to break out the champagne.