Steps In Starting a New Design Project

All Posts, Web Design, Web Development

Square One DevelopmentI think its safe to say that each designer has their own way of doing things. When it comes to how to start a new web design project, there are quite a few ways to get started. I’m not going to say that any one way is right or wrong, but each direction does have its own benefits and trials. For example some starting points may take way more time then they need to and delay the actual development process. While others are have too much of a shotgun approach and may leave you doing more cleanup in the long run then necessary had there been more planning at the beginning.

Let me start off with the way we at Design Theory get started with a new web project. Again, no way is right or wrong, this is just a transparent look into our world.

1. Wire frame: Once your contract is signed and a deposit is paid, our graphic design team starts designing a mock home page. Depending on what the client’s needs and requests are, most layouts are pretty standard. We start off with a wire frame of boxes and rectangles as placeholders for content and images. Logo here, banner there, ads here, text and content here, images there. Once this is created for both the home page and at least one sub page, it will be passed on to the client for approval and signing. We don’t move forward unless we get a signed copy back.

2. Designing the Mock-Up: This part is a little fun because you’ll start to bring in some colors and realistic elements using Fireworks or Photoshop. Any design app that allows you to use layers. Then head over to Lipsum to grab some text filler for page body areas. Use the company logo and position it where you think it will best fit. Try some page backgrounds or menu colors and boarders to see how much more live the design looks. You may also want to design a few other sub page variations as well as the contact us page here too.  Again, you’ll send this phase to the client for approval and signing.

Wireframe 1

3. Slicing: Some call this PSD to HTML, but the concept basically is cutting up all those layers and graphical elements from your design into individual graphic files. For example, the logo will now be saved as its own file with a transparent background, and so will the banner, and the menu boxes minus the text. Slice the navigation bar into buttons or formulate a working htm file for dropdown and linking functionality. You’re pretty much breaking down every part of your design to prep the development team to build the site.

4. Development: This is the fun part. Depending on whether or not your a coder I should say. At this stage you’ve got all the right elements sized or scaled to what they’re supposed to be. The functionality of menus and widgets have been explained and demonstrated so you can do everything you need to in a timely manor without any more interaction from the client. During the build process, you’ll also be checking for browser compatibility, what is actually see above the fold, font sizing, CSS, and overall flow of the each page.

5. Double-Checking: Hopefully at this point there are a fresh set of eyes overlooking the project. Check for broken or incorrect links, image alt tags, site map, spelling, grammar, lines and balance and attention to detail. Within our design firm we’re happy to have a content writer who’s not afraid to pick and tear apart our sites during development for inconsistencies and errors where we may have ignored or missed along the way. (Thanks Yvonne!) After this step is when you’ll want to present a semi-polished preview to your client. Having your ducks in a row will save your client from noticing small errors and focusing on the big picture. In my experience this stage is rather crucial because if you can’t get them to focus on the overall design and functionality, they’ll run you crazy on the minor imperfections that you can probably fix just as fast as they find them while on the phone.

That’s a brief run-down of what we do at our design firm. I hope this is helpful to you. If you have another way on how you start your design projects, please share in the comments below!

Steps to building a website

All Posts, Web Design

Assuming you’ve already signed and contracted your client, the stages of actually building their website can be crucial.  As a fellow web designer I can tell you some of the tricks I’ve learned over the years that I now have down to a process.

1) Domain name. These days domain names are being bought up by the hour, and even the unique ones aren’t safe.  A trend of using country extensions is starting to catch on.  Using .us, .es, or .de to finish out a brand name actually works well when you can’t secure the actual business name.

2) Get the client show you other websites they’ve seen and liked.  Why? Because they will secretly compare your work to that of which they already like from either their competitors or what they’ve found through searching online.  With that, you’ll also find some inspiration for your own design too.

3) Paper and a pencil. Yes you heard right. Before you launch Dreamweaver, or Photoshop, get out your trusty sketchpad and draw out the framework for the site. Start with the home page. Add your banner, your columns, navigation pane, footer, logo and key image locations.  Then draw up the next few pages the same way. This will save you so much time and offer you ways to visualize before you even start coding or working up the site structure on your computer. If possible, also play with some color paletting ideas too.

4) Start bringing the site to life. With having your layout or wireframing done, this next step should be a breeze to put everything together. If you happen to need content from the client, this is the time to secure that. If they’re not ready to provide it (which is also common), Google for for Lorem Ipsum filler.  It may throw your client for a loop when they see it, but it will also stress how much content you actually need to fill the page to suit.

5) Get another opinion on your work. If you’re just starting out, its a good idea to build a network of other more knowledged designers to learn from and also to have them critique your work.  They’ll give you sound and sometimes crucial advice that you may not have noticed yourself.  This may also save you from your client bringing up costly concerns while adding new requirements that were never in the original scope of work. Remember you want to work smart not hard and you never want to have to redo something completely over.