Hi, I’m Grace Smith

Does it ever disturb you when your designs and wireframes look too much alike? (Ex: Same layout, size, or location of elements) Doing both wireframes and design on projects myself I see this happen occasionally. I’m really not sure if I should be disturbed by it or not…

Hi Lisa, I have to say that using wireframes doesn’t mean your designs will look the same just by using common elements when at this initial stage. Having a consistent approach keeps the project efficient and most clients know that a wireframe does not constitute design but planning. So there’s no need to be disturbed at all

Grace, thanks for sharing your wireframe process. Always good to see what other professionals are doing.

Thanks for sharing your experience Grace; especially the 960 action that I didn’t know of as well as for the grey-box method article that is a valuable read.

Cheers!

This is a great an organized workflow. My only argument is the same one that I have with many web designers, namely the separation of ‘layout’ and ‘design’. To me, this relegates the design process to really nothing more than decoration: fonts, colours, etc. Maybe this is just a difference in terminology? Steve Jobs, from the NYT article The Guts of a New Machine said,

”Most people make the mistake of thinking design is what it looks like,” says Steve Jobs, Apple’s C.E.O. ”People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.”

I tend to agree.

Great to know process that others use, I’m new and not very trained in web design, so reading things like this helps me build a proper process to work with. You rock Grace!

Grace, I was actually looking for something to share thoughts, designs and ideas with to my team, and Notable seems to be my answer. Big props on that Photoshop Action too, will be definitely using that.

@Dennis Thanks for stopping by, I agree, I love it when other designers and developers share a little of their process!

@Uncleserb 960 rocks and that photoshop action is such a time saver, make sure to check it out.

@Burt I definitely agree design is not decoration, but this isn’t my design process, that’s perhaps a post for another day. This is how I start planning and organising the content. When it comes to design I have fairly substantial process i follow which is all about getting to the core of the project, not just adding some lovely colours and fancy gradients. To enable great design you need to first understand the project and plan properly, that’s where wireframing comes in. It’s not relegating design to last, it’s enabling me as a designer to deliver a design which truly fits the requirements and goals of the project.

Thanks for your input as well, am always very eager to hear others thoughts and ideas, especially on design

@Trudesign No Chris you rock Always great to be able to connect with upcoming designers.

@Doug Hey Doug, Notable truly is fantastic. I don’t recommend apps this much without good reason, it’s really changed my feedback process so definitely check it out. Have fun with the photoshop action as well!

As I have often shied away from wireframeing due to tight budgets. I found your method really refreshingly short and simple. This way (if done correctly) it should actually save me some time, headache and budget.

I really should try to find my own way. I think the designs can only profit.

Thanks for sharing.

Marvin thanks so much for commenting. I’m honored you think my process could work for you! When it’s written down it seems long-winded (well to me anyway), but when put into practice it is pretty efficient and I know from personal experience has saved a lot of time later in the design process, by pinpointing potential problems and organising the content early.

P.S. Love your site design

Thanks for the comment on my design. Been planing an english Version for a while and the site really needs an update. Where does all the time go?

Marvin I am the wrong person to ask, I’ve been planning a redesign of my portfolio for nearly 15 months! Have a hundred thrown out designs and scribbles/sketches, but still can’t find the time to really get it moving. I need more hours in the day

Nice article Grace. I usually find my self using similar methods but using Fireworks. It’s unbelievable how easy Fireworks is to use. If you haven’t tried it I highly recommend you should.

- Henry

Henry thanks for stopping by. Honestly Fireworks is one my least favorite apps, although i do appreciate it probably would be more efficient to create the wireframes, I just don’t gel with it’s UI. I really should give it another go though, thanks for the reminder!

Thank-you for sharing your process and esp. for the heads-up on Notable.

Some designers do get concerned that using Wireframes will add to the cost, but they can save a lot of time further down the line by first establishing how the site will actually work. Also, as you mention, the client doesn’t get side-tracked by choices of colour palette or stock images etc.

@Poldings You bring up a great point: cost. For very small projects on a tight budget, they’re not always viable (or suitable), but for the majority of projects I find them essential. I think most client’s I’ve worked with do appreciate how effective they are and that it’s actually saving time (and don’t forget money) by not going through 5,10,15 revisions for each part of the design!

I had to chime in again. I see several folks mentioning the costs/work involved. I’m currently partnering with another designer on a project. Right now, we’re going back and forth with the client on changes, additions, etc. If we had mapped out the IA and drafted up wireframes for review and sign-off, the project would likely have been more efficient. Too many people still worry about aesthetics upfront, and less about content priority and prominence. Therefore, the cost of using IA & wireframes, to me, is priceless.

I love this kind of posts! They hold your hand through the proscess

Grace,
Thanks for mentioning my 960 photoshop action in your post. I can’t tell you how excited I am to hear about someone integrating this into their normal workflow process.

On another note, this was a great post. I always wonder how “the other guys” do it, not just this but all aspects of the web development process. encore.

Thanks again,
Ben

p.s. Still working on the Browser UI action. I have a programmer working on the install script as we speak.

Nice article, thanks for sharing. I use Omnigraffle in combination with the 960 grid.

@grace

Hi !

I’m still unable to understand this wire framing while my client’s ask to direct give them mock up idea? what to do in this situation do you have any suggestion?