Embed Doc
Copy Link
Readcast
Collections

CommentGo Back

12 Steps to Creating a Professional WebDesign

| Tuesday, January 22nd, 200863 comments Before we share some of the necessary steps used to create a professional web designand website, the following question must be addressed: What constitutes a“professional web design”? More often than not, a web designer or web designcompany claims to offer professional web design services for their clients. However,should they be promoting “web design services” rather than “professional web designservices”? When measuring the professionalism of a web design and website, onemust take into consideration a number of factors/steps:1.Multi-stage web design process2.Project collaboration tools(if project has more than one person involved)3.High-quality design4.Attention to detail5.Current web design technology (CSS)6.Well written, interesting, grammatically-correct content7.Usability8.XHTML and CSS validation (clean code)9.Standards-compliant10.Optimization11.SEO (Search Engine Optimization) friendly12.Abuse of Flash, Javascript, and sound effectsTo put it simply, what separates professional web design from web design is whether or not a designer or web design company takes into consideration the above itemswhen designing and building a website. Other than paying for a respected companiesname and reputation, the items listed above are why professional web design servicestend to cost more than regular web design services - you’re getting a lot more than awebsite - you’re getting the total package of web design professionalism that willsurely shine through once the website is completed and released to the public.The good news is, you don’t need to hire a professional web design company or professional web designer if you want a professional web design and website.Although there is a great deal of work involved, if you’d like to attempt to do theheavy lifting on your own, then the following professional web design tips will helpyou create a professional web design and website.

Note:

You might be wondering why a professional web design company would giveaway their process and professional web design “checklist” for free. The answer isquite simple: there is only so much time in the day, and unfortunately we can’t professionally design every website in the world. The more high-quality, professionalwebsites there are in cyberspace, the happier we as professional web designers andlovers of websites will be. To be blunt,

there is just way too much junk out there.

Letsget started.

Step 1: Multi-stage web design process

We’ve already written anextensive articleon the basics of a professional web design process, so we’re just going to list some of the article’s key points for the sake of avoiding redundancy.

Stage 1: Conceptualization and planning (flowcharts)

When designing a website, one should not begin the process inside of a text editor (BBedit) or website builder application (Dreamweaver, GoLive, etc). Instead, the process should begin on a piece of paper or within flowchart software. According toWikipedia, a flowchart is:a schematic representation of an algorithm or a process.In layman’s terms, a flowchart provides a visual chart illustrating the structure of your website. How many main navigational items will your website contain? What willthese items be called? Will there be any pages contained within the main pages? Whatwill they be called? By planning out your website using a flowchart, you get a headstart on:1.Information organization2.Usability3.Determining the volume of content required

Stage 2: Modeling (wireframes)

In the modeling stage, static “wireframe” mockups are created for each unique web page. To create wireframes, one may use either:

•

paper and pencil

•

mockup software such as Adobe Photoshop or our personal choice,OmniGraffle ProfessionalThese wireframes contain a bare-bones skeleton which illustrate the layout of a particular web page. Where will the logo go? Where will the content be located? Willthere be breadcrumbs? Will you have a login box? Each of these questions (and manymore) are answered in the modeling stage. A few things one should take intoconsideration when creating wireframes:

•

be sure to include all important elements that will be used (logo, navigation,content placement, images/video placement, login box, search, breadcrumbs,etc)

•

reference the flowchart which you created in Stage 1

•

don’t use graphics - wireframes are meant to be bare-bones: boxes/circles/ovals which illustrate the placement of objects

•

only use text to label the elements, don’t use body text (thats for the thirdstage)

•

focus on clean, well-organized, user-friendly layout; avoid cluttered layouts

Stage 3: Execution

The third stage in our professional web design process includes:1.Creating the graphical user interface (GUI), also known as the design2.Creating the content3.Converting the web designs from images into code (markup) which web browsers use to present your website on the InternetIn the final stage, reference both the flowcharts created in Stage 1 and the wireframemockups created in Stage 2 to create the final page layouts and designs. The designshould be finalized in Photoshop or whatever image editing software you choose touse because it is a pain to make changes to the design once it has been converted intomarkup (code).

Trust us, process makes perfect

Following a well-structured web design process is by far one of the most importancesteps that many web designers choose to neglect. By following a web design processsuch as the one we’ve just described, you increase the likelihood that your websitewill be well-organized, easily navigable, and user-friendly. If you’re going to skip anyof the items in our professional web design checklist, make sure that the web design process is not one of them.

Step 2: Project collaboration tools

Note:

If you are the only one working on your project, then you can skip this step.Project collaboration tools are only recommended for projects which have two or more people involved.Communication is one of the most important elements in a project. When multiple people are building a website, there usually are quite a few e-mails sent back and forth between one another. The more e-mails exchanged, the longer it can take to find acertain e-mail and the easier it can be to misplace important bits of information. Thiswas one of the biggest problems that our professional web design company facedwhen we first began - there wasn’t an easy way to organize the e-mails, attachments,milestones, etc.Thankfully, after a little bit of research, we discovered a project collaboration toolcalledBasecamp. Taken directly from the Basecamp website:Projects don’t fail from a lack of charts, graphs, stats, or reports, they fail from a lack of clear communication. Basecamp solves this problem by providing tools tailored toimprove the communication between people working together on a project.Basecamp (and project collaboration tools like it) allows multiple users to access awebsite which stores all of the messages, milestones, file uploads, to-do lists, time ittakes to complete parts of the project, etc. that are associated with a project. No moresending e-mails. Everything is securely stored on the Basecamp servers. The only e-