Month: June 2017

Visualize This!

One could claim without much exaggeration that making data come to life in effective online tableaus is a must for any well-designed website. After all, the internet is about the transmission of information in beautiful and compelling design. Communicating effectively is key, and websites have a huge role to play in a media landscape marked by the sheer volume of available data, whether the objective is publicizing successes in genomic sequencing, reaching strategic communications goals, showcasing useful municipal information, or simply highlighting meta-data like visitor count and other forms of data analytics. Little wonder, then, that data visualization is increasingly becoming an indispensable content management resource and posting strategy. One thing to keep in mind–web browsers evolve, and so do visualization libraries. If you have not updated your list of visualization tools recently, you need to take a look at the available options.

When it comes to data visualization, gone are the days of word clouds. Enter JavaScript and a variety of libraries built around it—Springy.js, D3.js, digraph.js, chart.js, Google’s Visualization API, polymaps.js—that control the behavior of abstract mathematical models. Most of these libraries are open source but some (see, for example, plotly, ZingChart) require payment for their services. Although each of these ensures a relatively quick and effective, almost tactile, representation of data, the skill level required to make the most of a given library varies. One of the excellent open-source choices for creating charts is D3.js, especially when coupled with the Waypoints API. If you have previously dabbled in D3.js, you know that it can be a challenging library with arcane and little-known options that take time to explore. Sure, making a pie chart from scratch is easy if one is familiar with the basics of JavaScript but adding options and customizations can be tricky, as discussion on professional websites and blogs testify. One of the significant advantages of D3.js over similar libraries is that it gives the developer a great deal of control in customizing their data, rather than relying on pre-made charts that can fit it.

Some of the inherent complexity of D3.js and JavaScript objects can be tackled with the Waypoints API—it is slim but intuitive and rich in options, and provides a layer on top of D3.js that makes animations a cinch. Waypoints focuses almost exclusively on managing animations and triggering the correct function as a visitor scrolls up or down a page —for everything else you would need to depend on JavaScript or custom functions in D3.js. It does assume some knowledge of JavaScript and the dom tree, as well as JavaScript event-handling , especially when it comes to displaying a series of animated graphs on a single page. Its most important functionality is the ease with trigger points can be set up, particularly useful for fine-grained control over a series of moving objects. Ideally, the animation for each of these should trigger at a precise location, not sooner and not later, made possible by a Waypoints closure.

Content Shouldn’t be an Afterthought

Designing a website is like taking a script and making it into a movie. The movie director converts the text of the script into scenes and casts talented actors that will bring the movie to life.

Now imagine this, what if the director started shooting without a finished script?

Would that impact the quality of the movie? Would his decision cost the studio more money? Well, if it’s Steven Spielberg or Billy Wilder directing the movie than the answer is probably no.

Let’s put it this way: designing a website without enough content is a guessing game that negatively impacts and slows down the creative process. Yet for some reason, many clients wait until they receive a nice set of designs before they start creating or finalizing content. This is where the design can fail when you have to force, rewrite or shortened the final content to fit into the newly designed layout.

Content is the most important part of your website. The right content will give your business a voice; tell your business’s story and emphasize what you do and why your target audience should invest in your products and services.

Content includes photos, video, text, logo, graphics, and headlines.

The benefits of putting content first

#1 — Stop nasty surprises from derailing your project budget and schedule.

#2 — With a content-first approach, your designer can design better and more detailed set of wireframes.

#3 — Avoid endless rounds of iteration.

What happens when a content first approach is not followed or is completely ignored?

Compare and contrast both design and see how using lorem ipsum and real content can change the design for better or worse.

Example 1– no real content, placeholder text

 

Example 2 – real content, no placeholder text

Things to think about when creating or planning content for your site.

Preparation is key.

Ask yourself these following questions.

What sort of impression would you like your target audience to have about your business? Will your content engage your visitors? What message are you trying to communicate through your content?

Avoid

  •      Conflicting messages
  •      Duplicated copy
  •      Spelling and grammatical mistakes
  •      Outdated content

The content you provide to your designer during the discovery phase does not need to be final or perfect. Start by reviewing your existing content, maybe it’s not exactly what you want to say, but it’s a start. Revising existing copy is generally easier than writing from scratch so give it a try

Ideally, designers would love to receive final content from their clients at the beginning of each project, but it never happens and probably will never happen. Remember a design constructed without real content may look okay in the end, but it will never be as good as a design with real, actionable content.

So, should content be an afterthought? No! It should be one of  your first thoughts. While design helps lure the audience and draw their eye to an actionable area, content tells them what action should be taken.