Sketching out ideas

Sep
25

by
Aaron

Sketching out ideas

Sketches

I started today on the initial design of the application. This mostly revolved around doing a lot of brainstorming and sketching on what it is going to look like and how it will function. To start out, I like to put a lot of emphasis on the process of how things work rather than the actual look and feel (more on that here). Because of this, I jumped right into the main section of the app which is the cash flow management, and in doing so focused on the main elements or "patterns" of this section.

cash flow elements diagram

In the past, Clear Function has used a simple spreadsheet to help us calculate and track our cash flow. And to be honest, it does a pretty decent job. However, problems come up in the actual management of things as far as adding new jobs, creating new months, putting in new expenses, etc. that make it not so fun to use. That's where the idea for this app came into play. We wanted something as basic as a simple spreadsheet, but as quick and easy to use as what is possible in a modern web application.

That being said, I think there is a lot to learn and a lot of design merit in the layout of a spreadsheet when it comes to looking at numbers. You'll notice in the sketches above that I'm imagining a grid structure allowing a quick glance of income and expenses over several months. I also envision being able to quickly add an income item or expense item in this spreadsheet view. I'm sure things will change over the next several days (as they always do), but for now I feel pretty good about this direction. Please leave your thoughts if you think differently.

Next up, I'll be digging into more of the look and feel of the app. This is when I'll turn sketches into Photoshop files, and Photoshop into HTML/CSS. I should have some screens to see in the next couple of days. Things are really rolling now.

3

Comments

Sep
25

Geof Harries

So, you go right to Photoshop, huh? Do you skip the illustrated wireframe stage completely? I typically design paper first, as you have done, then dive into Fireworks or Omnigraffle for lo-fi wireframes and finally make 'em look good in Photoshop.

Sep
25

Aaron B.

Geof,

I find that most times wireframes can be too abstract for clients to understand, and I prefer making real mockups as opposed to a general layout (or wireframe). However, when I start on a layout, I will generally map things out in a wireframe-esque kind of way, but only if it helps my design process, and most of the time it happens on paper. Also, I find that it's equally as effective to use HTML/CSS to design out the app. I'll probably end up designing the "shell" of the app in Ps and then just jumping right into the HTML. When you use web standards, it's so easy to start designing out exactly what you want to do and it saves a lot of time.

This being said, I think it's all about execution and whatever works best in a specific situation. It doesn't matter how good of a wireframe or even Ps mockup you have. If the finished product doesn't work, then it doesn't work.

Sep
26

JD Graffam

I can't wait to see the screens...I seriously can't wait. I can't sleep, even. This is killing me ;-)

And I am looking forward to hearing from Nate and Stephen on their end of the deal, too.

Leave a reply

Comment on Sketching out ideas

Basic HTML is allowed (a href, strong, em, blockquote).