November 11, 2014 - No Comments!

Project round-up for Year One

ArtsDigital Year One

Damn, kid. Year One was busy.

Since we opened shop in October of 2013 we only had a few leads and one solid project on the table. On this side of the timeline, we haven't had a slow moment, and it's been immensely satisfying to work for ourselves. It's scary as hell for a lot of reasons, but nothing beats the ability to call your own shots.

When we started last year we decided to take a lean approach. We determined our long term goals - which are still in place - but the day-to-day "how are we going to make this thing fly" was intentionally open and flexible. At the outset, we focused on some things we new how to do well and were viable - namely WordPress, WooCommerce, Shopify and general Ecommerce development.

We worked in these areas at the beginning, but immediately moved into bigger UX planning and design projects. Since then we've been able to add some satisfying graphic and print design opportunities to the list. So, without further delay, here's a project round-up, in no particular order, of the client work we've done this year:

Upstart Crow Literary

This NYC-based lit agency needed a full site redesign and a bunch of custom functionality. Check out our post on this project in our work section, or visit the site.

2014 ISTE Annual Report

ISTE needed a custom, visually rich, and interactive annual report to share with stake holders and members. We loved this project. Read about it in our work section or visit the live report.

Verizon Mobile Learning Academy

Working in concert with ISTE.org, we developed information pages and a sign-up form sequence for a new online educational platform sponsored by the Verizon Foundation. This project required UX design, page flow architecture, user and admin dashboards creation, and auto-email responders. The launch of the VMLA section coincided with their big annual conference, as well as a complete front-end redesign. We were able to adapt the new-in-the-works style guide and apply their art direction to these pages as well.

Showcaseevents.org

Showcase Events runs holiday gift and gourmet food trade shows in 5 different states. They have individual websites for each show, and needed to convert their original HTML sites to responsive themes on the WordPress platform. We updated sites for Seattle and Tacoma late this summer, and will be continuing the project for the rest of their sites in the coming months.

Skyverge.com

These guys are pros at Woo Commerce plugin development and we highly recommend checking out their products. They needed an assist on integrating a new site theme with WooCommerce functionality, and we were happy to back them up.

Abacus Design

This residential home design studio needed an new site, art direction, copy-writing, and brand communication developed in order to hit the right market. Visit the site to find out what they do.

Firemed.org

This project was headed up by neighboring agency Drawn, and we came in to clean up and expand the back-end programming, bring the user interface into spec, and consult on a roadmap for future improvements and growth.

Sportjournals.com

Sportjournals.com is an online retailer of custom WOD (workout of the day) books for Crossfit athletes. They worked with Portland agency Owen Jones on some branding and a front-end look for their new site built on Shopify. We took the Owen Jones art direction and integrated it with the Shopify platform, as well as worked out their plugin strategy for bulk and custom orders.

 

We have new projects currently in process, as well as some internal ideas we are testing out, but this pretty much brings us up to date. As you can see, we cover a wide range of services, from back end programming to front end design and planning. We are open to any size project, and prefer to find solutions for a given budget over saying a flat no.

If you are trying to decide what areas you need to focus your budget on for the upcoming year, check out our recent post titled "Where to focus budgets for design and web projects."

October 14, 2014 - No Comments!

Where to focus budgets for design & web projects

Focus your Budgets

As companies reach the end of their fiscal year, we get a lot of inquiries regarding potential budgets and project costs. Clients want to build a better web presence, or update the visual design for their company or brand. Most importantly, they need to sell their desires and budget needs to someone upstairs.

The purpose of this post is to lay out some of the key web development and design areas we see most frequently needing help, in order for you to better shape your annual design budgets.

Some organizations have a culture that accepts the “living” nature of the web. They know it’s constantly in flux, and the company leadership knows they need to create annual budget space for their online presence. Others still struggle with thinking of their website as something beyond an expense (rather than an investment - this is understandable, especially if you are bootstrapping your company). Some even shoehorn their online presence management onto an intern task list, thinking it is a menial job that anyone can do “in between real work”.

For a website, the overarching goal should be one of "Is it meeting our customers needs?”

Companies that want to invest in their visual branding should keep in mind that aesthetics are only one piece of the design pie. For a website, the overarching goal should be one of "Is it meeting our customers needs?” This concern alone should be what is guiding your web goals. Visual aesthetics should come after developing solid content and information solutions for your customers. When it comes to your general brand look-and-feel, consistency is key. We will talk about this more in a bit.

Focus your resources

Regardless of your organizations culture, or whether or not you have an ecommerce site or simply a hub for your company info, blog, and social media connections, there are some basic areas you should always expect to be working on regularly:

1. Building better content

If your content is not converting visitors to buyers, or providing some kind of value through information or community engagement, then it is probably driving them away. What differentiates you from the crowd should be clear and to the point, and should entice users to click through to “read more”, sign up for the mailing list, or both. If you happen to be a small startup, focusing on your “features and benefits” copy should be a high priority. You may need to examine your blog content, and make sure it’s the kind of info users are searching for. If you have an ecommerce site, your product copy should be focused on how your product works, and clearly outline key benefits for the user. Don’t just fill the space with marketing hyperbole-- you want to take time to craft relevant information and tell a story.

The more value your content provides, the longer customers will stay on your site.

A site with good content will have a strong foundation to build on. Our approach is always “content first”, and this determines everything from how info and pages interact with each other to providing the structure for your social media and marketing efforts. The more value your content provides, the longer customers will stay on your site.

2. User experience

Your website is a member of your team, and often your first and most effective customer support specialist. If a user has a bad experience on your website, they may not come back. For the uninitiated, User Experience (UX) roughly encompasses the overall experience (which can be both physical and emotional) a user has when they engage with a site’s architecture, information, functionality and visual aesthetic.

User ExperienceGood UX design involves research and planning. The goal should be to understand users’ behavior, what influences them, and how they engage with your site and it’s content. As a result, they should have an experience on your site that is painless and provides value.

Some key areas to think about:

Navigation - Does it make sense? Is it complex and following a logical hierarchy? On bigger sites, updating navigation can be a big job. The bigger the site, the more important it is to ensure your users are not lost. Don’t assume they will dig for what they are looking for. Most likely, if they can’t find it within one minute, they will go somewhere else.

Load times - A sluggish site is a great way to lose users. Google researchers show that page load times more than 400 milliseconds (a blink of an eye) can cause users to leave the page they are visiting

Responsive design - Your site should be available at all times on all devices. A responsive site is “device agnostic”, and this is important when mobile devices are quickly becoming the first place a user may encounter your website. Hint: On your own site, shrink your browser window from the lower right corner. If the content shifts in place and adapts to the new window size, it is responsive. Now, look at that same page on different devices to see if it is adapting accurately.

A messy house is no place to host guests.

Regular maintenance and calibration - Regular audits should be part of the annual schedule. Looking for things like plugins that need updating, broken links that may need a redirect, and missing images are basic issues that may need attention. Keeping categories and tags organized and focused, and making sure your image sizes aren’t slowing things down are also important to look for. These are all small issues on their own, but together can have a big impact on how your online home is perceived. A messy house is no way to host guests.

Visual

Your site should be a clear component of your brand. Through the visual elements, tone of voice, and relationship to your other brand assets it should instill trust and confidence in your users. Is your site inline with your identity style guide (more on that later)? While how your site looks is secondary to how it works, the underlying value of good visual design and it’s relation to a strong brand are very real.

Your website should visually fit with, and support, your other brand assets.

Design is a critical strategic asset that can provide your business competitive advantage, help reinforce customer trust and loyalty. Your website should visually fit with, and support, your other brand assets. Ideally, a design strategy will exist for a business from the very beginning. But it’s never too late to develop a solid identity, create a style guide, and/or unify your company’s visual elements.

3. SEO and Accessibility

Our view is that SEO (Search Engine Optimization) packages sold by a lot of marketing agencies are a bit of a shell game. That said, if you’re not on Google you don’t exist, so the need for a sound SEO foundation and strategy that supports your business model is itself a very real thing. Again, if you are creating content that is based on what you know your users are looking for, you’ve done a lot of the work already.

Salvadore Dali

Good SEO makes it easy for the surrealists to find you.

When it comes to working keywords into your content, keep in mind that your users are searching for you on their own terms, and not necessarily using the same words that your industry may use to talk about itself. Get to know what your users are searching for, and how they’re thinking about your product or service. Doing some keyword research, gathering direct user feedback, and using tools like Google Analytics and can help with this process. This way of thinking should extend into your other channels (Twitter, LinkedIn, Pinterest, etc) as well. Above all, the purpose of keywords is to help users find your content, and should never be obtrusive. Blatant “keyword stuffing” diminishes your credibility and is just plain tacky.

In general, page content and blog posts should contain at least one (relevant) image. Using too many images or trying to mess with the layout (i.e. by using an HTML table to place them where you want them on the page) can make your pages load slowly and look wrong on smaller screens. There are some very good reasons to make well-written content your primary concern:

  1. Pure text looks good on any any device, loads fast, and can be zoomed in or out without pixelation (important for people with vision problems).
  2. It's accessible to the visually impaired via a screen reader program, and can be automatically translated to other languages.
  3. It's easily indexable by search engines. The content is structured with HTML tags that indicate the order of importance of the information.
  4. Social media strategy and reach

The key to a successful social media practice is to first be authentic, and secondly, not make it merely a checkbox on a to-do list. Your social media strategy should fit within the limits of what is reasonable for you and your team to manage, and is at the same time effective for your business.Trying to provide content for every service under the sun will only lead to burnout, and nobody feels confident in finding a business or brand that has inactive social outlets.

The key to a successful social media practice is to first be authentic

Above all it needs to be structured, consistently maintained, and given proper priority to get anything out of it. And please, whatever you do, don’t give the job to your admin assistant or intern.

An authentic social presence means being aware that you are there for your users first. "Being where they are" means being there for them, on their terms. Provide valuable or interesting information that is relevant to your users. Answer them respectfully when they complain or ask support questions, and ALWAYS follow through.

4. Visual Identity and Style guides

Regardless of the kind of project we are doing, we will always begin by looking at a client’s identity. For better or worse, your identity is the representation of your company; the thing that first carries your brand message out into the world. On a project level, it introduces us to the kind of visual framework we, as the creative team, have (or not) to work with. Perhaps your identity hasn’t taken a visual form yet. Maybe it’s only stated in the company mission. Either way, having some definition of “this is who we are” laid out in advance will really help give shape to any design project.

Identity DesignOne area we see companies frequently struggle with is visual cohesiveness. Maybe they are starting from scratch and need a whole identity system developed and implemented. Perhaps they have a great logo, but the website colors and details feel unrelated. Maybe disparate typefaces are used throughout print collateral and on their website.

The visual pieces of your brand or company need to be consistent, yet flexible enough to be able to create impactful communication. Budget-wise, visual cohesiveness should be prioritized within the context of everything else - content creation, copywriting, and social media activity. The development of a style guide can help inform all projects going forward, and save time and money by providing a clear visual roadmap for future employees or vendors working with you.

style guide is a document that can be anywhere from one to hundreds of pages long, depending on your needs. It’s goal is to outline and structure your public-facing voice, including everything from logo-use guidelines to print and web color designations, fonts, website buttons, link colors, etc. Once developed, anyone should be able to reference it and shape their project with clarity, and your identity will maintain consistency wherever it shows up.

Remember, this key is to prioritize budget resources based on need. Don’t do everything at once. We are happy to go through any of this with you or your organization, and help you determine which areas would be most beneficial to focus on first.

If you are on the hunt for a designer, developer, or agency to help you build something awesome, read "The one thing your designer should do for you." It was written to help guide folks make good decisions when hiring creatives.

Got questions about this post? Leave them in the comments below, or introduce yourself via our contact page. We'd love to hear about your project and see if we can help.

 

The End

September 2, 2014 - 29 comments

Exploring the Twitter API with Meteor.js

Exploring the Twitter API and Meteor.js

The Twitter API is thoughtfully designed, and the data set that it provides access to is incredibly rich.

I wanted a super quick, no-fuss way to retrieve, process, and display tweet data on the web, and have been obsessed with Meteor.js ever since I started using it on our pet project Songnotes. It's easier to set up an app and run a dev server than any other method I've encountered, and it keeps everything in JavaScript, meaning that I can display the data directly on the web with no intermediate hassle. Plus it just feels so cutting edge. Since I didn't find a straightforward tutorial on how to do this elsewhere on the web, I've outlined the steps I came to below.

Step 1: Create your Meteor app

If you've never tried Meteor before, the simplicity of installing it and creating your first app will blow your mind. You can follow the quick start, or try the tutorial on creating an example app first if you prefer.

Step 2: Obtain a Twitter access token

In order to access the API, Twitter requires an access token. There are a number of ways to get one depending on what you expect to be doing; I opted for the standard single-user developer token because it was easy to obtain and would give me all the access I'd need for the kind of data mining I want to do.

Step 3: Install a Twitter API client library

There are several different wrapper libraries to simplify access to the Twitter API  from Node (Meteor runs on a Node server, FYI) and twit seemed to be the most concise and straightforward to me, with a fairly large user base and frequent updates.

First enable NPM modules in your Meteor app

Running pure Node packages in a Meteor app requires first installing support for non-Meteor npm modules within your Meteor app:

meteor add meteorhacks:npm

Then add the specific package you need

Create a file called packages.json in the root of your app and add the package name and version number (1.1.19 at the time of this writing):

{
    "twit": "1.1.19"
}

And you're ready to go! Let's write some code.

Step 4: Do a test query

Open up myapp.js (or whatever the name of the main app file is that you created in Step 1), and edit the following section:

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup

  });
}

to look like this:

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup

    var Twit = Meteor.npmRequire('twit');

    var T = new Twit({
        consumer_key:         '...', // API key
        consumer_secret:      '...', // API secret
        access_token:         '...', 
        access_token_secret:  '...'
    });

    //  search twitter for all tweets containing the word 'banana'
    //  since Nov. 11, 2011
    T.get('search/tweets',
        {
            q: 'banana since:2011-11-11',
            count: 100
        },
        function(err, data, response) {
            console.log(data);
        }
    );

  });
}

filling in the '...' bits with the keys you obtained in Step 2.

It's important that sensitive information like certain API keys only be used within a Meteor.isServer block (or in a server-only file) in Meteor, otherwise your keys will be visible for all the world to see.

Now run your app by typing meteor on the command line from your app directory. If all went well, it should spit out a ton of json-structured content along the lines of

 { statuses: 
    [ { metadata: [Object],
        created_at: 'Mon Jun 23 04:06:56 +0000 2014',
        id: 480924945586069500,
        id_str: '480924945586069504',
        text: '@Nukes_Pringles banana',
        source: 'Twitter for iPhone',
        ...

Twitter is talking to us! Sweet. There are are more example queries to experiment with over at the twit github page, and in a future post I'll talk about what we might actually do with this data and how to display the parts we want on a web page.

Updated 1/27/2015 to use the latest version of Meteor, 1.0.3.1.

April 23, 2014 - 2 comments

Relaunch – ArtsDigital.co v.2

AD_homescreen

We are pretty excited to share the redesign and relaunch of ArtsDigital.co.

Brand Spanking New Newness

As we announced in early March, the first version of our site was practically hacked together overnight. Within a week we had started comps for what we thought it should really be like, and BOOM. Here we are. Paul did a bang up job getting all the ideas to work, or alternatively saying, "Dude, you're insane, let's compromise".

"Dude, you're insane, let's compromise".

Compromise happened. It's why we work together so well.

Conceptually speaking, we wanted to use the colored bricks as a metaphor for the way ideas can increase and change during the creative process. We also wanted to break away from the standard home page styles you see now days. They have their place, and we happily design that way when the project calls for it. But for us, we felt we needed to create a unique, digital point-of-entry. The home page of any website most often functions like an index, and may not even be the entry point to the site for many users. Here we take that notion of an index quite literally. It's an unconventional approach, and certainly an experiment. Come back in a few weeks and we'll probably have even made more changes.

Design Everything. Collaborate Often.

AD_workWe've also expanded our offerings. For years I've been moonlighting as a freelance designer, and I've finally moved my print and identity services over to our studio. If you have been a past client of mine, have no fear, I'm still available, and better able to help you expand your graphic architecture into the digital space.

We are a small shop... but we don't consider any project too big.

We want to be the interactive design studio you call when your brand, product, business or organization needs graphic and digital development. If you need a complete redesign for your print collateral, we can do it. When it comes to the web, we can do small business sites as well as big ecommerce projects.

We are a small shop, which has a lot of advantages for our clients. You will be dealing with the folks who are actually doing the work. We don't consider any project too big. If required, we have a solid network of talented collaborators we bring in when the job calls for it.

Relaunch Details

So, as you click around, here's a short list of cool things to look at:

  1. If you landed here first, click over to our home page and drag your mouse around, then refresh the page to see the colors change.
  2. The updated portfolio (as mentioned above).
  3. An updated contact form to help you clarify your needs.
  4. Our About page is packed with info.
  5. We've added a Labs page so we can share our side projects and the range of our thinking.

Please give us a shout out in the comments below. Of course let us know if you see any problems, typos or broken links. Find us on Twitter, LinkedIn, Tumblr and Facebook. Most importantly please share us with your friends and colleagues.

March 11, 2014 - No Comments!

ArtsDigital Spring 2014 News – Design Studio Launches then Proceeds to Get Super Busy

The ArtsDigital team at workIt’s been a monumentally busy few months since we launched our design studio this past fall. We wanted to post an update about what's been happening and what's coming up in Spring 2014.

Client Projects Launching soon

To date, our projects have included a WooCommerce integration for a software developer in Philadelphia, a site redesign for a literary agency in New York and a new site for a Portland-based web startup. These projects are all in their final stages, and we’ll be firing warning shots across the internet's bow when the go live.

Keep your head down.

ArtsDigital.co v.2

Screenshot 2014-03-06 16.42.21

We launched the first version of our site back in November of 2013. We had both recently gone out on our own and had bills to pay, so we hacked something together (only one theme was harmed in the process) and built v.1 practically overnight. Almost immediately we had better ideas for how it should look and who we are as a studio.

We've spent some time sorting out our mission and values as designers and what kind of site would reflect that. We are happy to say we have a new design-from-scratch in the works and are planning on pushing it live by the end of this month.

Service Updates

MoronesAnalytics09Along with this new site redesign comes some additional services. For years I've been freelancing as a print designer, and we're pretty excited to be able to round out our projects with cohesive identity and print campaign capabilities.

If you need a brand refresh, a logo and branded print materials all by their lonesome, or a top down identity, website and horse trailer graphic wrap (never done one, would love to) then we can do it.

Get on the ham radio and give us a shout.

New Internal Project - Songnotes

songnotes_iphoneBoth of us have been musicians for as long as we can remember, and songwriting has always been in the mix. One day we were talking about the songwriting process and how we used to use mini cassette recorders and spiral notebooks to keep track of our song ideas. Paul had the idea to model an app after this experience, and boom - Songnotes was born.

At its core it will be an easy way to capture song ideas in the form of audio and lyrics, and will help musicians keep the creative process flowing uninterrupted. Once that's in place, we have a truckload of ideas to expand on that core experience with some useful tools and integrations.

We want to use Songnotes to extend our experience with user interface design and development while building a tool that we want to use ourselves. We'll be taking an agile development approach, releasing improvements and gathering feedback as often as possible.

Hang on to your wigs and keys.

 

October 2, 2013 - No Comments!

Welcome to Artsdigital.co

AD_welcome

It's Go Time.

Welcome to Artsdigital.co - a brand new design studio located in the Pacific Northwest. Our goal is to provide businesses, organizations, brands and startups of all sizes solid design - in digital or print.  Collectively we've got nearly 20 years experience in design and on the web, and we can't wait to get started on your project.
A few things we are good at:

  • Custom web and theme development (from small sites all the way up to big ecommerce and complex membership sites)
  • Identity & Print Collateral Design
  • WooCommerce and WordPress Customization
  • Digital Strategy and User Experience

So who are we?

Courtney Stubbert (design) and Paul Fernandez (development), that's who. Just two dudes who, after working together for another company, decided we would be better off going out on our own. We wanted more control over project planning and outcomes. We wanted to have the flexibility to pursue the kinds of internal projects (and schedule) that not having a time card allows. Mostly, we wanted to work on a broader range of projects for good people, on our own terms.

So, get in touch with us. We are always happy to meet with prospective clients and collaborators, virtually or in real life (we'll buy the coffee) and hear about what you are doing.

If you are on Twitter you can follow us @Artsdigitalco,  @getpunched, and @paul4nandez.

In case you aren't excited enough, here's Jean Claude Van Damme. Baking. Making music. Chillin'.

It's go time.

Welcome to ArtsDigital