Perspective, tips, and insight

Articles to help you improve your digital marketing

What comes first the design or the content?

It's like the age-old question of chicken vs egg: When planning your website what comes first the design or the content? The answer will likely vary depending on if you're asking your designer or your copywriter. After all, you can’t have an effective design if you don’t know anything about the content but you can’t write impactful copy without knowing how it flows in the design.



Don't worry. It's not an impossible situation. It just requires the designer and the writer to work together on two key steps:

Site architecture 

Before the design starts, you should develop the site architecture. The menu will guide much of the design and, obviously, the content. Your writer may lead this part of the planning but, more than likely, a team of people will have input into the site map and structure.

Wireframes

The designer will take the lead here. Using your defined site architecture and stated website objectives, the designer will develop a set of wireframes that will give the design and content a framework. The wireframes will account for pages that need to communicate different types of content and give a structure for the content writer to work within. That framework will also provide necessary constraints as the design is developed.

 Read more of our thoughts on the importance of site architecture and wireframes. 

Once the wireframes are approved and communicated to your team. The heavy lifting starts. Now the design concepts are created while, often at the same time, the content is developed. When the two pieces come together, there will likely be some fine-tuning involved to tweak the content or rewrite calls to action to best fit the design.

With the right planning, design and content come together to create an effective, strategic and functional website.

So which comes first? Neither - it's all about the strategy. Need some help developing your website strategy? You've come to the right place. Let us help you realize (and maximize) the potential of the Internet.

Using CSS Preprocessing to Speed Up Development

Using CSS Preprocessing to Speed Up Development
As websites become more complex and designs break the boundaries of standard HTML, we are seeing a rise in the use of CSS preprocessors. CSS preprocessing allows developers to write clean code in a programming language, rather than static syntax. The preprocessor rewrites this code into the CSS. This process greatly increases development workflow and reworks how developers think about CSS.

The importance of the call to action

One of the key differences between writing for the Internet and writing a print piece is the call to action. Yes, all good marketing writing includes a call to action, however, on a website the call to action has functionality. On your website you have the opportunity to guide the reader right where you want them to go. That could be through a series of pages, to a contact form or a featured service or product. On the Internet the CTA doesn't just direct traffic, it leads people down the right path.

How do you incorporate calls to action in your writing?

First, consider what you want users to do when visiting a particular page. Do you want them to continue deeper into the site? Maybe you want them to email you for more information? Or perhaps both are viable options to capture the interest of readers at different levels of interest? You should have goals for your website overall but each page should also have a communication objective. Now that you know the objective for the page, write the content to lead them there:

1. Consider placement: Don't limit yourself to the basic, 'line of copy plus button' at the bottom of the page. Yes, that's a good call to action but it's not the only one. Use text links within your content where appropriate. Place buttons in the middle of the page. Create feature boxes in the right column. Is the page long? Consider having a CTA in the middle of the page and at the end. Try to look at the page from your prospect's point of view and consider where he might take action - then give them a way to do just that.



2. Don't just use a phone number: People on your website are often there because they don't want to pick up the phone. Even if your ultimate goal is to convince users to call, give them good alternatives. Create forms that are easy to complete to start the lead-gathering process. Include a link to an email address (and make sure someone answers it promptly). Invite people to attend an event or watch a video or listen to a webinar. Don't ignore your phone number, but consider that this may not be the most desirable action for your prospects.



3. Feature + Benefit: It's Marketing 101. If you want a prospect to take the next step, give them a good reason. Don't just include a big button to Watch A Demo! Tell your reader why they want to watch the demo. Then include the big button to make it easy to do so.


Pay attention to the design of your calls to action to make them more effective.

If your page has more than one call to action, it's critical that you consider the design of them to make sure you communicate their relative importance. After all, not every CTA deserves a large button. Even if your page has just one call to action, don't make people hunt for it. Whether you use graphics or text for your calls to action, make them obvious and you'll have more success getting your prospects to take the desired action.

Make the text link bold. Make the button large and distinctive. Use white space effectively. In short, use design to make your calls to action more effective. Read more about call to action design tips and view examples. 

To be effective, a call to action needs to be well-written and well-placed. Want more information on improving your calls to action? There are some great tips and examples in this article: Ten Techniques for An Effective Call to Action

Calls to action should never be considered as an after-thought. The objectives behind them, their design and implementation should all be part of your website strategy from the beginning. Not sure where to start? TBH Creative can help. From start to finish we can help you create an effective online strategy and improve your website's functionality. Contact us to learn more. 

2013 Color Trends for the Web

2013 Color Trends for the Web
The web has fads that come and go, and color is one of these trends to keep in mind. The use of color on a website sets the mood and visually communicates the brand personality of a website. For 2013, we are seeing both the use of calmer, more subdued color palettes as well as palettes pairing bright neons with gray hues.

These trends are also influenced by Pantone’s Color of the Year for 2013, which is emerald.

Using style tiles to streamline the web design process

Narrowing down a website design can be a tricky process. Sometimes it's perfect on the first try, sometimes it takes multiple versions of design mock-ups before settling on a final look. This is commonly just an accepted part of the design process, but wouldn't it be great if there was a better approach? Wouldn't it be nice to save some time for both the client and the designer? Well, that's where style tiles come in!

Style tiles are a design tool that can help designers and their clients streamline the website design process. Style tiles can be used when a wireframe might not be detailed enough, but a full design mock-up would be too much. The purpose of style tiles is not to represent the final version of a website, but to set its overall look and feel.

What does a style tile look like?

While style tiles will differ from project to project based on the needs of the website, some of the most common elements they will represent are:
  • colors
  • typography
  • buttons
  • image treatments
  • icons
  • user interface elements
Here is an example of style tile created for The Washington Examiner 2012 Campaign and the final site design.
The Washington Examiner 2012 Campaign Site: Style tiles created by Phase2 Technology

As you can see, each style tile represents a slightly different design, with each invoking different feelings in the viewer. The full version of the site shows how the design elements are carried over from the style tile to give the website the same overall look and feel.

Below is another example of a style tile created for the new TBH Creative website design:
Style tile for the new TBH Creative website, coming soon!

This style tile represents the overall design of the new TBH Creative website and provides details about the various design elements. When the new site is launched, come back and see how the design elements are carried over from the style tile!

Why use style tiles?

Now you know what a style tile is, but why are they so beneficial?

It's important to determine how a company will be represented through the design of its website early on in the creation process. Style tiles help to narrow this down without the distraction of details such as layout or content. This can provoke better feedback during the early stages of the design process, and can save a lot of time and effort for everyone involved. Also, changes can be made more easily to style tiles than to full site mock-ups. Therefore, you can get to the development phase more quickly.

Also, with design elements decided, the focus can shift to more important aspects when determining the layout of a site. Since elements like typography and colors are already set, you can focus on the message you are trying to communicate and how you are going to best present content to your users. By making this separation, a website will be better tailored the goals of the company, and more effective overall.

If you want to find out more about styles tiles and how they can be used in the design process, check out the article Style Tiles and How They Work.

Overall, style tiles are a great way to open communication between the designer and the client early on in the design process, and to help a project progress more efficiently.

Receive articles in your inbox