How I Use Adobe Ideas

I recently put together this short video on How I use Adobe Ideas, partly to (in less than 30 seconds) try to illustrate some of its great uses and thought I’d top it off with a blog post. This blog post highlights how I use Adobe Ideas in my parts of my process. The project featured in this blog post was for Scoop Street, which was acquired by BuyWithMe this year.

One of the main ways I use Adobe Ideas is for quickly sketching out new ideas and or early iterations of designs. Paper and pen is great for this also but unlike paper, with Adobe Ideas you don’t have to scan or photograph an Adobe Ideas sketch, you can simply email it. It’s an artifact that is easy to hang onto as opposed to paper, which can literally get lost in the shuffle or in a pile on your desk. It produces vector art so you can also open in up in Adobe Illustrator and work with it in that format. It’s also a lot cleaner than paper and pen sketches and is a little more “dressed up” for presenting to clients, plus there’s a little wow factor in “oh, you did that on an iPad…cool!”

For this project with Scoop Street, we were redesigning their homepage. I used Adobe Ideas to quickly sketch out various, basic layouts. We had already had a good idea of the direction we wanted to go in. All deal sites have very similar layouts due in part by the type of information the user is consuming. In many cases as this one – we had a “main scoop” we wanted to feature as well as “side scoops” hence a two-column layout with the main deal getting most of the billing and the side scoops showcased on the right in smaller column. Here’s an example of the main directions I sketched out:

You can probably see that the sketches look very similar with some minor differences. These minor differences had  a much bigger impact on how the user reads the information and using this method it was very easy for us to start checking design directions off the list. These sketches paired with brief explanations do everything that you need to do to adequately explain a design direction. The other benefit is that the client gets to be part of the process from the very beginning making it easier to get buy in and finalize designs later. I also used this method to quickly sketch out some various option for the treatment of the header:

From here we chose two main design directions as well as two options for the header. The next step, wireframes.

Wireframes

A bulk of the heavy lifting had already been done via the sketches. Now it was time to get down to the nitty gritty and design all the details. Wireframes are great for producing detailed mockups or creating visual representations of something that still has some questions marks around it. You can see the similarities between the original sketches and this wireframe:

Visual Design

From here is was merely a matter of giving this wireframe look, feel and branding. All of the major components like how the information was displayed and the hierarchy of information were pretty much done making this a cinch:

Altogether Now!

From sketch, to wireframe, to visual design – using Adobe Ideas as a starting point.

You can buy Adobe Ideas at the App Store. Have you used Adobe Ideas? What do you think; leave a comment: