When you don’t have any content, and your client wants to begin, where do you begin?
After you’ve completed your wireframes and have moved on to developing your comp in Photoshop, you can begin to gather content, even if it’s not finalized or you have none.
Copy
There are a few ways to procure copy. You can:
- Use existing/old copy.
- Write something quickly that will be similar to the final draft; this should include headlines, sub-heads, etc.
- Use "dummy" copy, which is usually your best, fastest, and most efficient option.
Resources for dummy copy generators:
Lorem Ipsum Generator
Blind Text Generator
Loremify
Images
Similar to obtaining copy, there are many options for finding FPO (For Placement/Position Only) imagery:
- Use existing/old images.
- Depending on the content, you can take photos, but this might not be the most efficient, time effective option.
- Stock photos are most likely your best bet. Many stock photo companies allow you do download a low-res image without the watermark simply by creating an account. This option will best reflect the final imagery that will be used.
- Or, even better you can use Google, Flickr, etc!
When using FPO content, the designer should somehow indicate such by either notating it somewhere on the page, or what’s typically done is placing a big fat FPO over the content.
Additionally, you can use shapes and other place holder content to represent the content that will be featured on the final designs.
When you begin to develop the final content to be used on the website, there are a few things to keep in mind related to developing good content that will engage the user.
According to Nicholas Tart, the “3 Things that Visitors Should See on Every Page of Your Blog” (or website) should be:
- A First-Thing-They-See Headline
- A Valuable, Persuasive, and Trust-Building Message
- A Call to Action that Accomplishes Your Goals
Getting into more detail, starting with headlines, Tart uses the analogy that if you’re lost somewhere, when you look at the provided onsite map, be it at a mall, museum, public transpiration, etc. the first thing you see is a big red circle and an arrow saying, “YOU ARE HERE.”
Tart compares the headlines on websites as your “YOU ARE HERE” circle and advises to make them “big, bold, and colorful.”
Next, you need to effectively communicate the message you’re advocating. Within each page of your site, it’s “an opportunity to give something while building trust” with your users and this message is translated to the user via text, image, audio and video.
Your text needs to be written extraordinarily well in order to stand out among your competitors. Your images need to be curated in such a way that they grab the users attention; creating infographics and other icons can help you stand out. Audio and video are optional, but it is the most effective way in building trust with your users.
And finally, your Call to Action (CTA) is typically at the end of your advocated message, but can be in multiple places within your site. However, before you do all of the above, you need to decide exactly what that message is - what are you advocating?
Questions to ask yourself when deciphering how to accomplish your goals through a call to action. Is your goal to:
- Keep someone on your site? List your related posts. The popular posts in the sidebar also help keep people on your site.
- Get someone to comment or interact? Ask them a question and make sure that they know that their response is meaningful.
- Get someone to click an ad? Put your ads there and make sure that they’re relevant to the content.
- Get someone to opt-in? Place an opt-in box and tell them why they should subscribe.
- Get someone to buy a product? Put a link to your sales page or someone else’s sales page and make a final recommendation on why they should purchase.
- Get someone to take your advice? Tell them exactly what to do and emphasize the importance of taking action immediately.
- Get someone to trust you? Add an author bio with a mix of personal and professional details.
Ultimately, one action or goal listed above translates into another action and then begins to build trust in the user. This can be translated into a series of actions that look like this:
The user browses your site and has a positive experience; maybe they comment on something or engage in some way; you respond in a timely manner confirming the initial trust and positive experience the user had; this then turns into the user returning to your site and making it part of their browsing routine which can then translate into buying a product and/or advocating and recommending you, your brand and what you stand for to others. All of this helps build your brand and allows it to be more accessible which is the primary goal.
You don’t want content that will distract the user from the website's indented goals. All of your content should work together to fulfill the objectives of your site. If it doesn’t, why is the user there?
References:
http://www.incomediary.com/visitors-see-every-page-blog
10 Crucial Elements for Any Website Design by Carrie Cousins
As the title suggests, Cousins expands upon what elements should be present, and how to use said elements in designing a good website. Continue reading for a summary of her article or read the full article here.
While every designer may have a different plan when it comes to building a website, they do have a common checklist. These are the elements every website should include:
- Space
- Simple Navigation
- About Us
- Contact Information
- Call to Action (or Signup)
- Search
- Informational Footer
- Style for Buttons
- Great Images
- Web Fonts
1. Space
Space is one of the most important design tools because it dictates everything— from flow to readability. Designers are beginning to use space in ways that we did not see on the web a decade ago. More site designs include vast spaces, increased spacing between lines of text, and an overall use of open space.
How To Use It: Start with key elements such as navigation menus. Make sure elements are organized in a way that includes set spacing between elements. This will make each button or word stand out more clearly on its own.
2. Simple Navigation
Navigation does not need to be (and should not be) complicated. It should be easy to identify and easy to use. It is also important to keep navigational menus to a minimum, so you don’t overwhelm users. Depending on the type of site, you should have no more than five to ten navigation items.
Navigation also includes tools that help users navigate through a site. For example, sites with parallax scrolling often include directional arrows to make the site more user friendly. The easier it is for people to use and navigate your site, the longer they are likely to interact with it.
How To Use It: Use simple navigation as the framework for your website. Remember, users want a few key things from navigation: knowledge of where they are on the site, a way to go back or home, and directions if your site has an unusual or more complicated interface.
3. About Us
It is especially important for a small business or site owner to tell users who they are, and the “About Us” page should do just that. It can also outline a company’s philosophies or goals, or how the site came to be. User testimonials and success stories can go here, as well as serve as a gateway to related pages or even social media profiles.
These pages tend to get long and wordy so keep the page simple; give users just enough information to be interested but not bored.
How To Use It: Use the About Us page to give your brand a little personality. Consider including photos of your team and a short company biography.
4. Contact Information
Contact information commonly appears in one of two ways: in the header/main navigation or as a Contact Us page with a form or expanded information. Either option can work well, depending on your site design. The key is making it highly visible. Having contact information such as a phone number, physical address, or form to contact the website owner adds legitimacy to your site and business.
How To Use It: Add contact information to all static headers and/or footers. If you have a physical business address, include location information. Consider a contact form so users can email directly from the website.
5. Call to Action (CTA) or Signup
In most instances, a website is the gateway to an action: make a sale, provide information, gather contact information. To ensure this action, CTA prompts need to be obvious and strong. Another popular call to action is a signup form. If this is your goal, place the form in a prime location and size it prominently. Make the form simple and quick to fill out.
As previously mentioned, determine what your site is supposed to do. Then design it so that action is obvious and leads users to it. Techniques such as color, contrast and space can help lead users to the “right” buttons.
How To Use It: Make calls to action obvious. Placement should be in a highly visible part of the page and next to the item which it relates. Buttons should be of a contrasting color and say exactly what you should do: Buy Now, Join, Download, Sign Up.
6. Search
Search functionality is vital for repeat users. Design the box in a way that is unobtrusive but is easy to use. Make sure the box is big enough to type in. If you use an icon for search, there’s no need to invent something new. Use the standard magnifying glass.
How To Use It: Design a simple box that lives at the top of your website for search. The top right corner is the most popular location: using that space is expected and easy for users to find.
7. Informational Footer
The footer was traditionally used as a place to list links to every nook and cranny of your website, but now, websites are opting for a more minimalist footer. No matter how you choose to display your footer, it’s a good way to connect to your audience with a wealth of information without it getting in the way of the design.
Just be sure to make the footer useful and keep it simple. Whether you opt for a couple of buttons or a small sitemap, the footer should be designed to mesh with your site
How To Use It: Some of the best footers combine many of the above elements. The footer is often a repeat of elements found elsewhere (such as adding search to the top of the page in the main navigation and again in the footer). It can also introduce some of the above elements and house them if there is no other logical location in the design scheme.
8. Style for Buttons
Every button on a site should be recognizable as a button. They should have the same shape, design effects and feel, regardless of purpose or location.
How To Use It: Develop a set of buttons unique to your site. Create a consistent color theme with an overall style. Achieve this by making every button a single color and giving it the same shape and attributes.
9. Great Images
People love to see things in action. Great images or illustrations are one easy way to do this. With a relatively small set of great imagery, you can showcase content that will entice users to your site. Be cautious of using too many stock images because your site could end up looking like something else.
How To Use It: Hire a photographer or illustrator to develop and create a great set of images for your site. Rely on custom images rather than stock images for a unique visual experience.
10. Web Fonts
The web was once filled with a handful of typefaces because they were readable by most computers and browsers. That is no longer a limitation for designers, but web fonts are still important for two key reasons: compatibility and licensing. By using a web font versus creating images out of type to maintain a certain look, type is searchable on the web, which is important for search engine optimization (SEO).
How To Use It: Start with a service such as Google Web Fonts, which is free, to implement a set of beautiful and interesting typefaces into your site design without having to spend a fortune on licensing or worry about compatibility issues.
In summary, while there are a lot of important components to effective website design, including these ten key elements can make a difference. Take care to appropriately design with space, simple navigation, about us, contact information, calls to action, search, footer information, buttons, images and web fonts. These often overlooked details can make or break your site design.Further reading:
Elements of Modern Web Design
The Elements of a Clean Web Design
References:
http://www.incomediary.com/10-design-elements-all-big-blogs-have-in-common
