Website Architecture vs. Web Design – Which Comes First?

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 often 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.

[text_ad]

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 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 (OFIEs) and Floaters convert website visitors into subscribers and/or 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 often to sign up for a free 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 offer a free report to obtain an email address.
• TEXT LINKS: Hypertext links in editorial or navigation that lead to a Rapid Conversion Landing Page (RCLP). 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 your editorial content more focused.

[text_ad]

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 expectations 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.

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 usability front and center. You want your website to look great, but more importantly, you’ll need it to function and compel users to complete the tasks you’ve given them.

A strong website needs to have a good balance between attractive visual components and an easy-to-execute call to action. In most cases, the design is the easy part. Your website architecture defines your entire strategy, and 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 on your site. Sign up for an email newsletter? Click on a sponsored ad? Subscribe to a paid membership? 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.  Or think about it this way – when you build a new house, you start with the architect to get a blueprint; then you hire a designer to help you choose wall colors.