Website Architecture vs. Web Design – What Comes First?

• Tweet
• 4 Comments
•  Email This Post
•  Print This Post

By Aimee Graeber   •  10/03/2012

Do you know the difference between website architecture and website design?

Website architecture refers to the funnel that leads your customers from a page, to a point of interest, like a “buy now” button, or an email subscription form. It refers to the function of your website and its webpages. It does not refer to the colors on your website or your CSS stylesheet, but the actual structure of your website and its purpose.

Every page of your website should have intent. For example, before you “design” a page, create its structure. An article page includes a page title, URL, headline, subhead, body copy, and sometimes a photograph. Additional SEO elements include a meta title, a meta description and tags. These elements all contribute to the architecture of an article page.

Speaking of SEO, websites built with Google in mind attract visitors and convert them to new audience members. Your ability to capture traffic from search should be one of, if not your most important priorities. Structurally, sites that are true content marketing machines use keyword research to anchor their website architecture. Primary Keywords become Topic Pages and Secondary Keywords become Tag Pages. Keywords are targeted carefully and are used on a daily basis in headlines, subheads, body copy, URLs, meta data fields, free report titles and internal links.

Additionally, we’re talking about conversion architecture. Micro elements like Order-Forms-in-Editorial (OFIE’s) and Floaters convert website visitors into subscribers or and buyers. These elements of conversion architecture are built into the outline of the website and their funnels are defined beforehand.

• OFIE (Order form in editorial): An OFIE is an embedded subscription form that appears on web pages either to order a product or service, or more likely to sign up for an email newsletter.
• OFIN (Order form in navigation): These online order forms appear in the navigation panels of a website. The customer/end user fills them out to order a product or service or to sign up for an email newsletter.
• FLOATERS: Named a floater because it appears to float onto a webpage. This was a method created in order to fight back against pop-up blockers. While it may look like a pop-up, a floater does not open in a separate window and therefore cannot be blocked or banned.
• DISPLAY AD: An online advertisement that uses graphics. They are also called banners, skyscraper ads and rich media units. Publishers will sometimes use display ads to promote their free email newsletter.
• TEXT AD: An online advertisement block that uses text links, or text-based hyperlinks, without graphics. These are found within editorial content to sell a product or to obtain an email address.
• TEXT LINKS: Hypertext links in editorial or navigation that lead to a Rapid Conversion Landing Page. These are the best form of persistent conversion architecture because they are subtle, yet very effective ways to drive traffic to a Rapid Conversion Landing Page with the ultimate goal of increasing email database circulation.

A Mequoda website generally includes all of these elements of website architecture and helps to create  a blueprint of your website business model. Defining website architecture will help you align your categories and articles with the products you have to sell. The alignment will keep you from straying away from your product line and keep editorial more focused.

Which comes first, website architecture or website design?

First impressions have never been more important than on the Web. The increase in broadband availability and the increase in user expectation have resulted in a fantastic explosion of technology and complexity. The age of the Internet has also created many websites that are like older homes that have been remodeled again and again with no master plan for making the rooms work together. Our research indicates that many of these complex websites will function much better when untangled and redesigned with better architecture, so that the user can learn to use it effectively.

Upon entering the online area, you may have ideas on how your website homepage design should look. You may want a specific layout, colors, images and video to be part of your homepage design. Of course it’s always great to have creative insight, but also keep the aspect of usability in the front of your mind. You want your website to look great, but almost more importantly, you’ll need it to function and compel users to complete the tasks you’ve given them. A website that doesn’t cater to the audience’s needs will be exited quickly.

A strong website needs to have a good balance between attractive visual components and a good call to action. In most cases, the design is the easy part. Your website architecture defines your entire strategy, we think you should start with that for two reasons:

1. Your strategic intent is defined by your website architecture - You can’t design a great website without first being clear on what actions you want your users to complete when they come to your website. Sign up for an email newsletter? Click on a sponsored advertisement? Subscribe to a paid membership website? Your goals should come first. Re-designing after the fact looks just like that – after the fact.

2. Your website design is simply for aesthetic - The average user expects professional websites to be clean-looking, information-rich and intuitive. The website should be appropriate for your organization, using layout, colors and typefaces that project the site’s personality and image.

So they’re not two different entities, in fact web design includes the elements of architecture—the architecture simply comes first.

At Mequoda, we maintain the publishing industry’s most comprehensive database of website design best practices. Since 1997, we’ve documented, tested, and validated guidelines for every facet of integrated website design. Our principles are followed by more than 40,000 publishers, editors, content producers, and website designers around the world. Highly functional and usable, our designs are continuously evolving, based on ongoing feedback from our clients and the organizations we serve.

Because we maintain case studies of leading websites across most major content categories, we can cull from the best to help you select aesthetic and functional features. In most instances, this best practices approach dramatically reduces the time and expense associated with getting a new, high performing site up and running.

To schedule a no-obligation conversation with me, contact Ann-Marie Sullivan at 617-886-5177 or email her.

Related Posts

• 41 Ways to Build Email Circulation Forever [+ Video]
• 6 Ways to Improve your Website Conversion Rates
• How Does Your Email Conversion Rate Compare?
• How to Calculate Your Site-wide Conversion Rates
• Want to Increase Sign-ups for Your Membership Website?

Posted in Website Architecture & Design

Tagged with content marketing strategy, display ad, ema, email, email newsletter, floater, Floaters, keyword research, landing page, membership website, OFIE, OFIN, paid membership website, Rapid Conversion Landing Page, SEO, text ad, text links, web design, website architecture, website design tools, website visitors.

4 Responses to “Website Architecture vs. Web Design – What Comes First?”

1. Don Says:
   October 3rd, 2012 at 11:07 am

   Great first post!

   Website architecture, like most complex topics, is often misunderstood… and only becomes manageable when marketing goals are clear and prioritized.

   Don

2. Wayne Says:
   October 6th, 2012 at 2:00 pm

   yes architecture is somewhat misunderstood, but design is much more misunderstood. It’s NOT just colours, fonts and CSS variables. It includes the architecture. That’s why web dev is a 2 year community college education and design is a 4 year BA.

3. Jasa Pembuatan Web Says:
   October 7th, 2012 at 5:35 pm

   Oh my goodness! Amazing article dude! Thank you so much, However I am going through issues with your RSS. I don’t know why I am unable to subscribe to it. Is there anyone else getting identical RSS problems? Anyone who| knows the solution will you kindly respond? Thanks!!

4. Jasa Arsitek murah Says:
   December 29th, 2012 at 10:00 pm

   Good day I am so happy I found your weblog, I really found
   you by accident, while I was researching on Askjeeve for something else, Anyways I am here
   now and would just like to say cheers for a incredible post
   and a all round entertaining blog (I also love the theme/design),
   I don’t have time to browse it all at the minute but I have book-marked it and also
   included your RSS feeds, so when I have time I will be back to read much more, Please do keep up the superb
   b.

Leave a Comment

Name (required)

Email (required, will not be published)

Website