blog

Project Organization

We are ready to start a new project, project parameters are set, and stakeholder roles are in place. I usually follow the outline below when I start a new project. I’m not saying this is the only way to organize a web project or the gospel according to Matt, but it’s the way I organize my web design projects and works for me.

In the first phase of the development process, we call the “discovery phase” I will start a “New Project” folder; I like to use google drive and a staging server, obviously you can use SugarSync, Dropbox, your own server- whatever you like. My new project folder structure looks like this:

New Project
This folder will hold my information regarding the project.
Working
This folder and its subfolders will house all of our non-public files, logos, artwork like raw photoshop files.
Concepts
Ooh, la, la, the design playground.
Content Audit
Inventory and ranking of existing content.
Content Deck
This folder is the actual content for the new website – a document for each page of the actual site. Copy and images will be placed here for the live site. I’ve found giving clients access to this folder and allowing them to add or view their content helps move the project forward.
Discovery
This will house all of the information from the Discovery Phase; each folder will house questions, methods, links and tools I may use to craft the user experience. Over the years I have accumulated a large toolbox for solving problems, I’ve gathered a lot of good questions that help in the design process and a book that I really like on different methods for different stages of the design process is Universal Methods of Design: 100 Ways to Research Complex Problems. It doesn’t go into much detail but provides a good overview of methods and the links in the book lead to some great information.
My typical Discovery folder has the following sub folders…

  • Accessibility Discovery
  • Audience Discovery
  • Brand Discovery
  • Goals-Objectives
  • SEO Discovery
  • Speed Discovery
  • Usability Discovery
Personas
If I don’t have definite data, I’ll try to sketch a user profile as close as I can.
Prototypes
Usually clickable interfaces derived from the wireframes.
Style Guide
This is where we will define our styles for maintaining the live site.
User Flows
You can lead a user to the content, but you can’t make them click. However, we will try our best to persuade them.
Wireframes
This is the skeleton of our website.
Public
All the public web files, the actual website.

 

System Files
Any files that need to be accessed from the web but I would like to keep out of the public view, like include files, database info.

Download the empty folder structure.

Speed is King, Content is Queen

When people think of the “King” some might think of Elvis or Michael Jackson. Being a redneck-nerd, I think of Dale Earnhardt and a chess king. When talking about the web, a lot of people say: “Content is King”. I’m going to run with my chess theme- I believe “Content is Queen” and “Speed is King”.


In chess losing your queen, is almost as bad as losing the game, you can still play, however, it’s a lot harder to play without a queen. So you can still play with poor content (your game will suck) but, you can’t even play the game without a king. If your site is slow, and not helping the user meet their goals fast, you can’t even play— checkmate baby.

People do not want to wait, and it’s only going to get worse. I don’t see a wave of patience sweeping across the world anytime soon; I’m the worlds worst if I see a loading screen taking too long, I’m gone! Interrupt my goal of finding a burlap teddy for my wife for Valentines Day with a stupid survey, I’m gone! I’m shopping somewhere else. (I’m joking about the burlap teddy). Microsoft seems to think that 250 milliseconds is the magic number for having a competitive advantage.

Speed up your site with lean coding and goal-driven design

  • Obviously hardware, uptime and bandwidth is going to be a factor here. Make sure, your site is fast and reliable. Periodically monitor your site for any changes.
  • Make sure, your page validates. This will make sure users are seeing your content, the way it should be seen.
  • Follow the recommendations of Yahoo and try to score an “A”. Another good resources is Google Page Insights.
  • Avoid the bloat in content management systems and frameworks. When I view the source and see a site loading 12 JS files and 9 CSS files, I cringe. What about those speedy frameworks? Is the latest and greatest CSS framework worth the 200k download? Find out the how many files users are downloading and the size of your page here.
  • Are your goals and your visitors goals clearly defined? Know the main things that people want to do on your web site and make them obvious and easy.
  • Please don’t block first-time users with unrealistic prompts. Why would a first-time user want to sign up for a survey, like you on Facebook or give you their information before they get to know you?

“Every millisecond matters.”

Arvind Jain
Google Engineer

If milliseconds matter, a user might leave a site before they even get to view the content — Speed is King.