Latest Twitter Update:





These postings are mine alone, have not been reviewed or approved by Sony Online Entertainment ("SOE"), and do not necessarily express the views of SOE.

Rapid Site Creation

Presented at FITC Conference 2006 in Hollywood, CA on 10/5/06 by Jacob Robinson

Disclaimer:

The views expressed are solely those of the author/speaker and do not reflect the views of Sony Online Entertainment LLC.

Overview

This presentation is about the reality of many web projects that are produced in-house. Where the work is endless since the salaries and benefits are already being paid for and it’s less expensive than outsourcing. Where, if you’re running a small web agency, that small last minute project could mean you’re going to still be in business for a few more months until the next project comes by. There are a lot of studios and web teams out there that are small and don’t have the generous deadlines that some of the larger studios may have.

This is especially important for in-house teams who cannot charge extra for additional changes, feature creep or even more cycles beyond the original scope of the project. And at times, no budget to farm aspects of the project out to.

It can become quite depressing looking at some of the most amazing web sites, and think “man, if only I had the time or more people to do this.” Don’t worry, you’re not alone – it’s a reality for many designers. This presentation will hopefully provide you with a new outlook.

The projectHow did it come down to this?

This is the first question that comes to mind whenever we get those last minute project details from the customer or product manager. Of course, if you say no, then there’s hell to pay, right?

You’re starting to become jaded. This keeps happening to you, you keep wondering “when is this going to ever change or improve? There’s a problem with the process. People aren’t planning and they are out of control and should be fired for their incompetence. They should not be allowed to use a computer or hell, even the internet!” You walk to the fridge and get a Red Bull and are calmed down for about 20 minutes when a co-worker strolls over and says “Hey, I heard about that last minute project, what’s up with that? What are you going to do?” That’s when it hits you, you decide to quit. OK, maybe you didn’t go that far, but you were pretty upset, right? I’ve been there, we’ve all been there in some way or another. We all value our jobs and know that there are times that we can’t say no, we can only complain and whine until your manager tells you it’s going to be alright and that they’ll try to fix the problem.

Now that I’ve got you all riled up and remembering every bad project that came your way or that you’re playing hooky on now to come to the conference, let’s talk about a few reasons why these things happen.

  1. Poor Planning
    As I mentioned, a great percentage of these are due to poor planning. Poor planning leads to many problems including a decrease in quality, scalability, creativity and even reward. There are little designers that actually like their work after last minute projects. These people should be fired! Ok, maybe not, but again – there’s a reason that this project came about and its deadline is unable to move, right? Right.
  2. Opportunity Knocks
    Do you remember in Mario, where that little platform swings towards you and you’re just about to jump when you freak out since you think you’re not going to make it and don’t jump? Then you’re a little frustrated that it’s taking forever to come back for you? That’s how many opportunities work in our world. A great example is my blog – I didn’t have a personal site, but wanted individuals to have a place they can go to keep in touch with me (I like to network) in time for a presentation. If I waited on creating the blog, I wouldn’t be able to stay in touch and would have missed out on an opportunity. Business minds live by this every day, and they want people to turn on a dime and the reality is, it really does work.
  3. Critical Mass
    What happens when a company is successful? It grows and buys other companies or creates many new products or services that end up getting dropped on your desk to figure out. I’ve been through this a number of times where the company I worked with purchased other brands that were just about to release. Of course, a product or service without a web site is a product that probably needed more time – but in a world where financials could make or break you, we need to understand the reality.
  4. Contractual Obligations
    Ahh, the contracts. The part in the contract where it said you were supposed to create three newsletters and a mini-site by a certain date, and no one told you about it until a few weeks before that date? The insanity– but you don’t want to get sued do you?
  5. Tis� The Season
    During the busy seasons – typically from September through December, there’s that craze of trying to get product information and press releases out the door before everyone else for holiday shopping is a big priority for Marketing, Sales and Biz Dev. There are also annual industry trade shows that companies like to prepare for.

Keep a flexible process

Processes are made to be broken – Ok, maybe not, but they can definitely be flexible, and in a creative environment they should always be flexible. No project is ever the same, unless you’re purely in a production environment that does only one type of project, such as a template company – hence strict processes typically fail or cause more arguments and debates than is necessary for the actual work itself.

Your process should be solid and practiced often, but you should be able fall back on a thinner process which is typically “protected” if you will, by management as they understand much more that you need to change some steps along the way and that there is less flexibility because of your crunch.

However, flexibility doesn’t mean being flexible enough to throw away your entire process and do exactly as your customer tells you – it’s your job on the line if you screw up. Use common sense – compromise as you feel is necessary for the better good of the project and the success of the project. If you honestly feel that there’s a step in your process that cannot be skipped by all means, then don’t skip it.

If you don’t already have a process set, you should definitely build one. I’ve spoken with many artists and designers in smaller companies who just ‘wing it’, and about mid-way into the project, they are still in the conceptual phase and aren’t sure where to go next.

Speeding up your design process and creativity

Having built hundreds of sites, I’ve experimented quite a bit with different techniques with getting starting on designing web sites. It was always painful working on short deadline sites and no ideas on how to pull something off that’s creative and original (if you can call that many sites original with so many standards these days). I’m going to lead you through some techniques that I’ve found useful for myself, as well as for my artists who at times can get a bit of a creative block and end up wasting endless hours getting no where with their work:

  1. Gather Your Objectives/Needs
    First and foremost, you need to understand what you’re building. This shouldn’t take you long, and you don’t need to know every detail, but you should have a good idea of what this site’s purpose will be, and what people are going to want to see. You should also understand how people should view the site. For example, if we’re working on a new expansion for a game about dragons that has minimal assets, we still need to communicate that this expansion is about dragons – so we know some things we can work off of – scales, flames, dragon eyes, smoke, red, etc. Put these objectives and keywords on a single page and work off of it.
  2. Get some Inspiration
    Not looking at other art is fine every now and then, however some of the best artists in history have received their inspiration from reference material, whether it be an object in front of them, or a photographic of someone posing. I discovered a quote by Marc Silvestri to one of the quickest rising stars in the comic industry that I found to be a great testament that reference art can take someone who appears to have no talent, to a name that nearly everyone in comics today recognizes:

    “My great contribution to the career of a man, who would reach the top of his profession, was that no one ever told him to use reference before… I’m a genius.”
    -Marc Silvestri, Forward to Michael Turner’s Fathom

    Where do you get inspiration? Of course, start with web sites. My team browses competitor game sites, movie sites and The FWA on a daily basis to see what other designers are building. Also look at advertisements, commercials and magazines for layout/color scheme inspiration.? 

    Does that make you a copy cat? That depends. If you’re ripping someone off by replicating what their doing, changing a few buttons and graphics and calling it your own. Yes, and by all means take it down. Inspiration means being inspired to create your own product by viewing the creativity of others. Take a cell phone as an example – one could look at a cellphone and think  “man, that was such a great idea to make a mobile device, I should do a handheld GPS or a handheld computer!” Don’t copy people.

  3. Stay Basic, then scale
    I’ve found the most challenging aspect of coming up with new ideas is to imagine an awesome site design, then try to launch Photoshop and just do it. You can get pretty close if you tried, but it doesn’t always come out the way you pictured. I personally like to start with the basics, then add polish to it/revise and build the final version – but that’s where sketching and wireframes come into play. I’ve found that sketches are the quickest way to get concepts together in a short amount of time, and they typically come out great. If you’re a horrible sketcher, you might want to try wireframes.
  4. Get your drafts out for review early
    If you have an idea you’re liking, run it by your customer sooner than later. Most customers like choices, but during times like these, they would much rather have their site on time and work with you on getting something together that looks good. Show them your wireframe or sketches and present your idea to them. If they don’t like it, start over and gather some more information from them, then come back to them with a revised version. Depending on the size of your site, you’ll find yourself in Photoshop completing the site design in no time, with clear direction – rather than wasting endless hours with a thousand layers, trying to get it just right.
  5. Build a style that you can fall back on
    Every designer I’ve met has had a fingerprint type style to their designs – even with my own team, I can easily tell who to assign certain games, as I know that that their style is going to mesh the best for that game. Styles could mean anything from very photo realistic designs, grunge, hip hop to corporate, feminine, techie or fantasy. It could also mean typical font treatments and depth styles such as many bevels, flat, 3D, shaded, rounded, square, etc.? 

    Use your style when you can for quick turn around projects. Don’t try to stray too much, unless you know you can risk the time.

  6. Limit Your Concepts
    As I was saying earlier with getting your drafts out earlier and not giving your customer too many choices, limit your concepts. If you can, do three sketches and present them to your customer and explain what you were thinking for each. You might be surprised to find that they really like one of them, or that they now have a very specific idea now that they’ve seen your samples. Give them the pen and let them draw, then take it from there. Of course, you art directors out there should be telling them if it sucks or not. Most customers will not be upset if you think their idea isn’t all that appealing – they would rather hear that now, than later when their visitors start emailing them, or their industry friends call them and ask them who on earth designed their horrible looking site and to never use them again. Yeah, not good. 

    Another thing I do, when I am struggling with gathering what the customer is really wanting from us if we don-t have a lot of time to pitch something to them, is have them give us a selection of URLs to sites that they really liked. We will get an idea of what they are looking for – typically in that they like the style, color scheme, dimensions or even the dynamics of the site.

Speeding up your production time

  1. Polish last, cut corners where you can
    A number of designers have fallen into the same trap over and over and that is being able to manage polish versus the base requirements of the project. I’ve seen people spend days on elements such as pre-loaders, transitions and rollover effects before the other sections of the site are ready – which, unless you have a generous deadline, is going to greatly affect the progress of the site and also cause other sections to seem unfinished as the deadline draws closer and closer. The way I broke myself out of this same habit of spending time in areas you are having the most fun in, is to break out my own milestones and really figure out when I can be spending time on polish – budgeting my time appropriately. 

    For example, let’s say you have a web site that has five pages. You know that the site really just needs those five pages to be working and functional within a week for approval, and by the middle of the following week it needs to go live. The project is simple – it will require art, copy, flash and html work. You can break these five elements down into the amount of time you should be spending on each. The following is just an example, let’s not try to get too realistic here or number crunching!

    Art will take at least: 1 day
    Copy will take very little time: 0.5 days
    Flash will take the most amount of time, so we’ll place 3 days
    HTML will likely take less than a day: 0.5 days
    Approvals/Changes/Polish: 2 days
    Total Days: 6

    If you are still on art by the third day, you know that you’re probably not going to be able to make your one week deadline unless you speed the other areas up dramatically. Spend your polish time last, as that is something you can certainly do after the site launches if you need to, without risking the project itself because you forgot to add a rollover to one of the menu items.

  2. Use a checklist and prioritize
    When I am wrapping up my flash for review, I typically crack open an excel document and list out all of the items that I need to do for the site, in order for it to be considered complete. I also add in all of the polish elements I’d like to have in on the site. For each of these items, I place a time estimate of either an hour or a half hour, so I can avoid making guesstimates and really know how long I’m going to need to be spending on this site, and how much time I’m going to need for the polish. 

    When you look at this excel document, you can see where you need to cut corners or lighten the load. Is a dagger flying through the air, hitting a potato and landing on a guy walking across the screen really necessary? Probably not, but you can still have the guy walking across the screen for half the level of effort. Get where I’m heading with this?

    In addition to this list, you can easily convey to your customer in their own sense (text, bleh), how much time it’s going to take for you to do various tasks. If they try to feature creep on you, you can tell them – “hey, that is going to take me another 5 hours, this means we’re going to have to pull something else from the site.”

  3. Use components and re-use old work/standards when you can. Why re-invent the wheel?
    As stubborn as many of you designers are, you need to remember that there is a huge community out there building tutorials, tools and widgets for others to use on their sites. As great as it may be to call everything your own on a site, you don’t have to build it yourself in order for it to work. How far do you really want to take it? You didn’t build the IDE and every class that’s in it, so you shouldn’t be afraid of using someone else’s code if they are giving it to you to use. 

    This also means old work you’ve done. I can’t count the number of times my team has built new ‘media’ sections on our game sites or even a music player, which in reality, all function the same in one shape or form.

    When it comes down to it, it’s all about budgeting your time. Would you rather spend an hour or two building a new media player that’s one of 100 objects on your site, or an hour or two building 30 of the objects on your site? Very simple.

  4. Gather assets from your customer when you can
    Have your customer help you gather assets you might need for the project. Don’t assume that all of the work is on you. Whether they are an internal customer or an external customer, they can probably help you – especially during a time like this.
  5. Communicate!
    Don’t just sit there, do something! No, really – talk to your customer and let them know where you’re at with the project. It’s better to be proactive about your communication than to wait for them to come calling and bugging you, then wasting an hour on the phone with them trying to calm them down or them getting involved in areas that they should not because they have lost confidence in your ability to manage. 

    Let them know if you’re gated, having problems getting something to work, having problems with understanding the direction – whatever it might be. Don’t wait until the following day to let them know you’ve been waiting on something, just to poke at them.

How to Schedule Your Project

  1. Define the Steps / Milestones
    Every project is different, you need to identify the work that needs to happen and break it up into milestones. Don’t forget about work that needs to happen by others – this is a common mistake.
  2. Define the Approval Process and Stakeholders
    Define who needs to be involved in the end – and really question who needs to be involved to avoid having too many chiefs.
  3. QA Plan and Launch Prep
    Think about what needs testing, and consider to what level. Also determine whether or not B and C bugs can stay.
  4. Launch & Promote Plan
    Don’t forget, you need to tell people about the site, as well as ensure the files go live.

Pitfalls and Dangers of Rapid Project

You need to inform your customer of the obvious pitfalls and dangers of not having enough time for a project. This includes:

  1. Scalability
    Remember that menu that can only fit 5 buttons because you thought you only needed 5?
  2. Errors
    What? That scrollbar doesn’t work with a mousewheel?
  3. Quality
    Big download? Alignment not all there?
  4. Localization
    Graphic text and no XML = more work.
  5. Organization
    Files and the layers and code within them can become very difficult to maintain.
  6. Morale
    We’re very passionate about our creations.
  7. Creativity
    No time to think/experiment.

Questions

I hope you found this presentation useful and provided you with a new outlook for your projects. If you should have any questions, drop me a line at jacob@darknews.com!

// Jacob