The Three Elements of Web Design: Forms, Links, and Content

in by Bryan 10 comments

When it comes right down to it, the web is just forms, links, and content. The next time you're starting a new design project, take a different approach -- think about how you can create value for a user with only those three elements.

Begin your next design project by bulleting out every content piece on a separate line. Try to think of each piece of content as a meaningful directive and look at it from a user's point of view -- What should I, the user, do with this content?

Now turn those answers into form elements that capture ideas. List all other pages you think might be relevant to this one, then create a list of links that utilize the names of these pages. Can you create a meaningful page from all this information? If not, you might rethink what you're trying to do on the page, because some splashy imagery will only bring superficial completion to that page for your users.

Let's stop thinking we're trying to create something novel every time we design a new website. While "creative vision" has it's place on the web, if a user can't get something accomplished through actions on a page, then you need to do more with your design thinking.

10 comments

Mark Otto says

I guess I'm missing the point—why would I turn a bulleted list of content into web form elements? If it's content, it's meant to be content. Time spent making it into a form seems like time wasted.

If I'm turning my content into a form in anticipation of it being a web page, I'd suspect you'd have less completion overall. A clear creative vision that translates into a focused great-looking product, is one the most useful tools we designers have. It's that vision that defines a product's (and company's) success. For example:

  1. Dribbble: post sneak peaks of what you're working on in the form of shots. Creative vision (design is like basketball) is carried through by shots, rebounds, players, and drafts.
  2. Flickr: be the best community for photographers and enthusiasts. Allow sets (albums), comments (sharing a photo with someone), galleries (photos are art, too), etc.
  3. iPhone (and nearly all Apple products): Do a few things that just kick major ass, iterate at a regular pace, and success (and happy customers) will be had.

Dribbble is by far the best example, but you should be able to see my point. It's the creative vision that drives a website's success, just as much as it's ability to be functionally and logically put together.


Bryan (ZURB) says

Mark, If you look at your first two examples, forms play the most critical role in the site. The directive text comes in a close second. Links to other content make the sites come together (even Caterina Fake said that Flickr took off because of the introduction of tags) You could say the visual design gives them a "feel good" completion.

Sharing of content drives the site. And you'll note my use of the word "content" is fairly loose.

Think strategy and interaction, not implementation.


Mark Otto says

I'm not saying forms or links don't play a critical role—indeed, they do. They are the principle elements of websites. I'm simply saying that creative vision has a direct impact on the success of a website.

"Feel good completion", which has historically been the "gist of web design" to those outside the field, does have it's place—people like pretty things. No argument there and there never will be.

Dribbble succeeds because the idea of it resonates with designers given a particular context—getting feedback on screenshots. You could use Flickr, but the context is completely different despite sharing many of the same fundamental functions (e.g., uploading and sharing content, comments, replies with uploads, people profiles, tags, etc). Because Dribbble's creative direction—design is like basketball—it succeeds in a way Flickr cannot, thus differentiating the service and creating a focused, successful product.

Dribbble's creative vision is a direct result of their strategy and interactions—turning our daily work into a (basketball) game that capitalizes on the expertise of thousands of people just like us to help iterate on designs. I firmly believe Dribbble wouldn't be where it is today without that creative vision. Without it, it's just Flickr for designers and there is no fun or future in that.


Bryan (ZURB) says

Hmmm, Mark, I think you validated our point?

We don't know if Dribbble will be successful or not- there is a lot more to running a site/business than just the website. The site creates good feelings because it functions well. It's put meaning behind the forms, links and content.

Back to the point of the post. Even if you have a creative direction heading into a website project, it won't do very much to get site visitors invested in the long haul. Stripping down key web pages to the basic interactions (links, forms, content) will reveal holes in the purpose of the website. Dribbble probably gets many of these interactions right.


Jeremy (ZURB) says

Feels like the 80/20 rule applies to forms, links, and content here. They can seem like a small part of the equation, but actually account for 80% of the overall impact. They have to be there to enable customer behavior.

Bryan, I like the thought experiment of imagining any service, including one you're working on, as composed only of those three things. That fresh look at product details can reveal a lot about its purpose and reveal holes in the implementation on a strategy (or in the strategy itself).

Mark, a great example of what I think you're getting at is Steve Jobs' first product move when he returned to Apple--the Bondi Blue iMac. That was mostly a superficial innovation. It was all about outward appeal, but it got the ball rolling again in that company.

But when I hear you say "creative direction" it feels like you're conflating a lot of things that don't belong under the name "creative." I think that's vision, purpose, and belief you're talking about. It's that founder's drive that makes it all hang together.


gaspas says

It's seems a simple and good idea for a good start.

What should I, the user, do with this content?

It's all about interaction, user behaviour, the reaction to the content. right?

I don't quite understand the part "Now turn those answers into form elements that capture ideas"

What make sense to me is if I know what is user reaction to content ,I have to find the best way of forms to capture that user reaction, simple and powerful. Is that what you mean with the "turn those answers into form elements that capture ideas" ?!

And the list of all other relevant pages i think it's easy.


Matt (ZURB) says

Google does a great job of creating effective experiences with just these three elements on their help pages.

It's a no nonsense experience and I can always find (search form) what I need (well written content) and related content (links) without any distractions.

The Apple iPhone development documentation on the other hand uses more complex interactions and pretty pages but falls down on links and content.

I start off feeling really good with the Apple documentation, but as I flounder to find what I need that feeling wears off like a bad beer buzz. With Google's doc I've already found what I needed before I start to bore of the uninspired white backgrounds.


Bryan (ZURB) says

I don't quite understand the part "Now turn those answers into form elements that capture ideas"

@gaspas- Designers get stuck trying present ideas without considering the unique advantages of the web- people creating unique content, presenting ideas and connecting with other people. To get people participating, you need to change a definitive statement or idea into a request- which is a form element.


gaspas says

Ya, that's what i thought. I thing it's an excellent concept to start every project. Simple but it's the basic and it's all you need.

We should the think first what the content is about and then what can we get from the user to make the content more meaningful, more rich.