Tag Archives: Web design

Use Storytelling Skills to Transform Your Web Content

Courtesy of PR NEWS.

By Stephen Terlizzi

Traditional PR approaches relied mostly on a well-defined network of contacts to whom you pitched news or an idea and some facts, and the reporter created a story. However, like that famous book about the moving cheese, many PR professionals are asking lately, “Who moved my reporter?”

As the economics of the information age have taken their full toll on the publishing industry, the “well-defined network of contacts” is looking more like a ghost town than a thriving metropolis. What’s key to remember is that these folks didn’t just disappear into thin air. Instead, many of the old school journalists have shifted and are now independent consultants who are writing for their own blogs and the Web sites of others.

The tables also have turned on traditional publications during the past 10 years, and they are now syndicating more content from major online sites. In today’s new ecosystem, a well-placed story in TechCrunch or GigaOM can have significantly more impact than any single article in a major local paper.

This means that if your company isn’t a major industry player, you shouldn’t expect to get much share of mind in a fast-paced digital world where everyone is competing for eyeballs—unless you have an exceptional story to tell.

Becoming the person who knows how to mesh “what will be published” with “writing what will be published” puts you in the perfect position to develop ready-to-go stories that will stand out from the digital noise bombarding online reporters, editors and bloggers. Let’s examine what makes a compelling story and how it translates to digital public relations.

Meet Both Needs
Regardless of the type of story, there are always two people in every story: the author and the reader. The author, or client, has a point to make while the reader wants to learn, be informed, entertained, amused, etc. An effective story meets the desires of both parties, whether it is written for an online audience or traditional media.

In the book The Tipping Point: How Little Things Can Make a Big Difference by Malcolm Gladwell, the author talks about three types of people that are critical to the success of any word-of-mouth initiative: connectors, mavens and salesmen. As you can image, the connectors connect, the mavens inform and the salesmen convince. I think it is an excellent analogy for the purpose of writing a PR story for a client—a story to promote, a story to envision or a story to validate.

Note the use of the word “or” in the last paragraph. You must write stories that have a single, simple objective and have simple elements, as online writing must be more direct and shorter. So focus on doing one of the three points well as opposed to doing none of them well. In today’s time crunched society, deliver the point succinctly and close the story. We are not writing Dostoevsky’s Crime and Punishment.

Stephen Terlizzi is the managing partner and head of the social media practice for Tanis Communications.

This article was adapted from PR News’ Digital PR Guidebook, Volume 4. This and other guidebooks can be ordered at the PR News Press online store.

Web Design and the Rule of Thirds

[tweetmeme]

Courtesy of WEB DESIGN magazine.

Grid-based design provides designers a formal way to assess the communicative expression power of the UI thanks to the rule of thirds – a topic Website Magazine addresses in our July 2011 issue. But what is the rule of thirds and how can you use it to improve interaction on your own site?

Originally used in the visual arts field, the rule of thirds is adapted well to any design and any design format or device thanks to its simplicity. The rule of thirds identifies four focal points within compositions to where the human eye is naturally attracted. By aligning elements on dividing lines or placing elements at these focal points, a maximum amount of interest and energy can be directed to the most important elements of the page. While eye tracking and heat maps provide meaningful, empirical data on how the site was used in the past by users, applying the rule of thirds can be useful as the design takes shape to ensure you are meeting the underlying objectives initially set forth and within the boundaries of standard design practices.

To really understand how the rule of thirds can be used it is necessary to compare and review various websites to see what are they doing right and what are they doing wrong. WM reviewed homepages/index pages of three sites in the “Music/Entertainment” category including Rolling Stone, Spin Magazine and our very own WM Senior Editor Mike Phillips’ Chicago Music Blog, Sound Citizen. We’re looking beyond the homepage as well with an analysis of content pages on these websites and how the rule of thirds applies to their layout/structure.

Rules of Thirds on Homepages
When applying the rule of thirds to home or index pages, having site-wide objectives prioritized is of vital importance. In the case of the three sites reviewed, exposing content, profiling advertising, and encouraging “social” are the apparent core objectives of these sites when the rule of thirds is applied.

So how do the sites stack up? All things considered, pretty well. Some things that stand out at the outset are the predominance of advertising on Rolling Stone and Spin and how well they have done to balance advertising with featured editorial content. Sound Citizen’s focal points mainly target content and community features. Sound Citizen is also the only one of the three sites to employ a two column layout as opposed to three column layouts used by the others. The use of a two-column layout has different restrictions than that of a three-column. Rolling Stone and Spin are able to feature more content over the fold than Sound Citizen without losing site of the primary ad’s importance. Also, notice how much more linear (and in-line with grid based design) Rolling Stone and Spin are compared to Sound Citizen.

Rules of Third on Content Pages
When it comes to content pages, the rule of thirds once again proves useful. Keep in mind that the intersections of our “thirds” (represented by the blue dots) are not actually intended to be the the exclusive focus of our readers but also what is immediately around them.

So how do these pages stack up? Not very well, in our estimation. But there are some instances of abiding by the rule of thirds. Rolling Stone once again puts the ad in plain sight and Spin further exposes its most popular content to the lower right of the fourth focal point. Both, however, put the burden on the viewer to locate and consume the page’s content. Unlike Rolling Stone and Spin, Sound Citizen maintains its structure well. The design supports the primary objectives of the site (content and community) and it is carried over from previous pages visited by the user, such as the homepage. However, based on our evaluation, there is a great deal of room for improvement on all three sites.

5 Must Haves for Every Small Biz Site

[tweetmeme]
by Ken Builder
Courtesy of Manta

I’ve put together a list of 5 must-haves that every small business website needs to include. Whether you’re building a website yourself, or have a web designer to do it for you, work through this check list and you won’t go wrong.

1. Contact details.

It might seem a bit obvious this one, but you’d be surprised how many people forget to add their contact details. Not only must you have your contact details–at a minimum your address, phone number and email address–but you must make those details easy to find. Don’t hide them away in the footer. Make the “contact us” page one of the most obvious ones. Because having a website boils down to just one thing: making more sales. And if your website visitors have a hard time getting in touch, then they’re not going to buy from you.

2. Map

A bit less obvious, but a must-have that can make a real difference to the number of leads your website generates. The nature of the Internet is anonymous–we’re all dealing with companies and individuals through a computer screen. And because of this, the Internet is a scammer’s paradise–it only takes a few minutes to build a website and pretend to be a company. So having a map of where you are adds a real reassurance to your website visitors. It turns a virtual interaction into something more solid, and gives your website visitors the peace of mind that you’re real people living in the real world

3. A Lead Capture Form

This is the next step on from adding your contact details. Many website visitors want to know more about your products and services, but are disinclined to give you a call or drop you a line. But they’re quite happy for you to get in touch with them. And in order to make that possible, you need a lead capture form. Think of this as a sales assistant approaching a shopper, rather than a shopper going out of their way to approach a sales assistant. A lead capture form allows your website visitors to leave their details and express an interest in you, without going the whole hog of picking up the phone. And since many people surf the web out of office hours, the chances are that the time that they’re actually on your website is a time when you don’t have anyone to answer the phone. Having a lead capture form allows you to give them more information when it’s convenient for you, and lets them express and interest when there’s no one around to talk to.

4. Photos of You and Your Staff

This is another great way of reassuring your customers about who they’re dealing with. In the same way that having a map gives your web visitors the confidence that you exist, having your photos on the website creates a personal connection between them and you. It’s so much harder to turn away from a face than a computer screen. Having a photo kick-starts a personal relationship with your website visitors, and it makes it much more likely that the visitor will then get in touch. The added advantage is that not many websites include personal photos, so get this right and your site will start to get head and shoulders over the faceless ones around it.

5. Newsletter Sign-Up Form

This option is a good opportunity to warm up future customers. Many people surfing the web for products and services will be in a “research” phase of the buying cycle. They’re not ready to get in touch or start buying just yet, but they are interested in finding out more information. Having a newsletter allows you to start to interact with them before they’re ready to buy. They get the opportunity to “‘taste” your service and personality, without having to commit to buying from you. You can start having a conversation with them, so that when they do decide to buy, that relationship already exists. And as anyone running a successful weekly or monthly newsletter will tell you, it can be the biggest source of new leads for your website. So add a newsletter sign-up form, and start emailing news about your company and industry to those signing up, and the customers will surely come.

5 More Must-Haves For Every Small Business Website

About the Author: The webeden.co.uk free website builder lets you build a website, even if you’re a complete beginner. Make your own website instantly with WebEden:You can sell your products, uploads your own videos and music and even integrate your blog.

Four Essential Elements for Creating Captivating Websites

[tweetmeme]

Courtesy of Website Magazine

The four principles of design are balance, rhythm, emphasis and unity. Each one of them is essential for bringing together the different visual elements that are necessary to achieving a strong design, which, in turn, is imperative for a website to succeed on any level. What follows is an examination of each principle, with insights about how to incorporate them into your own Web design for optimal results.

Balance — Different colors, shapes and sizes can create different degrees of what is called “visual interest” on a Web page. It is important that pages are designed to hold a user’s interest without overwhelming them or causing distraction away from the elements most important to conversion goals. As such, distribution of this interest needs to be controlled and balanced by considering each element in a layout and its “visual weight” — determined by its size, shade and thickness of lines.

Symmetrical balance is achieved by placing elements in the design evenly. If you place a large, heavy element on the right side, you will have a matching heavy element on the left. Centering is the easiest way to get a symmetrically balanced page. But be careful, as it can be difficult to create a centered design that doesn’t look flat. For symmetrically balanced design, it is better to create the balance with different elements — an image on the left and a large block of text to the right of it, for example.

Asymmetrical balance is an arrangement of unlike objects of equal weight on each side of the page. Color, value, size, shape and texture can be used as balancing elements. However, asymmetrically balanced pages can be more challenging to design, as elements are not matched across the centerline of the design.

For example, you might have a large element placed very close to the centerline of the design. To balance it asymmetrically, you could place a small element farther away from the centerline. If you think of your design as being on a teeter-totter or seesaw, a lighter element can balance a heavier one by being further away from the center of gravity. You can also use color or texture to balance an asymmetrical design.

Sometimes the purpose of the website itself makes an off-balance design the right choice. Designs that are off-balance suggest motion and action. They make people uncomfortable or uneasy. If the content of your design is also intended to be uncomfortable or make people think, a discordantly balanced design can work well.

Rhythm — Rhythm in design is also known as repetition — a pattern created by repeating elements that are varied, allowing your designs to develop an internal consistency that makes it easier for your customers to understand. Once the brain recognizes the pattern in the rhythm it can relax and understand the whole design.

Repetition (repeating similar elements in a consistent manner) and variation (a change in the form, size or position of the elements) are the keys to visual rhythm. Placing elements in a layout at regular intervals creates a smooth, even rhythm and calm, relaxing mood. Sudden changes in the size and spacing of elements creates a fast, lively rhythm and an exciting mood.

Gestalt is a general description for concepts that make unity and variety possible in design. The mind has the ability to see unified “wholes” from the sum of complex visual parts. Some principles of gestalt are proximity, similarity, continuance, closure, uniform connectedness and 1+1=3 effects.

Emphasis — Emphasis (or dominance) in design provides the focal point for the piece, enabling the most important design element to stand out. To draw the reader to the important part of the piece, every layout needs a focal point.

Generally, a focal point is created when one element is different from the rest. However, to maximize emphasis, it is necessary to avoid too many focal points, so as not to dilute the dominant effect. When all elements are given equal emphasis, it can make the piece appear busy, at best, or even boring and unappealing.

Emphasis can be achieved in the following ways:

• Using semantic markup to provide some emphasis, even without styles.
• Changing the size of fonts or images to emphasize or de-emphasize them in the design.
• Using bold, black type for headings and subheads and much lighter text for all other content. Placing a large picture next to a small bit of text.
• Using contrasting colors. For example, using a series of evenly spaced, square photographs next to an outlined photograph with an unusual shape.
• Placing an important piece of text on a curve or an angle while keeping all of the other type in straight columns.
• Using colored type or an unusual font for the most important information.

Unity — Unity (or proximity) helps all the elements look like they belong together. Readers need visual cues to let them know an article is one unit — the text, headline, photographs, graphic images and captions all go together. Elements that are positioned close to one another are related while elements that are farther apart are less so.

Unity can be accomplished through the following methods:

• Being consistent with the type font, sizes and styles for headings, subheads, captions, headers and footers throughout the website.
• Positioning elements so that those close to one another are related, while elements that are farther apart have less of a relationship.
• Using only one or two type styles and various size or weight for contrast throughout the site.
• Repeating a color, shape or texture in different areas throughout.
• Choosing visuals that share a similar color, theme or shape.

Web users rely heavily on visual clues when making decisions about a website — whether to click and explore, consider a purchase or sign up for a service. This is even more pronounced for first-time visitors when the decision to stay on-site or abandon is made in just a few seconds. Follow these four design principles and you can be sure that your users and new visitors will stay engaged with your website.

About the Author: Guillermo Cedillo is responsible for the design and implementation of modifications of different Web, desktop and mobile applications as a User Interface Designer for Sieena. Sieena is a Nearshore software development firm specializing in Microsoft technologies, with operations in Los Angeles and Monterrey, Mexico.