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.

,

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.

,

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.

, ,

Don’t Get Dumped

blog-site

We live in a society that places an incredibly high level of importance on image. In this image-conscious, hyper-competitive business world we live and work in, using web design to effectively convey your company’s brand, corporate culture and values is essential for setting your business apart from your competitors. This makes your business’ website incredibly important, considering it’s the first place people go to learn about your company.

Is the design of your company’s website getting people excited about your products and services? If your website looks outdated, what message is being sent? Is the image your website is presenting accurate? When your potential customers, future employees or prospective investors visit your website, what is the design telling them about your brand?

Web design impacts not only your brand and how outsiders perceive your company, it also impacts how effectively your search engine optimization efforts will perform. You might be asking yourself what web design has to do with SEO. Well, Yahoo, Bing and the guys over at Google track how much time people spend visiting your site. So, when visitors land on your site and aren’t instantly engaged, they’ll hit the back button before they’ve even read a line of copy. Websites that can’t hold the attention of visitors, can’t hold the attention of search engines, either.

While the “love at first sight” factor is important, like any good relationship, you need to be engaging as well. Good design should have the end user in mind. A beautifully designed website that is easy to navigate and effortlessly promotes your brand attracts new customers and keeps them coming back. Quality web design could be the difference between building a new relationship and getting dumped.

,

An Ounce of Preparation = A Great Design

Back when I was just a wee young designer, I used to jump onto Photoshop the second I started a new design. The result was lots of rework, and lots of wasted time.

Over the past few years I’ve settled into a process that instead focuses on upfront preparation. I’ve found that spending a bit of time on prep saves a lot of time in the overall design. And, I get better results with a less stress.

So here’s my process. Call it “Alexis’ secret for a stress-free design.“

  • Start with an idea file. I start by researching my customer’s audience and competition. I try to figure out what works on different sites and what doesn’t. I also flip though website galleries and design annuals, looking for pieces of inspiration that fit with my customer’s goals and can start to spark a design.
  • Move to sketches. Once I have a direction in mind, I start sketching. Often I’ll work on just one element of the site first — the header or the footer, or maybe the navigation. I like to get one component right, then build the rest of the layout around that.
  • Choose a color palette. After I’ve got a basic layout, I start to think about color. Often I’m working with a client’s existing brand colors, but want to create a richer, complementary palette for the web. I sometimes visit sites like kuler.adobe.com as a jumping-off point for ideas.
  • Head to Photoshop. Once I’ve got the building blocks of the site– the layout and color palette – I can jump onto Photoshop and create the final design. At that point, Photoshop is just a matter of executing the concept I already have – easy peasy.

It’s important to spread this process over two or three days. I get much better results if I have time to let the design concepts sink in, if I can sleep on them. Inspiration often strikes not when I’m plowing through a project, but when I take a moment to step away from it.

It’s also important to get feedback between every step in the process – an external perspective on whether I’m on the right track. That stops me from going too far down the road on a design if it’s not quite right for the customer. Saves me time, saves the customer money.

That’s what I call a win–win.

,

Persuasive Design and Your Four Key Customers

In our previous post this month, we talked about usability – the importance of making sure your site is easy to use and navigate.

Just as important as usability is persuade-ability. Designing a persuasive site goes beyond making sure users have the ability to perform certain tasks. It involves creating a site that encourages them to perform those tasks.

Persuasive design expert Andrew Chak, in his oldie-but-a-goodie Submit Now, discusses one of the most important elements of persuasive design – ensuring that your site addresses customers at all phases of the buying cycle. Chak categorizes these folks as either browsers, evaluators, transactors, or customers.

Mega-retailer zappos.com owes its huge success ($1 billion in 2008 sales) in part to how well it addresses these four unique audiences.

  • Zappos makes life easy for browsers by letting them sort shoes using a huge variety of filters – so you can view only wide shoes, for example, or animal print shoes, or Mary Jane-style shoes, or clog-style shoes with 2 ½ inch heels … you get the picture.
  • They help evaluators by providing detailed information about each shoe a customer is considering. You can view a pair a shoes from 8 different angles; find out if you should order your standard size, or a half-size up; review 8 to 12 additional specs about the shoe, such as weight and composition; and read extensive customer reviews (often as many as 60 or 70 per product).
  • They helps transactors by making the buying process simple – and the return process simpler, as Zappo’s loyal customers love to rave about.
  • Finally, Zappos helps customers with services like providing an online catalog of past orders, stretching years back – and sending personalized emails a year after your purchase asking if you’d like to order a fresh pair of the same shoes.

Many elements influence the persuasiveness of your site, but a good place to start is by asking this question: Is my site talking to my four critical customer groups?

Want our opinion? Contact us anytime.