All Posts in CREATIVE

September 27, 2013 - No Comments!

The world has gone mobile. But has your web experience?

The Connecticut Art Directors club along with ConnCreatives presents a one-night mini-conference with three Connecticut agency owners, who will speak to such topics as responsive design, device-agnostic design, information architecture and advanced web typography.
We’ve all been there pinching, zooming, scrolling and squinting - never knowing what you’re going to get. A brands web experience these days is the experience. Peter will take a look at some key user behaviors on mobile and talk about how to go from rigid to responsive with a device-agnostic strategy that focuses on design systems and shows some practical ways to plan and execute a responsive design project.

August 5, 2013 - No Comments!

Web Design & Development Resource Roundup – August Edition

For designers & developers, makers & shakers, and anybody in-between, (friends, family, co-workers) - here is a roundup of some interesting tools and digital tidbits.

Let’s start with design-focused resources...

FilterFactory - This awesome site applies SVG Filters on image with export feature.

Stylify Me - For those times when you need a "styleguide,” and nobody made one, gain a quick overview of site colors, fonts, sizing and spacing here.

Retinize It - Photoshop actions for slicing retina graphics. A time-saver for our designers and developers.

Tiff - A visual typeface comparison tool.

They Make Icons - Download Free PNG, ICNS, ICO icons.

Tactile Design Kit - Download physical, interactive web design kit for engaging your clients in discovery as a PDF, EPS or AI file

UI8 - 704 UI Icons delivered in PSD, AI, EPS and SVG format.

UnSplash - Free hi-resolution photos for your next presentation or design project.

Macaw - The code-savvy web design tool we’ve all been waiting for.

WireKit - Try using this tool to make wireframing your next iPhoneApp in Photoshop a little easier.

Meet the Ipsums - Definitely the most fun Lorum Ipsum generator - For those times you will get to the copy later.

DPI Love ♥ Know your screens and easily find the DPI/PPI of them all.

Web Font Generator for Mac OSX

Now for you techies who care a little less about color and a little more about code...

Effeckt.css - A work-in-progress promising awesome performant CSS transitions & animations.

Casper - Responsive site screenshots made into less of a tedious headache thanks to Casper.

Ring.js - Wish JavaScript offered multiple inheritance like most languages? Wish granted.

Flippant - A mini javascript/css library to easily recreate that card flipping effect you always wanted.

Ghostlab. Synchronized testing for web and mobile.

Screenshift - A high impact ad format built using responsive design

CSS Selector Matches - A really interesting script to visualize CSS selectors

Real-Time Insights - By Google. Therefore it’s great.

Welcome Mat - Remember when making ASCII art was something we wrote C++ programs to do? This makes it easy & visual

Grid Calculator - This will come in handy for sure.

 

 

ScreenSiz.es - Screensize or popularity contest? How about greatness.

Firechat - Open source chat built on Firebase. No server code necessary.

AmI.ResponsiveDesign.Is - A quick test to see if your site really is responsive.

May 9, 2013 - No Comments!

Some thoughts on creativity, provoked by Behance’s 99U conference

I recently attended the 2013 99U Conference put on by Behance. This was my first 99U Conference and I would highly recommend it to anyone who is serious about embracing creativity.

Sometimes reflection is even more important than new learning. Here are some key patterns that stood out to me:

Creativity is a discipline.

We are creative creatures but many of us are institutionalized (read as problems with our educational system) from a young age, which really puts a damper on that skill. If you aren't feeding your imagination and constantly being curious, like muscles those skills weaken or never develop.

Creativity can be taught.

I never really understood what went into creativity because I never stopped using my imagination. The Art of the Deal best selling author, Tony Schwartz, provided a jaw-dropping look into how he sees the creative process, which I will never look at the same way again.

Insight.  First find and define the problem.

Saturation. This is the information gathering phase chock full of research. Most designers hate this phase because it isn't "creative" in their mind. From my perspective, the designers I respect most are all about saturating themselves in data and inspiration.

Incubation. This is where you walk away from ideas and thinking altogether, which Schwartz refers to as "thinking aside." He explains that when you shut your mind off, your brain is able to spark the best creativity, which is why ideas pop in your head during a shower, while walking in nature or when you are dreaming. This is often an area I totally ignored since I've never really had the luxury of time, but one I'll be looking to learn and apply in my ever-changing creative process.

Illumination. This is one step we are likely all familiar with. The infamous a-ha moment that stops you in your tracks.

Verification. This is the point where things start coming together; the part where you make it real. This part reminds me of the great scientists of history having an idea, testing it and learning from it.

Learn, modify and repeat. That being said, creativity isn't supposed to be easy, as Cal Newport points out, it takes a level of deep work and focused intent to develop skills and solve problems. Malcolm Gladwell talked about 10,000 hours being the time it takes to master a task. Nonetheless, we have scientific data to back how the brain learns things.

Ideas are nothing without execution.

I don't try to coin phrases, but I've been saying this one for much longer than Zuckerberg and others who take credit for it. I believed this so much that I built an entire company around it. I started my design career working for other agencies and turning "ideas" into reality. I would get handed what I call "pie in the sky ideas" with what felt like seconds left on the clock and had to figure it out. "Why" wasn't a question I got to ask. As a "vendor" it was all about making it happen, no matter how.

You will get your ass kicked.

Acknowledge the critic just don't give them an opinion.

Brene Brown reminds us that showing up will open us up for getting our asses kicked by critics in a visual analogy to the fights at the coliseum in Rome. Lowering your shield and being vulnerable is the only way you can truly create something amazing. Fail fast and don't get too attached to your work especially if you are in the design business. It's never about perfection, it's about solving a problem and iterating fast to improve.

Fail fast and iterate.

Agile thinking isn't a new concept. In fact,  it's been being used by software developers for over a decade but its now making its way into companies on a much bigger scale. Embrace imperfection and testing to help you arrive at your product or project goals faster. For me, this means thinking in whiteboards, post it notes, rough prototypes and most importantly, involving customers and users.

TLDR;

I believe if one can embrace failure and constant iteration it will make for better creatives and more effective leaders and collaborators. Hope you enjoyed this post. You should follow me on twitter I post cool stuff sometimes. Now go make something you love.

May 2, 2013 - No Comments!

What I’ve been writing lately. Have a look!

I haven't been ignoring my blog, I've just been writing in other places. Here's some digital treats for your curious minds.

Top 20 Skills for Digital Project Managers

A comprehensive list of the skill sets that will take your project management offering from good to great. This list outlines the path for instant success with your team.

The Rise of the Marketing Technologist: The CMO of the Future

A prediction and call-to-action for today's CMO and aspiring CMOs to understand the trends shaping the role of the CMO and how technology will quickly become an extension of the CMO's responsibilities.

How to Manage Other Designer: 10 Expert Tips

Helpful advice for working with designers to meet client and company expectations. From communicating properly to understanding their process, these practical tips can drastically improve the experience for both the designer and manager.

7 Reasons Why Mood Boards are Worth the Extra Time

The benefit of mood boards in digital design projects for not just the designers, but all other members of the project team. Mood boards set a foundation for all future design elements.

6 Simple Tips for Becoming an Awesome Creative Director

A guide for designers that have been promoted to management positions that test their leadership and time management skills while pulling them away from their true love of designing.

10 Tips for Doing Well in Design Interviews

Tried and true advice for acing an interview tailored to job seekers looking to do design for an agency.

How Shoppable Video will Add the New Layer of Interaction to Video Engagement

Video has been an increasingly effective means of marketing and advertising. In this article, I attempt to cover the next big trend in video: the ability to shop the video you're watching.

Like my stuff? Please follow me @petesena and let me know!

March 3, 2013 - No Comments!

Designing beyond the responsive web. A look at design systems.

Great design is about systems. No matter what the medium is great visual communications should aim to be accessible and adaptable to every display.

What the hell is a design system?

A design system is a combination of components and modules that define the visual attributes of an experience. These attributes come together to form rules that create the foundation for how a design translates from medium to medium and viewport to viewport. Think of design as building a house: design systems specify what materials, angles and styles you can use in the process. Creating a modular framework of visual language components ensures your creative holds up even in the most unforeseen conditions.

Elements of a design system

Content

voiceandtone

The basis of everything is content.  Mailchimp’s amazing resource Voice & Tone shows us how to look at every aspect of content strategy broken down by situations and content types. Design without content is decoration, echoed by Jeffrey Zeldman in May of 2008 (and he won't let us forget that either).

zeldmancontent

Typography

typography

A picture is worth a thousand words. Hopefully those thousands of words look good together. Almost every design system relies heavily on the usage of typography to help deliver its message. The combination of fonts used and their base size should start to dictate the typographic styles of the design system. To establish a balanced utilization of typography we typically leverage techniques such as Modular Scale. Tim Brown's amazing gift of Modular Scale functions like a musical scale in establishing a predefined set of harmonious proportions between fonts. Proportional percentage based sizes help us strike the right balance between control and sanity across all devices and mediums.

I tend to choose a few key device sizes based on the understanding of the audience and let these serve as a testbed to benchmark against (i.e laptop, desktop, ipad, iphone). This lets us balance the importance from large headers down to block quotes. Since most of what we do is digital, we generally think in terms of markup types. We can take inspiration from the BBC's Global experience language or from what we call our "UI Kit," which breaks down all the various types of content and how they will be displayed.

Color Palette

colors

Color allows us to bring together contrast and is one of the simplest ways to unite experiences. We all remember the Starbucks green, the UPS brown and the Twitter blue. This recognition is because of repetition and a media-agnostic delivery of an established design system.

Iconography / Shape / Form

icons

Some design systems rely heavily on the use of iconography and shapes to establish visual hierarchy and create an instructional system. Take the New York City Transit Authority Graphics Standards manual for example - or get inspired and contribute to the Noun project.

Grid & Visual Hierarchy

grid

Grids help enforce rules for visual hierarchy. They show us the order modules take in the layout and how they are brought to life. Collapsing columns, transforming images into icons or shorter type driven interfaces are just a few examples of this brought to life.

Hop on over to mediaqueri.es and see how designs are transformed based on various viewport sizes.

Imagery

imagery

Usage of imagery in a design system helps to evoke an emotion. Often photography composition in brands takes on specific treatments that help us recall images such as the silhouettes holding the iPod in the Apple commercials or the strong saturated images of athletes achieving the impossible by embodying the "just do it" mentality. Imagery creates a visual continuity to the design system and sets apart a brand from a stodgy stock website.

ipod

Tying it all back together.

No matter what kind of designer you are, or are striving to become, remember to think in Design Systems; not comps. Design is a job thats sole purpose is to solve problems and establish communication. Design isn't just art but rather the intersection of art and science.

Start with a mood-board and some content to begin to establish the visual language you are looking to create. Once you've started to establish the visual language translating it for different mediums tends to be a production task and not a conceptual one since the hard part is already defined.

I'm not going to force-feed you on the notion of designing in the browser, but being familiar with HTML/CSS and grid systems will be critical no matter what role you play in the design process.

We created Gumby, a responsive web design framework, to speed up how we transformed our designs into functional experiences. This framework helps us quickly translate all of the above elements of a design system into responsive layouts significantly faster than hand-coding and testing our own grid and layouts from a blank canvas. For more on that see the making of a responsive CSS framework.

For typography, turn to resources and tools like Nice Web Type , Typecast, and Typekit for creating and experimenting with web-ready typography in your designs.

Stay inspired and keep creating and making things. You should follow me on Twitter.

February 16, 2013 - No Comments!

February Web Design resources roundup for designers

As a designer you are always on the hunt for inspiration, shortcuts, and resources that will help you focus on being creative faster. Here is a roundup of design resources that you can use on your next design project.

Little Ipsum - A menu let that lets you quickly grab latin sentences and paragraphs. No more going to websites to generate it.

design_0001_littleipsum

 

BLOKK - Not a fan of lorum ipsum or perhaps your client has a hard time visuzling your layout with greek text. Blokk is free great font for quick mock-ups instead of lorum ipsum in your designs.

blokk

 

DottedPaper - Dotted paper for sketching
dottedpaper

Gui Toolkits - A comprehensive library of design user interfaces for web and mobile apps
design_0013_guikit

Placeit by Breezi - A great tool for those times you need to quickly toss your app mockup on a device (iPhone, iPad, etc) Great for presentations.
breeziscreenshots

UXPIN. A great online tool for doing UX together. It's faster than Axure and has a much lower learning curve.

uxpin

 

Subtle Patterns. Every designer worth their macbook can make a repeating pattern in Photoshop. Time just isn't on our sides these days. Subtle Patterns has a library of free repeating patterns for use in your next web design projedct.
design_0009_subtle patterns

Pattern Tap - Great inspiration of design and interface patterns. Learn from the best and submit your own.

design_0008_patterntap

 

Dribbbleboard. If your'e a designer and not on dribbble you're doing it wrong! Seriously though this is a great site to quickly rip through the recent content on dribble in a nice scrolling grid.

design_0000_dribbbleboard

Free UI Kits. Having UI Kits to get inspiration and as a starting place is super helpful when you are designing interfaces. Not every project is an opportunity either via time or budget to be able to start from a blank canvas. Here is a good site for pulling those resources when you need them in a pinch.

design_0002_freeuikits

CSS Drive Image Palette - Ever have a great photo rich with colors and you want to base your design color palette of it? This tool will help you with your palette quickly just upload from an image or web URL.

design_0007_imagetopalete

 

Colour Lovers. A great site to share your color ideas and inspirations and be inspired by others palettes.
design_0006_colourlovers

Adobe Kuler. Integrated with the Adobe Creative Suite this great tool is awesome for finding color palettes.
design_0005_Adibe Kuler

0 to 255. A great site for finding color variations based on a base color.

design_0004_0 to 255

 

Icon Finder. For those times when you need a quick icon.
design_0003_iconfinder

Typecast - Your type is going to likely end up online or in an app. Playing around with type fast is helpful.
typecast

Agile Designers - A great resource site for all types of resources from software, to fonts to icons.
agiledesigners

Stockvault - A quick place to snag photos from multiple sources. Similar to compfight.
design_0011_stockvalut

 

TextureKing - A place for free stock textures of grunge, dirt, concrete. Super helpful for comping and design.
design_0010_textureking

Business Model Canvas - If you are going to be a user experience designer you are going to need to understand business goals. This will help you work those out with your clients and teammates.

businessmodelgeneration

 

Typograph - A great tool for laying out Type scales using vertical rhythm
typograph

Sneakpeekit - Browser and Mobile Sketch sheets for designers.
design_0014_Layer 18

 

Gumby Framework - We live in a responsive era. This CSS framework will make designing your site on a fluid grid easy and comes with a nice customizer tool for easily downloading HTML/CSS responsive out of the box.

gumbycss

 

If you found this inspiring or useful please share it with someone that might find it useful as well. These things take time to pull together and I wanna share my design resources with the community. Follow me on twitter @petesena

 

December 27, 2012 - No Comments!

My 2012 round-up of all things web awesome.

Every year I search for, collect, and read what feels like thousands and thousands of articles. Some of them seem to stick and make it to a special place in my evernote. I decided for a change to collect a random assortment of articles, tools and overall web goodies that lovers of marketing, creative and technology would find some use for. If you find these useful please shoot me some love on twitter @petesena, or share with me what you found useful. I'm going to try to do this every year as we approach a new year.


Mou, a great markdown editor for web developers:

moutimage

20 Things I learned about browsers and the web.
A great primer to introduce web language and buzzwords to non programmers.

The Book of Speed:
Nobody likes waiting for stuff to download. Here's some tricks for developing faster web pages;

Contents

  • The Performance Business Case
  • The Life of Page 2.0
  • Fewer Page Components
  • Smaller Components
  • Optimizing Images
  • Parallel downloads
  • Optimizing JavaScript and Ajax
  • Optimizing CSS
  • Psychology of performance

 

jQuery Succinctly

Description
This book is intended for three types of readers. The first is someone who has read introductory material on jQuery and is looking for the next logical step. The second type of reader is a JavaScript developer, already versed in another library, now trying to quickly learn jQuery. The third reader is I, the author. I crafted this book to be used as my own personal reference point for jQuery concepts. This is exactly the type of book I wish every JavaScript library had available.

Table of Contents

  • Core jQuery
  • Selecting
  • Traversing
  • Manipulation
  • HTML Forms
  • Events
  • jQuery and the Web Browser
  • Plugins
  • Effects
  • AJAX

Some notes on Typography, breaks down the elements of typography, picking the right typefaces and best ways to acquire font licenses and such.

 


Some great thoughts on the dialect of your own design by Simon Collison or "Colly" as anyone following responsive design calls him.

A Designer guide to Webfonts. A great read for designers for going from photoshop to code and the implications on licenses, file formats, etc

The Mobile Playbook by Google

3 Keys to Aligning UX with Business Strategy


Source Code Pro: Over 13.000 Downloads Shortly After Availability


Understanding Backbone.js and the Server a primer for Backbone Javascript development.
Most Backbone tutorials will describe the process of sending RESTful requests to the server. But, how do we capture that data with our server-side framework? How do we know what the request urls are? How do we monitor these requests using Chrome Dev Tools? They will show you all of that and more in this screencast.

Useful JavaScript Libraries and jQuery Plugins

jQuery Credit Card Validator

This library attaches to the input event (with a fallback to the keyup event) and so every time a number in the input field changes, it calls a validation function. When a card is recognized, the credit card type is highlighted; and if the credit card number is correct, it is highlighted with a green checkmark as well. The plugin supports American Express, Diners Club, Discover Card, JCB, Laser, Maestro, MasterCard, Visa and Visa Electron. You might want to consider credit cards JavaScript validator and the Smart Validate Credit Card Validation plugin

VisualSearch.js

This library enhances ordinary search boxes with the ability to autocomplete faceted search queries. You can specify the facets for completion, along with the completable values for any facet. You can retrieve the search query as a structured object, so you don’t have to parse the query string yourself.

Validate.js
A lightweight JavaScript form validation library. You can validate form fields using over a dozen rules and set custom messages; the library doesn’t have any dependencies and you can define your own validation callbacks for custom rules. Works in all major browsers (even IE6!).

JavaScript Library

jQuery File Upload
File Upload widget with multiple file selection, drag&drop-support, progress bars and preview images. It supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

JavaScript Library

Grumble.js
This jQuery plugin provides tool tips without being limited to cardinal directions. A grumble can be rotated around a given element at any angle, all 360 degrees and at any distance — with CSS. Works in Internet Explorer 6+ and modern browsers. Also, check Tipped, a larger library of various designs and implementations of tooltips with an extensive API.

Grumble.js

The Widow Tamer
The Widow Tamer is a small JavaScript library that automatically “fixes” typographic widows. It’s designed to work with responsive sites, fixing widows as it finds them on resize or orientation change.

JavaScript Library

Little Time-Savers

money.js: Open-Source Exchange Rates and Currency Conversion
Joss Crowcroft has created an Open Source Exchange Rates API, which provides up-to-date, flexible and portable currency-conversion data that can be used in any application, framework or language (not just JavaScript). It has no access fees, no rate limits, no nasty XML: just free, hourly updated exchange rates in JSON. Joss also built money.js, a JavaScript currency conversion library that can be easily integrated in any website. A demo playground and detailed documentation are provided on the website, and the source code is available on GitHub.

JavaScript Library

simpleWeather jQuery Plugin

A simple jQuery plugin to display the weather information for any location. The data is pulled from the public Yahoo! Weather feed via the YQL API.

Retina.js
A script that checks each image on your website, when it’s loaded by a user, and replaces low-resolution image with their high-resolution equivalent, if available. It’s assumed that you use Apple’s high resolution modifier (@2x) to designate high resolution versions of images.

JustGage
A JavaScript library for generating and animating gauges. Based on Raphaël library for vector drawing, it’s resolution-independent and works in all modern browsers.

JustGage

A Magnifying Glass With CSS3 And jQuery
This technique achieves an aesthetically pleasing visual effect. The CSS3 box-shadow and border-radius properties are used to create the magnifying glass itself, while jQuery is used to detect the cursor coordinates and mouse movements and present the larger image. And when your cursor moves off the image, the magnifying glass elegantly fades away. The included tutorial makes it very easy to learn and understand how to achieve this effect. The technique includes both a small and a large image in the markup, so optimizing the technique to load a larger image on demand might be a good idea.

JavaScript Library

PxLoader
A JavaScript library that makes it easier to download images, sound files or any other file needed before taking an action on your website. The script lets you set up a preloader for HTML5 games and websites. You can monitor download status and even prioritize downloads in tagged groups.

PxLoader

Percentage Loader
With this jQuery plugin the common horizontal progress bar is displayed differently. The script uses HTML5 canvas and data URI encoding (vector graphics) to allow for visually appealing and variably sizable graphics. Also, it can be used to display feedback during long-running tasks.

Percentage Loader

gridster.js
A jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed.

gridster.js

Freetile
A jQuery plugin that enables you to organize the page content in a dynamic and responsive layout. Once applied to a container element, it attempts to arrange its children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.

Freetile.js


Encouraging Better Client Participation In Responsive Design Projects




Mousetrap: Keyboard shortcuts library in JavaScript


Traditional Strategy Is Dead. Welcome to the #SocialEra


CSS3Ps - free cloud based photoshop plugin that converts your layers to CSS3.


infinity.js scroll shit forever (lazy load style)


Anatomy of a successful landing page



Raspberry Pi tutorials:



FRAPI is a tool that lets you focus on business logic not presentation.
It's a high-level API framework that puts the "rest" back into RESTful.






 




ABSTRACT
The success of data-driven solutions to dicult problems,
along with the dropping costs of storing and processing mas-
sive amounts of data, has led to growing interest in large-
scale machine learning. This paper presents a case study
of Twitter's integration of machine learning tools into its
existing Hadoop-based, Pig-centric analytics platform. We
begin with an overview of this platform, which handles \tra-
ditional" data warehousing and business intelligence tasks
for the organization. The core of this work lies in recent Pig
extensions to provide predictive analytics capabilities that
incorporate machine learning, focused specically on super-
vised classication. In particular, we have identied stochas-
tic gradient descent techniques for online learning and en-
semble methods as being highly amenable to scaling out to
large amounts of data. In our deployed solution, common
machine learning tasks such as data sampling, feature gen-
eration, training, and testing can be accomplished directly
in Pig, via carefully crafted loaders, storage functions, and
user-dened functions. This means that machine learning
is just another Pig script, which allows seamless integration
with existing infrastructure for data management, schedul-
ing, and monitoring in a production environment, as well
as access to rich libraries of user-dened




What is SiteSucker?

SiteSucker is a Macintosh application that automatically downloads Web sites from the Internet. It does this by asynchronously copying the site's Web pages, images, backgrounds, movies, and other files to your local hard drive, duplicating the site's directory structure. Just enter a URL (Uniform Resource Locator), press return, and SiteSucker can download an entire Web site.

App Store Optimization (ASO) app store SEO 









 

Win the Pitch: Tips from MasterCard's "Priceless" Pitchman


If you haven't seen this you should (it's on iTunes, amazon, etc)

ART & COPY is a powerful new film about advertising and inspiration. Directed by Doug Pray (SURFWISE, SCRATCH, HYPE!), it reveals the work and wisdom of some of the most influential advertising creatives of our time -- people who've profoundly impacted our culture, yet are virtually unknown outside their industry. Exploding forth from advertising's "creative revolution" of the 1960s, these artists and writers all brought a surprisingly rebellious spirit to their work in a business more often associated with mediocrity or manipulation: George Lois, Mary Wells, Dan Wieden, Lee Clow, Hal Riney and others featured in ART & COPY were responsible for "Just Do It," "I Love NY," "Where's the Beef?," "Got Milk," "Think Different," and brilliant campaigns for everything from cars to presidents. They managed to grab the attention of millions and truly move them. Visually interwoven with their stories, TV satellites are launched, billboards are erected, and the social and cultural impact of their ads are brought to light in this dynamic exploration of art, commerce, and human emotion.








Compfight - locate visual inspiration from many places at once




All writers, content strategists and anyone that structures information for branding or marketing communication should be aware of and inspired by Voice and Tone.


User Personas / Interaction Design / Personas in marketing




*great for small sites to visualize for a client or stakeholder.

Content Strategy piece from KNOL Beta (before they killed it) Evernote FTW 🙂
 

Overview

Content Strategy is an emerging field of practice within the discipline of User Experience Design (UXD). It also describes in a professional context the roles, work products, knowledge, methodology, and perspectives of content strategists.


Content

Content is substance. No matter the platform, publication, or format, content refers to everything that conveys meaning:

  • “Content includes the text, graphics, video, and audio that make up an interactive experience.”—Kristina Halvorson
  • “Technically, Web content can be anything that appears on a website, including words, pictures, video, sounds, downloadable files (PDF), buttons, icons, and logos.”—Richard Sheffield
  • “Information and experiences that may provide value for an end-user/audience in specific contexts.”—Wikipedia[1]
  • “Everything is content.”—Rachel Lovinger quoting Chris Sizemore[2]
  • "Simply put, content is contextualized data."—Rahel Bailie[3]

 

Content Strategy

Content strategy is an emerging field of practice encompassing every aspect of content, including its design, development, analysis, presentation, measurement, evaluation, production, management, and governance.

Kristina Halvorson, author of Content Strategy for the Web [4], defines content strategy as "the practice of planning for content creation, delivery, and governance."

Rahel Anne Bailie expanded the definition of content strategy as "a repeatable process or methodology that manages content within the entire content lifecycle." This definition recognizes that iterative content lifecycles  go beyond delivery and don't necessarily begin with content creation.

In The Web Content Strategist’s Bible, Richard Sheffield emphasizes the importance of editorial process to content strategy.

Agency Content Lifecycle via Erin Scime [5] 

 

Content Strategy: Methodologies

How does one apply this thinking or "do" content strategy? Rahel Bailie shares her methodology:

The content lifecycle is a repeatable system that governs the management of content. The processes within a given content lifecycle  are  system-agnostic. The processes are established as part of a content strategy, and implemented during the content lifecycle.

Aspects of a content lifecycle

The content lifecycle covers four macro stages: the strategic analysis, the content collection, management of the content, and publishing, which includes publication and post-publication activities. The content lifecycle is in effect whether the content is controlled within a content management system or not, whether it gets translated or not, whether it gets deleted at the end of its life or revised and re-used. The analysis quadrant comprises the content strategy. The other three quadrants are more tactical in nature, focusing on the implementation of the content strategy.

Rahel Bailie's methodology for content strategy.

Analysis

In the analysis phase, the content lifecycle is concerned with the strategic aspects of content. A content strategist (or business analyst or information architect or writer) examines the need for various types of content within the context of both the business and of the content consumers, and for multiple outputs on multiple platforms.

The analysis has a bearing on how the content strategy is implemented in the other quadrants of the content lifecycle. On a new project with new content, this is the beginning of the process. Much of the time, the process will start somewhere else in the cycle; a lot depends on a multitude of factors involved in changing content from a current state to its future state.

Collection

Content collection includes the garnering of content for use within the framework set out in the analysis phase. Collection may be through content development - creating content or editing the content of others, content ingestion - syndication of content from other sources, or incorporation of localized content, or a hybrid of content integration and converge - such as integrating product descriptions from an outside organization with prices from a costing system, or the convergence of editorial and user-generated content from social media for simultaneous display.

Management

The management quadrant is concerned with the efficient and effective use of content. In organizations using technology to automate the management of content, the management aspect assumes use of a CMS of some sort. In organizations with smaller amounts of content, with little need for workflow control, and virtually no single-sourcing requirements, manual management is possible. However, in large enterprises, there is too much content, and there are too many variations of content output, to manage the content without some sort of system to automate whatever functions can be automated.

The content configuration potential is enormous, and builds on the information gathered during the analysis and collection phases. The solutions will be highly situational, and revolve around the inputs and outputs, the required content variables, the complexity of the publishing pipeline, and the technologies in play. The most basic questions are around adoption of standards and technologies, and determining components, content granularity, and how far up or down the publishing pipeline to implement specific techniques.

Publish

The publishing quadrant deals with the aspects of content that happen when the content is delivered to its output platform and ensuing transformations, manipulations, or uses of the content. Publishing the content is only a point in the first lifecycle iteration; there are post-publishing considerations such as re-use and retention policies that require attention.

Content Strategists

But the perspectives content strategists bring to content depend strongly on their professional training and education.

For instance, some specialize in content analysis, which roughly describes work with metadata, taxonomy, search engine optimization, and the ways in which the sound application of these concepts supports content.

Others outline web editorial strategies, guidelines, and tools, which may extend to organizational change management. This form of content strategy may be concerned with developing new forms of content, such as multimedia, or various “presence management” technologies like microblogging.[5]

There is yet another stream of content strategy advancing information architecture goals. In this case, content strategy may only involve writing site copy for new website pages and adapting the content on existing ones.

All content strategists are familiar with a wide range of applications and tools, and frequently are responsible for implementing and training individuals to best use them.

Education and Professional Background

Content strategists emerge from a variety of formal academic and professional disciplines:

  • Library and information sciences
  • Computer sciences
  • Creative and performing arts
  • Advertising and marketing
  • Rhetoric and composition
  • Technical writing and communication
  • Journalism
  • Professional editors and writers
  • Communications
  • Liberal arts
  • Management consulting

 

Prominent Employers of Content Strategists

These Fortune 500 or internationally renowned brands employ or are hiring content strategists by name:

Content Strategy: Deliverables

The work products -- or deliverables -- typical of content strategy are diverse and depend on the needs of the company and the background of the content strategist. Shelly Bowen provides this insight:

Some content strategists are also (deep down) writers, editors, designers, or information architects. This background influences not only the strategy, but also the deliverables.

Shelly Bowen also offers this deliverables list as a guide:

What Are You Trying to Achieve?

  • Summary of company goals

What Do You Own?

  • Content inventory or audit
  • Content assessment (quality and quantity)

 

What’s Missing?

  • Content gap analysis
  • Comparative content analysis
  • Competitive analysis

 

How Do You Present the Words?

  • User personas
  • User scenarios (think believable stories)
  • Editorial strategy
  • Core messaging strategy
  • Sample content
  • Content templates
  • Search Engine Optimization (SEO) strategy
  • Brand strategy
  • Metadata strategy
  • Style guide
  • Glossary

 

Where Does It Go?

  • Copy deck
  • Channel strategy
  • Content conversion/migration strategy
  • Content flow schematic
  • Community and social strategy
  • Visual presentation recommendations
  • Wireframes

 

How Do We Make It Happen?

  • Content approval workflow
  • Communication plans
  • Community moderation policies
  • Content production workshops and training
  • Content sourcing review and plans (people, tools, budget, time)

 

How Do We Stay Organized?

  • CMS requirements
  • Business rules
  • Taxonomies
  • Responsibilities
  • Schedules

 

How Do We Know It’s Right?

  • CMS requirements
  • Usability tests
  • Benchmarks
  • Checks and balances
  • Summary of company goals
  • Success metrics

What’s Coming Up?

  • Editorial calendar

Downloadable Work Templates and Guides

 

Consistency via Business Guys on Business Trips [7]

For more books about creating and sustaining meaningful content, see Pybop's book list.

 

Important Articles + Publications

  1. Margot Bloomstein; "The Case for Content Strategy - Motown Style", A List Apart, 18 August 2009.
  2. Kristina Halvorson; "The Discipline of Content Strategy"A List Apart, 16 December 2008.
  3. Colleen Jones; "Make Your Content Make a Difference", Smashing Magazine, 12 April 2011.
  4. Colleen Jones; "Toward Content Quality", UXmatters, 13 April 2009.
  5. Matt Kinsman; "From Editor to 'Content Strategist:' Semantics or Fundamental Change?"Folio, 1 July 2008.
  6. Fred Leise; "Content Analysis Heuristics"Boxes and Arrows, 26 February 2007. 12 March 2007.
  7. Rachel Lovinger; "Content Strategy: The Philosophy of Data"Boxes and Arrows, 26 February 2007.
  8. Jeffrey MacIntyre; "Content-tious Strategy"A List Apart, 16 December 2008.
  9. Jeffrey MacIntyre; "The Next Big Headache for Digital Publishers", PaidContent, 6 August 2009.
  10. Karen McGrane; "Content Strategy: Content Is King!", From Business to Buttons, 11 June 2009.
  11. Peter Merholz; "The Marginalization of Content", adaptivepath.com, 22 May 2008.
  12. Kaitlin Pike, "Why You Need to Hire a Content Strategist", Web 2.0 interview with Margot Bloomstein, 7 July 2010.
  13. Theresa Putkey; "Exploring the Content Strategist Title"Boxes and Arrows, 22 May 2007.
  14. Erin Scime; The Content Strategist as Digital CuratorA List Apart, 8 December 2009.

References

  1. http://www.adaptivepath.com/ideas/essays/archives/000959.php
  2. http://en.wikipedia.org/wiki/Content_(media_and_publishing)
  3. http://www.boxesandarrows.com/view/content-strategy-the
  4. http://intentionaldesign.ca/2009/06/26/a-practical-definition-of-content/
  5. http://www.dopedata.com/2009/07/23/panel-on-the-content-life-cycle-at-razorfish/
  6. http://www.richardingram.co.uk/2009/07/theyll-thank-you-later/
  7. http://businessguysonbusinesstrips.com/?p=111
  8. http://www.amazon.com/Content-Strategy-Voices-That-Matter/dp/0321620062
  9. http://en.wikipedia.org/wiki/Wikipedia:Articles_for_deletion/Content_strategy
  10. http://www.alexwright.org/glut/
  11. http://www.foliomag.com/2008/editor-content-strategist
  12. http://gawker.com/359301/the-future-of-magazines-possibly
  13. http://www.alistapart.com/articles/thecureforcontent-delaysyndrome
  14. http://webcontentstrategy.blogspot.com/2008/08/what-you-need-is-called-web-content.html
  15. http://webcontentstrategy.blogspot.com/2008/08/content-strategy-vs-content-strategy.html
  16. http://blog.pixelmedia.com/information-and-content-whats-the-difference/
  17. http://www.adaptivepath.com/blog/2008/05/22/the-marginalization-of-content/



Contents is an online magazine for readers who create, edit, publish, analyze, and care for the contents of the internet. We publish in open, themed issues that run for about eight weeks. When we’re publishing an issue, a new article appears most Wednesdays.




I like to read fast and absorb faster with every article or book I read. Shit like this inspires me to do that:

GIT shouldn't be hard, here's some ways to make it easier for ya'll
 
The Novices guide to GIT - A version Control system.
What is GIT?
Git is a fast distributed revision control system.
At its most simplest form Git is a tool for storing the history of a group of files. Storing the history of these files as "snapshots" through something you will hear later referred to as a "commit".
On any programming assignment with one or more than one developer often aspects of an assignment are being worked on simultaneously or interconnected in parallel or intersecting ways.
For example you might have a developer writing some javascript inside of your scripts.js folder while another developer just finished polishing off a few functions inside that same file.
The beauty of a repository is it can track the development through multiple parallel lines of development, called branches.
Git takes care of tracking this by keeping a list of “heads” which contain snapshots, or commits as we discussed above.
Keeping track of these revisions along the way can be a life saver during times of conflict. How many times did you name a document FINALfinal.doc only to find that you got rid of an older version which contained important information in it? Git is like a time machine for being able to “rollback” and keep track of the development life cycle of a project.
Getting GIT:
The folks at Github, a hosted Git repository service have provided some great tutorials on the best way to setup and install git.
Some of the Commands and the lingo:
For starters you need to learn how to setup a repo (repository), add files to it, commit those files (take a snapshot), and then push or pull those files if you are connecting them to a server or working with others interchanging them.
First start by opening up your terminal or git bash program depending on what operating system you are using.
The Steps:
In this article we will cover the main steps to working with GIT. For a more in depth walkthrough on git we suggest viewing freely distributed book “Pro GIT” by Github’s Scott Chacon.
●      initialize the repository - this creates a git repository which will keep track of all your coded snapshots in the directory.
●      Set a branch
●      Add files to the repository
●      Commit changes to the repository
●      Creating Branches
●      Merging
●      Conflict Resolution
●      Rolling Back Merges
●      Deploying
opening up terminal and typing
$ git branch
*master
will return the branch master which is the default branch on a project.
In most cases "releases" of an application or project are best stored in tags as they are references to the respective projects history.
These "tags" can be accessed by running the following command
$ git tag -l
v1.0
v1.0.1
v1.0.22
A look into the past.
Any modification or change to the project is stored inside of a commit.
by running the command:
$ git show
you will first see the commit  object name, see who made the change, their message if they left one. For the inquiring minds commits are a 40-hex digit id which is unique in nature.
Seeing the History:
A very easy way to see this history is by running the gitk command which will help you see the history of these commits.
$ gitk
running this will open up the history viewer
Branches:
$ git branch
            List all branches in the git repository
git branch
list all branches
git branch <branch>
create a new branch named <branch>, referencing the same point in history as the current branch
git branch <branch> <start-point>
create a new branch named <branch>, referencing <start-point>, which may be specified any way you like, including using a branch name or a tag name
git branch -d <branch>
delete the branch <branch>; if the branch you are deleting points to a commit which is not reachable from the current branch, this command will fail with a warning.
git branch -D <branch>
even if the branch points to a commit not reachable from the current branch, you may know that that commit is still reachable from some other branch or tag. In that case it is safe to use this command to force git to delete the branch.
git checkout <branch>
make the current branch <branch>, updating the working directory to reflect the version referenced by <branch>
git checkout -b <new> <start-point>
create a new branch <new> referencing <start-point>, and check it out.
Browsing through revisions
$ git-log
this command will show a list of commits.
$ git-config
this command will
Creating a repository from scratch.
$ git init
initiate a new git repository.
MERGING:
git merge branchname
merges the development in the branch "branchname"
Resolving issues:
When issues exist between files files in conflict will open with
<<<<<<<<<< HEAD: filename.xxx
Good ol' hello world
==========
Byebye
>>>>>>> 34983984398493948:filename.xxx
It will show you both lines of code in this block and you will correct and remove the special characters.
One this has been resolved you can add the file into the repository (repo) by running
git add filename.xxx
followed by
git commit
Oops, you messed it up, how to undo a merge:
$git reset --hard HEAD
this will go back pre-merge.
Keeping things running fast.
The bigger the repo gets the more you need to be cognizant of the memory used.
Running the command
$git gc
will compress the git archive to reduce the size on disk or memory utilized by the repository
Checking for corruption. Sometimes for one reason or another files may get corrupted. Similar to harddrives you can run fsck for checking and repairing corruption on a .git repository.
git fsck
similar to fsck for disks checking a repository for corruption is time consuming
Additional Sources: Special thanks to http://www.kernel.org/pub/software/scm/git/docs/user-manual.html#understanding-reachability for some very helpful information.
$ git ls-files -u    List conflicted files after a merge
$git push origin :BRANCH_NAME   Delete remote branch
$git branch -d BRAND_NAME  Delete a local branch (Needs to be done if remote branch is deleted and you want to also delete local branch)
$ git reflog
Shows a list of commits GIT has in storage. Use as a safety net with below command to retrieve ‘lost’ data. Use the commit pointer (e.g. HEAD@{1}) to either ‘show’, ‘checkout’, ‘reset’ etc etc.
$ git update-index --assume-unchanged /path/to/file
You can ignore files with .gitignore but if you have already modified a file before adding it to .gitignore and it is appearing as modified in the index you can remove with this command. Once you have done that you can then add it to .gitignore.
Better git merging techniques:
http://blog.ezyang.com/2010/01/advanced-git-merge/ (See section 2 re: SVN style conflict resolution)
 



 

Apologies for any typos, formatting issues or blatant description lifting I started this in my evernote and didn't have the extra time to invest to correct everything. Special thanks to some of my favorite sites for publishing such great content: smashingmagazine.com, Web designer depot, and of course google for showing my random searches to such great information.