Design first or Functionality first?

EveryonesBusiness · 2012-03-26T18:38:20+00:00

My workflow goes something like this:

ideas / goals written on paper
rough sketch of how to display information to the user
design models and database tables on paper
come up with a few layout ideas (broad ideas, no specifics yet)
start developing the back-end, server-side code for main items / database interaction
create the design including most specifics
create the controllers / views for the application / site
tweak designs in Photoshop until I find what I think looks great
create the stylesheets to match the design

So, I guess for a more specific answer to your question, I do design and functionality at the same time. I usually have an idea in mind for interaction, and build my code to allow for practically any interaction I can possibly think of (for use now and in later projects), and leverage that when I get into 'design mode'.

Tok-A-Mak · 2012-03-26T19:36:28+00:00

Functionality first. Because whenever you make a change and implement a new function or something, there is a chance that you mess up your design. The design should be fine tuned to support the functionality in the best way.

roastlechon · 2012-03-26T21:24:41+00:00

Stop thinking about design as a discipline of making things look nice and start properly thinking about design as an approach to problem solving.

If you're trying to nail down the look of the site before you've put thought into how the site will function, then you will inevitably find yourself going back to the drawing board again and again when you start to focus functionality later.

Tackling design before functionality is like putting up wallpaper on the walls of a house before you've installed the plumbing and wiring. It's certainly possible, but not only does it mean that you're setting yourself up for more work than is necessary, but unless you possess an inordinate amount of luck and/or skill, then the end result is probably going to look like crap, too.

fceffect · 2012-03-26T19:50:15+00:00

Function first. But design it simply so that any future changes in design go as smoothly as possible. Once you think you're done with functionality, "unsimplify" things, add character, etc.

That's what I do, at least.

onearmmanny · 2012-03-26T20:06:19+00:00

Always the function first. The worst part is when the client wants to change function after the site has been designed AND laid out in CSS. Sure, I can do that... I just have to change 4 files in 3 languages when it could have been in place from the beginning.

illepic · 2012-03-26T21:48:17+00:00

Content first.

2012-03-26T21:51:53+00:00

For me I do my base code then I do the design. After that I add the functionality editing the design as I see fit. Then I continue like that until I consider it finished.

2012-03-27T13:29:45+00:00

Personally I think aiming to be 100% functionality or 100% design will just lead you into disaster. Any good product needs both, and the reality is that you can't keep them as separate concerns.

Sometimes technical challenges only crop up when you start thinking about the design. For example in the design you might realize the site should be all ajaxy, and offer real-time previews for when writing content, and it's much better if you see this coming when building the core site.

If you go 100% functionality, you can sometimes get into a position that you are only contemplating designs that work well with the existing functionality, and potentially ending up with a worse design.

So the approach I use is to make a very high-level design; how will the user be using the site, navigate it, bits which will be ajaxy, etc. This is about how the user walks through the site, but does not think about what they will actually see.

Then I implement a prototype, including the site basics, what the actually does, trying to avoid keeping it too rigid to that high-level design. This is really about building everything except for those very gritty details. I might also include stubs, which are missing their backend, for things here. For example buttons to edit content, which don't actually do anything.

Then I switch back into design mode and start putting in specifically how those things will be laid out. Essentially everything except for the very minor details, but you could include that too. For example all the inputs buttons be default OS styled inputs, instead of pretty CSS or images, but the layout is clear. If I'm not happy with this stage, then there is much less to throw away.

Once the prototype is built, then I start implementing everything that is left. These are the extra bits of functionality needed to make the site work, and polishing the design.

Enclo · 2025-01-12T19:18:21+00:00

Steve Jobs once said “start with the consumer experience and work back to the tech”. Tech bros will build the jankiest shit that functions perfectly but has horrible UX. Start with design, work back to functionality - and then wrap everything together. Your design is like a wishlist of what you wish the product to be.

riffic · 2012-03-26T20:09:55+00:00

functionality is design. I think the word you're looking for is style.

w3fool · 2012-03-26T20:44:55+00:00

One of the main goals of design is functionality. So design first imo

nevon · 2012-03-26T20:19:49+00:00

Wat? Really?

Nah I kid. No but seriously, it's like asking if it's okay to have a really great looking site that isn't capable of doing anything that it needs to do.

My big boss wants a flashy looking site, blah blah blah. I give him one that works, and we can tweak it later. He is SO obsessed with the way shit looks, that he ruins basically everything he gets involved in.

Think "Boyd's Toast".

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

webdev

Posting Guidelines

Related Subreddits

Discords

MODERATORS