SU!Before we share some of the necessary steps used to create a professional web design and website, the following question must be addressed: What constitutes a “professional web design”? More often than not, a web designer or web design company claims to offer professional web design services for their clients. However, should they be promoting “web design services” rather than “professional web design services”? When measuring the professionalism of a web design and website, one must take into consideration a number of factors/steps:
- Multi-stage web design process
- Project collaboration tools (if project has more than one person involved)
- High-quality design
- Attention to detail
- Current web design technology (CSS)
- Well written, interesting, grammatically-correct content
- Usability
- XHTML and CSS validation (clean code)
- Standards-compliant
- Optimization
- SEO (Search Engine Optimization) friendly
- Abuse of Flash, Javascript, and sound effects
To 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 items when designing and building a website. Other than paying for a respected companies name and reputation, the items listed above are why professional web design services tend to cost more than regular web design services – you’re getting a lot more than a website – you’re getting the total package of web design professionalism that will surely 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 the heavy lifting on your own, then the following professional web design tips will help you create a professional web design and website.
Note: You might be wondering why a professional web design company would give away their process and professional web design “checklist” for free. The answer is quite 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, professional websites there are in cyberspace, the happier we as professional web designers and lovers of websites will be. To be blunt, there is just way too much junk out there.
As a supplemental resource, visit our H2O Playlist on Professional Web Design. We’ve added some of our best articles, as well as other resources which will help you build a better website.
Step 1: Multi-stage web design process
We’ve already written an extensive article on 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 to Wikipedia, 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 will these items be called? Will there be any pages contained within the main pages? What will they be called? By planning out your website using a flowchart, you get a head start on:
- Information organization
- Usability
- 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 Professional
These 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? Will there be breadcrumbs? Will you have a login box? Each of these questions (and many more) are answered in the modeling stage. A few things one should take into consideration 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 third stage)
- focus on clean, well-organized, user-friendly layout; avoid cluttered layouts
Stage 3: Execution
The third stage in our professional web design process includes:
- Creating the graphical user interface (GUI), also known as the design
- Creating the content
- Converting the web designs from images into code (markup) which web browsers use to present your website on the Internet
In the final stage, reference both the flowcharts created in Stage 1 and the wireframe mockups created in Stage 2 to create the final page layouts and designs. The design should be finalized in Photoshop or whatever image editing software you choose to use because it is a pain to make changes to the design once it has been converted into markup (code).
Trust us, process makes perfect
Following a well-structured web design process is by far one of the most important steps that many web designers choose to neglect. By following a web design process such as the one we’ve just described, you increase the likelihood that your website will be well-organized, easily navigable, and user-friendly. If you’re going to skip any of 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 a certain e-mail and the easier it can be to misplace important bits of information. This was one of the biggest problems that our professional web design company faced when 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 tool called Basecamp. 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 to improve the communication between people working together on a project.
Basecamp (and project collaboration tools like it) allows multiple users to access a website which stores all of the messages, milestones, file uploads, to-do lists, time it takes to complete parts of the project, etc. that are associated with a project. No more sending e-mails. Everything is securely stored on the Basecamp servers. The only e-mails you will ever receive are notifications whenever something is contributed or changed within a project.
Basecamp has packages available that can be tailored to suit your needs. If you only need to use Basecamp for one project at a time, then you can signup for free. Unfortunately with the free version, there are no file uploads allowed. However, for a measly $12/month, you can control up to 3 projects at once, have 250 megabytes of file upload space, have unlimited people and clients, have a real-time chat that can easily be integrated into Basecamp, and much more.
When it comes to project collaboration and communication, nothing beats a web application like Basecamp. If you’re serious about your project and want to have the best communication possible, then you must try Basecamp. A project collaboration tool such as Basecamp is especially useful for a professional web design company which handles a number of projects and clients at any given time. For project collaboration, there is simply no better way to communicate.
Step 3: High-quality design
Who and what determines a “high-quality design”? There isn’t one answer. Often times something that is appealing to one person may be extremely unappealing to another. Despite this fact, there are several things that a high-quality design should have:
- Balance. Balance refers to the equal distribution of the heavy and the light elements on a single page.
- Unity. Unity keeps all of the similar elements in the website alike and those that are diverse further apart; everything should be pulled into one integrated whole.
- Emphasis. Emphasis involves the main points where the eye is drawn into the design; also known as “focal points”.
- Contrast. Not just color contrast, but also contrasting shapes, sizes, textures, and even typography.
- Rhythm. Also known as repetition, rhythm brings internal consistency into your web design.
Since this is a broad topic and cannot be fully covered in this article, you can read more about the five basic elements of web design.
In addition to these five basic elements of web design, information overload is often times one of the biggest killers of a website design. Designers sometimes forget the saying “less is more” and somehow seem to believe that the more information that is stuffed onto one page, the better it will be. Don’t become a victim of information overload. Keep your layout as clean as possible. Give different topics their own dedicated web pages. One of the biggest causes for information overload is not successfully planning out your website layout through the use of flowcharts and wireframes, discussed above in Step 1: Multi-stage web design process. Remember: white space is not necessarily a bad thing. As a matter of fact, white space is your friend, especially when creating a professional web design. Successful professional web designers learn how to use white, negative space to their advantage, and make it a key element of the design.
Step 4: Attention to detail
When professionally designing a website, every little detail is thought out and planned. Should there be a line above the headers, and if so, why? If you use rounded corners for your main body, should you be consistent and use rounded corners for everything else? Does your logo look better with a reflection underneath? The only way to answer any of these questions is to experiment. Sometimes the best results come from accidental experimentation. Don’t always be happy with the first design. Work to improve upon the design and go through a few revisions, each time asking yourself “What can be done to make the design look better?”, be more consistent, and most importantly, give your website a stronger identity and image.
When we say “detail”, we’re not just talking about graphic design elements. No, graphic design is just the tip of the iceberg. We’re also talking about typography (font faces i.e. Arial, Verdana, Trebuchet MS, font sizes i.e 10 pixels, 12 pixels, 18 pixels, font weight/style i.e. bold, italic, font placement), the use of negative space, and other elements of design.
Attention to detail is important because it is oftentimes the details in your design which make your website stand out from the competition (or from other websites in general). People get bored with the same old design – give them something different, unique, and attractive, and they will come back and visit. Heck, they may even become inspired by your design.
Remember: Less is more. Use details, but don’t abuse details.
Step 5: Current web design technology (CSS)
CSS – also known as cascading style sheets – replaced table-based website layouts years ago. The problem is, a lot of web designers are still using tables to create their designs. Not only is this unprofessional, but tables just plain suck. Here are a number of reasons why using tables for your web design is a bad idea:
- Tables slow down your website. Everything inside of a table’s cell is loaded before being shown to the user. This is especially apparent for people using dial up connections.
- Tables make messy code and add unnecessary junk markup. File sizes are increased due to the excessive lines of code which means slower load times. Also, having to sift through hundreds (sometimes thousands) of lines of code just to make a change isn’t a lot of fun.
- Universal layout updates are difficult and time consuming when using tables. Making universal edits with tables involves opening each file, sifting through the code and junk markup, and making a change (again, on each page). Often times with CSS, all one must do is open the stylesheet and change a single value.
- Tables should only be used to show data, not be used to design websites.
- Tables limit your creativity and design. Table layouts are limited to boring, grid-based layouts. With CSS, you can place anything anywhere. The layout possibilities with CSS are endless.
- CSS will save you time and increase your revenue in the long run. Updates and edits are much easier using CSS than tables. Because of faster load times, fewer visitors are likely to become impatient and leave. Longer visits = more browsing, more ad-clicking, lower bounce rates = more money for you.
- Display your CSS website on tons of high-quality CSS Showcase websites. Tons of exposure if your website is featured. Table-based layouts are not welcome. Complete list on listible.com.
Some people will argue that table-based layouts are better than layouts which are built using CSS. However, oftentimes the person arguing that tables are better than CSS is the person who spent thousands of dollars on a table-based layout. Despite what anyone tells you, table-based layouts are inferior to CSS and should be avoided at all costs.
To read all about CSS, visit w3schools.com. Again, to be blunt, if your website is created using tables, it is not professional web design quality. Start using CSS stylesheets today and keep the tables in your spreadsheet application.
Step 6: Well written, interesting, grammatically-correct content
One thing that greatly compromises the quality and credibility of a website is poorly written, grammatically incorrect, misspelled content. This kind of content is unfortunately present in an extremely high number of websites – especially “professional” company websites.
If you don’t know how to write, then hire someone to write the content of your website. You’ll thank yourself later. Even if you do know how to write, mistakes are easy to make. Run through your content a few times to confirm that everything makes sense, is interesting, and is spelled correctly. You’ll look more professional and people will take what you have to say more seriously.
Step 7: Usability
Website usability is extremely important. According to usability.gov:
In general, usability refers to how well users can learn and use a product to achieve their goals and how satisfied they are with that process. Usability, as defined by Joseph Dumas and Janice (Ginny) Redish, means that people who use the product can do so quickly and easily to accomplish their tasks. Usability may also consider such factors as cost-effectiveness and usefulness.
If website usability is poor, then people can easily become frustrated and leave your website. A great deal of importance must be placed on website usability if you want your web design to be of professional quality. It is usually poor usability which separates the regular websites from the professionally designed websites. Usability is the most important element of a professionally designed website.
For a wealth of information regarding website usability, visit usability.gov and also read our Dos and Donts of Website Navigation Usability.
Step 8: XHTML and CSS validation
Some people will argue that validating your website with XHTML and CSS validation from W3.org is a waste of time. To be blunt, they are wrong (for a number of reasons).
- Accessibility. Without accessibility, you run the risk of being sued. For example: a disabled person who cannot use a “conventional” browser can sue you if your website is inaccessible to them. Although validation doesn’t necessarily guarantee accessibility, it is an important component of exercising ones due diligence and is reason enough that you should validate your website’s XHTML and CSS.
- Cross browser compatibility. The more validation errors your website has, the higher the chances are that your website will not look the same in all web browsers. We will cover the importance of cross browser compatibility in the next step.
- You look more professional with a valid website. Again, like having interesting content free of grammatical errors and misspellings, having a valid website makes you look more professional to your visitors. It tells them “Hey, I care about my website’s image, I took the time to validate it”.
If you’re building a website for the first time, then you may find that your website has a lot of validation errors. Don’t worry, this happens to the best of us. The more websites you build and the more time that you take to learn the rules of validation, the fewer errors you will get and the easier it will be to validate your website.
For more information about XHTML and CSS validation visit W3.org.
Step 9: Standards-compliant
Perhaps the most difficult, time-consuming aspect of professional web design is making sure your website is standards-compliant.
Taken directly from Wikipedia:
Standards-compliant is a term often used in describing websites & user agents’ (often web browsers) relative compliance with web standards proposed by the World Wide Web Consortium (W3C)
In layman’s terms, if you want your website to be considered professional, then it must look and function the same in all major browsers. In addition, achieving interoperability lowers costs to content providers since they must only develop one version of a document.
As mentioned above, creating a standards-compliant website will take a good deal of time and can even involve using basic hacks in order for certain elements to appear the same across all major browsers. Major browsers include: Internet Explorer 6 (IE6 -PC), Internet Explorer 7 (IE7 – PC), Firefox (PC and Mac), Safari (PC and Mac), and Opera (PC and Mac). These browsers control the majority of the browser market share and therefore the website which you create should be tested extensively in each of these browsers to ensure standards-compliance. In addition, XHTML and CSS validation (as mentioned in Step 8: XHTML and CSS validation) are extremely important when programming a website to be standards-compliant. Validate your website, validate your CSS stylesheet, validate yourself (okay, you can’t validate yourself, but if you could, would you?).
Step 10: Optimization
Website optimization is another crucial factor that must be taken into consideration when professionally designing a website. Website optimization includes:
- Image optimization. Next to audio and video, images can severely compromise the speed in which your website loads. Always compress your images using Photoshop or your favorite image compression utility. By compressing images, you decrease the size of a file which allows a web page to load quicker which ultimately decreases the chance that your visitor will leave your website due to long load times.
- Audio/Video optimization. Another major annoyance which screams “unprofessional” is having enormous video and audio files embedded in your web pages. Try to use Flash Video (.flv) compression for your video files and (.mp3) compression for your audio files. Not only are the file sizes smaller than using (.avi) or (.mpg) for video or (.wav) for audio, but the video/audio loads faster which means other elements on your web page will load faster, too.
- Clean code (just say no to tables). In case you skipped Step 5, do not use tables when designing your website – use CSS (cascading style sheets). Tables have a ton of junk markup which will slow down your page load time, increase file sizes, and make editing and updating quite difficult.
- Validate your XHTML and CSS. Although covered in Step 8, XHTML and CSS validation is an integral part of professional website optimization and therefore should not be skipped. Validate your XHTML and CSS.
Step 11: SEO (Search Engine Optimization) friendly
Professionally designed websites should be designed with a solid SEO friendly foundation. To make your website SEO friendly:
- Don’t use Flash. If you must use Flash, make sure it is used sparingly. Flash content is not crawlable by search engine spiders and therefore the content located inside of Flash files cannot be indexed in the search engines such as Google, Yahoo, MSN, or Ask.
- Don’t use Frames. Search Engine Spiders have a difficult time crawling through a website that uses frames. Many Search Engine Spiders will receive the following message when visiting a website designed using frames:
“Sorry! You need a frames-browser to view this site.”
- Keyword Research. Optimize your web pages by including keywords relevant to the content on your website. Use keyword research tools such as Wordtracker or Overture to find the best, most relevant keywords for your content.
- Researched Keywords in Title of web pages. Arguably the most important element in SEO, make sure that your title tags include the keywords found in the keyword research stage.
- Researched Keywords in URL. Be sure to include the researched keywords in the title of your web pages as well. For example, if a page on your website is about energy drinks, make sure that the file is saved as “energy-drinks.html”. Use dashes instead of underscores, if possible.
- CSS Navigation/CSS Stylesheets. CSS navigation guarantees that your website navigational text is crawlable by search engine spiders. CSS navigation also loads very quickly and anyone will be able to view the navigation using any browser.
- Researched Keywords in Anchor Text. For hyperlinks inside and outside of your website, be sure to include the researched keywords in the anchor text of your hyperlinks. This helps search engines better determine what a particular page is about and will help that page rank higher with the researched keyword(s).
- Images: ALT tags, no text in images. Not only are ALT tags required for XHTML validation, but they are necessary components of web accessibility. Try to avoid placing text inside of your images since search engine spiders cannot crawl image text. However, if you must place text inside of an image, use the text inside of the image as that image’s ALT tag. Search engine spiders can read ALT tags, just not the text inside of images.
Step 12: Abuse of Flash, Javascript, and sound effects
The last step in creating a professional web design and website is to avoid the abuse of Flash, Javascript, and sound effects. Not everyone has Flash or Javascript enabled on their computer, and therefore your website should not be built around them. If you’re going to use Flash or Javascript, use it sparingly.
Try not to use Flash Intros on your website. Most people hate waiting for Flash Intros to load, hate being forced to sit through them, and hate being surprised by the sound that many of them have. Do not create your website using only Flash. Again, what about the users who do not have Flash enabled on their computer? That could be a potential client, customer, or reader who you’re missing out on because of an unnecessary technological limitation.
If you’re going to use sound effects, make sure that they only play if the user enables sound on your website – never force sound effects onto your visitors. Nothing screams “unprofessional” like having a sound effect play each time a navigational item is rolled over or even worse, when the visitor lands on the home page of your website.
As a matter of fact, Flash and sound effects should generally be avoided when creating a professional web design. Javascript is the only exception as long as you program the website to work even if Javascript is disabled. Flash and sound effects are a nuisance to a lot of people, so for that reason alone, try to stay away from them.
The recipe to professional web design
These 12 steps make up the majority of the recipe which many professional web designers live by when designing websites. Of course, knowing the things that you know after reading this article and actually being able to create a professional web design are two very different things. However, as it does with anything, practice makes perfect. Now get out there and start building a professionally designed website! And hey, if you can’t do it yourself, go to Google and search “professional web design”. CHROMATIC is in there, along with many other highly-respected professional web design companies.
The planet’s ugliest web page, the Drudge Report: VISITS TO DRUDGE 1/22/08
018,028,556 IN PAST 24 HOURS
496,899,002 IN PAST 31 DAYS
5,150,232,217 IN PAST YEAR
So much for the 12 steps…
EDIT: Mike was confused – this article wasn’t about “How to drive traffic to your blog”. Instead it was “How to create a professional web design”
I’d add another bullet point to step 11 – create an XML sitemap and submit it to Google, Yahoo, MS Live etc. It can really speed up inclusion in their listings.
Thanks for this post, it has a lot of useful information.
@mike: This post is called “12 Steps to Creating a Professional Web Design”, not “12 Steps to Driving Tons of Traffic to Your Site”
Matt – interesting post, but I’m afraid that you’re missing THE most important step of all–I’ll call it “Step 0″.
Step 0 would be comprised of the Discovery Phase, during which information would be gathered about the prospective users of the website in addition to the overall business and project goals.
For example:
Business Goal = sell 20% more widgets
Project Goal (related to Business Goal) = improve visibility of calls to action on homepage.
How can you begin planning for something until you know what the website and its users are trying to accomplish?
@mike – See Ben’s response
@ben – Thanks for the comments, and thanks for explaining to Mike the purpose of the article!
@andy – That is certainly a good idea, and is something that we practice. Good Catch.
@scott – We were trying to put together a “how-to” guide for people who were curious on how to go about creating a professional web site of their own. That is definitely included in our web design process, however, we left it out as we figured it was quite the obvious step.
It seems that usability is very important. Thank you.
Thanks for this good article. We all try to make something better in our works. And this post will definetly help us.
Hey! Congratulations, nice website and great article. So, about website width, you think it’s better to use fixed for 800, fixed for 1024 or liquid layout? And what about height? Is there a limit or a minimum size? Thank you
@thiago – that is a difficult question to answer, and there isn’t one “right” answer. It all depends on who your audience consists of. If you have people who are most likely going to be browsing on old computers, with 800×600 resolutions, then you’re obviously going to want to build a site with them in mind..
However, the analytic reports of our website and our clients’ websites suggest that fewer and fewer people are using 800×600 resolutions. Therefore, 1024×768 seems like the best option right now. With 1024, You are getting 224 extra pixels – which makes a world of difference when trying to fit in different elements of a website, especially a blog.
Fluid layouts are also nice, but we find that most people (especially professional websites) prefer a contained layout – rather than a layout that is dependent on the width of a browser.
Bottom line: it depends on your audience, and it depends on your preference.
Thanks for the compliments!
Hi,
Nice blog as nice post. Great…
Very good article. I am definitely bookmarking this one.
Keep up the good work!
Amazing Post. I’ve been putting site together for a while now and always wondered if someone has put a list together that covers every angle. This post makes it all clear. Thanks. great post!
I would also add that a professional site also is with minimal ads, as they can become quite distractive. Otherwise great list…kudos! Regards, Keith Johnson, Author “365 Great Affirmations”
@fox and @ded – Thank you, we’re glad you found it usefull.
@Keith – Thats correct, excessive ad usage is a big negative and will also take away from the professionalism of a website if abused. That should have been included under the final step, along with Flash, Javascript, and sound effects abuse.
Good catch, thanks!
Nice , great blogs and nice tips as well i have bookmark this page, you have nicely created and decorated your blog. its very nice and informative
Fantastic! Particularly like point 4 – I’m a stickler for details. Good to know that I’m right to be that way!
Thanks. very nice receipe. Is there some technique to improve table based structure?
Great article, very insightful. However, I would like to make small argument in defense of Flash/Flex. It’s not entirely true that Flash content cannot be indexed by search engines. I have created various Flash and Flex applications and widgets in which the content was indexed. Simple solution, create the content you want indexed in XML or HTML format, and consume it with the Flash or Flex movie. Now to what degree can this be indexed is to be argued, but this can be done, and it works.
I’ve not finished reading the article yet, but it seems decent so far.
One thing I do want to mention, is that tables, despite the advantages of CSS, are still occasionally the better option.
CSS is very powerful and extremely useful, but sometimes, especially when on a tight time budget, it just takes too much time and effort to create a CSS-based layout and make it look right.
As well, when your audience deals a lot with older browsers (such as older versions of Netscape, though hopefully that will change now that Netscape has been discontinued), using a CSS-based layout would be disastrous.
Of course, table-based layout needs are the exception nowadays, not the rule, but I’m always leery of any professional who discounts a table-based layout entirely without, at the very least, mentioning that there will still be times when a table-based layout will be better.
Again, I agree fully that CSS is superior to tables, but I would be loath to brush tables completely aside just yet (at least for a few more years, though I’m hoping the upcoming HTML/XHTML and CSS versions will hasten the passing).
Good writing. I will implement those things you write. They are useful and easy to follow. Good job.
Thanks,
Very good step-by-step approach. But as a well-worn military saying goes: “No plan survives the first contact intact” Customers often throw you curve balls and say “Oh that’s how it works?, I thought this was like so even though the plan says it isn’t” and then your plan devolves into trial-and-error and “Do you like this”iveness.
very informative post man. Its a good list of things one should do.it helped really.
please keep this kind a posts up. specifically for SEO and etc…
Thanks again.
Very great list of information Sir!
Looks like you really worked hard on this list… I agree with the Usability.. It is a big factor. Also it should be SEO Friendly… Thanks for this information…
Excellent Work. Very nice post. All suggestions are very nice. I’ll try to follow them. Thanks
Yeah the complete A-Z professional website made EZ.. thanks for the breakdown..
Hi. Nice article! Helped a lot! I’d like to ask you a question though… I have this page wich talks about a school’s inner structure, do you think it would be wrong to put an image and an hyperlink linking to the school’s projects? Wouldn’t it be out of context? Thank you
richard math-man
February 17th, 2008 at 3:20 am Good writing. I will implement those things you write. They are useful and easy to follow. Good job
http://www.richmath.wordpress.com
Dont delete my links ok, unless you dont want to ever get a trackback from me.
The points you have mentioned regarding web design are excellent reference to web designers.
Very nice
btw very good tips i will use them. Some of them i did not knew.
that’s really a fantastic post ! ! added to my favourite blogs list..
Great list for planning the site. Thank you. I will definitely print it and follow it.
Thank you. I think making website updates and maintenance is just as essential as the main design part.
Great write up. Something to consider adding to Step 9 as another benefit of Web Standards Compliance would be how it aids elderly and disabled web surfers out there if their browser/system tools support the standards implemented in the coding phases. Check out the Accessibility plug in for Firefox.. really helpful
@ Matt – Thanks! Thats a nifty plugin, thanks for sharing.
Thanks this will surely help beginners like me.
I agree with you completely! I have seen many a web designer create lackluster or amateurish websites by ignoring many of the steps you’ve listed here. I have been involved with Professional web design for a number of years now and as it has become common place to own a website, sadly many companies just don’t deliver anymore. On the flipside however, there are many that do fantastic work and don’t abuse things like Flash and Java.
Hi guys..
I really like your articles and I am wait for more
After read all of them and had started plan my site, I got confused about information architecture (wireframes). How can I don’t think in the layout when I drawing the wireframes ? Cause.. when I modeling, my mind go forward..and start think as designer… but I know that in this stage what I doing is IA and not design.. so what is the trick for me separate this ?
Thanks,
Daniel
@ Daniel – Very simple – don’t allow yourself to use anything other than solid rectangles and squares. The only thing you should be doing in the wireframe stage is figuring out how you want to position different elements for the website. Make sure to label each square or rectangle so you know exactly what it is, and also provide a short description inside some or all of the boxes if you feel it helps.
Go back to the Dos and Donts Guide to Great Web Design article and take a look Stage 2: Modeling. Notice the example we provided is very simple and only illustrates where the elements will be placed and what kind of content will be found within each element.
Hi guys..
I am very fresh in design concepts so, this is something that I don’t understand yet.. and couldn’t find in tutorials. When I going start draw the layout in my vector program(Inkscape), I don’t know what size should be my page.. 760×770 , 750×450, 700×1000… I can’t find a standard here. I know this is a silly question.. but I am really fresh in the design world. And sorry for ask this for you.. but you become my reference about web.
Thanks anyway!
@ Daniel – If you’re designing a website that will be optimized for 800×600 resolutions, use 770 x 1000. You can always increase the vertical dimension (1000) if necessary, but keep the horizontal spec at 770.
If you’re optimizing for 1024×768 (we currently optimize most websites for this resolution since most people use it and few use 800×600), use a 970 x 1000 canvas. Again, you can increase or decrease the vertical measurement (1000), but keep the horizontal spec at about 970 pixels.
I read somewhere that 960px is better because it “divides better”—standard IAB ad formats will fit better, etc.
Thank you very much!
Good well-written informative article. We are beginning to get more requests for web design – we have been away from this area for a while and are getting back on the learning curve.
What are the effects of using SSI pages for menus (search engine implications)?
Thanks
Hi !
Do you know some good tutorial or resources about convert design to css ?
Thanks !
@ Daniel – There aren’t any “great” tutorials on doing this, but we found this one, which isn’t that bad. It is very basic, but gives you a place to start from.
Nice guide mate. Really enjoy it. Thumbs up on Stumble Uppon.
Share the love!
These steps are really great and usefull.
Hi guys!
When I get good.. I will send my resume to you
Just a silly question.
Why some people prefer use vector program to make a page layout and others a bitmap program ? I know the difference.. but what the benefices from each one ?
Bests
Great tips.Thanks for sharing with us
Nice post. Almost all the points that should be kept in mind while designing a professional website are covered here. Thanks for sharing such an informative article with us.
Thanks for sharing the useful tips.
Thanks for sharing these 12 steps related to web site design.
Very good. Excessive use of Flash and too many Google ads are a turn-off. Bad color design and a cluttered appearance are also disturbing. Most people (almost everyone) want information, not a pitch for everything under the sun. Even the best site can lose credibility by confusing their, with there, for example.
You have built a good website!
I browse and saw you website and I found it very interesting.Thank you for the good work, greetings.
Found your site in Google, and it has a lot of usefull information. Thank you!
Nice..All points for designing a professional website are covered in this article…
This is definitely a useful and interesting article…
Keep up the great work!
Ovi Dogar
Thanks. Nice article
I applaud you for your open and candid approach to web design and I only wish there were more web developers who took such a professional approach.
One aspect you might like to include is in reference to who should be involved in designing a new website. I am afraid I stem from the early days of IT Systems and after 30 years I see that the old practices of involving all the right stakeholders with a “project champion” apply equally as well to current day websites as it did to software development practices of years ago when we used to call it SDLC (System Devt Life Cycle).
True success for a new website can only be realised with the right people with the business and the right consultants being involved. It is more than snappy looking technology, it is about the business, it is about marketing, it is about good content.
Any serious web development project could involve business users, financial people, business analysts, web developers, graphic designers, database administrators, SEO Designers, Copywriters…and yes, even your customers and suppliers.
Get the wrong people involved and you will not realise the success that comes from applying your approach.
Once again – well done guys
Greg Tomkins
@ Top Left Designs – Thank you for your comments and praise, we appreciate it!
Wow!!! Good job. Could I take some of yours triks to build my own site?
These are good tips for professional web design. I work in the field and see a lot of bad color scheme’s, overuse of calls to action, and multiple font’s and font colors. To make a professional looking site sometimes the less is more approach works best. It does for me anyways. Keep is simple and easy to use.
In regard to crawlers reading flash, it is now possible and will be common practice very soon. Google just announced analytics for flash. just to give an update.
text based code is still king, but flash won’t kill your site.
Great article – thanks!
Step 13: Get a proofreader to spot the mistakes your spell checker didn’t spot. For example:
“Following a well-structured web design process is by far one of the most importance steps that many web designers choose to neglect.”
Alex – We’re glad that you found the article useful. Thanks for catching the typo, too. We’ve fixed it.
For collaboration I found Groove to be top notch! I highly recommend it you can share anything.
Nice post its great to find such a well laid article thanks for sharing the information
Great process driven article and definitely the process web developers should take when starting a new project.
But I do disagree with you on some points and these should be restructured in my opinion.
Step 5. Current Web Design Technology
I think you are giving tables a very bad time here. I’ve seen sites built using DIVs and CSS that use a lot more code than one with tables. If done right, CSS sites should be smaller, however this is not always the case. And if not done right, will take just as long to download as a poorly designed tables based design.
The reason tables became so popular was because of the flexibility it gave to designers, so saying that it limits creativity is not accurate at all. You can still do a lot with tables that you can’t with CSS.
Step 8. XHTML& CSS Validation
I have a problem with this section too and that comes down to the definition of accessibility.
From WikiPedia: Accessibility is a general term used to describe the degree to which a product (e.g., device, service, environment) is accessible by as many people as possible.
If you build your website using the latest coding standards, older browsers will not be able to view or function the site correctly. I know this is now a small percentage, however, it goes against the whole definition of accessibility. If you were to build your websites in the “old fashioned” way as you put it, your website could be viewable in all browsers, unlike standards compliant websites. Remember you can have an accessible website with old fashioned coding.
Other than that it’s definitely an article that I would recommend that people read!
Tom
I have to agree with you (partially) here. Usability should be the primary function of a site, but, how far back should a designer support? If we want 100%, everybody would have to code HTML 3.2—use table layouts, font-size elements, and no CSS to cover Netscape4/IE4 users…
Even today, IE6 holds about 11% of the browser market share. Fortunately, Microsoft has “seen the light” and has even taken a dramatic step to kill Internet Explorer 6.
Even now, we see the big players (browser vendors) on the web pushing HTML5, including Microsoft, and I think that’s a good thing. Web developers don’t need another situation where vendors will stick proprietary tags in their browsers (remember “best viewed with Netscape” days? lol). My understanding of HTML5 is that if a vendor won’t agree to putting part of a spec in their browser, then it’s dropped altogether. And now with browser development cycles speeding up, the availability of new features for developers will come sooner. Because of this, I think by 2015 we won’t have to worry about cross-browser compatibility or designing for older browsers anymore.
Thanks a lot…nice article…
your article has given me a nice start . thanks for it..
These 12 Steps to Creating a Professional Web Design are very much helpful for the new designer. This will help to identified their track and work in to the right direction. Thanks for the post.
Web Design Quote
great post.. so useful for fresh designers like me.. bookmarked
Good post! I also agree about the abuse of flash. It’s really too much and professionals running a business know when something is distracting.
Matt,
Thank you for this article. I am a newbie and have been wanting to learn how to create a website but got very confused by the various programming jargon. I find your article to the point and in step describes all the aspects very clear. I am following you on twitter.
I might of missed it, but what program(s) do you use for the actual coding? I’m on a Windows PC, and I’ve found Notepad++ and Komodo Edit to be pretty good, and they’re freeware.
Many of our favorite text-editing/coding programs are for Mac OS X, but here is a list that runs through some popular text-editor programs. It looks like your Notepad++ choice is at the top of their list.
Awesome read.
As a web designer who has long used these same steps I often see designers who forget all about the idea of research and conceptualising with roughs before they start to design. Its definitely important and shouldn’t be overlooked.
Your article explains the depth and knowledge required to do this job well
All I can say is thanks. Really useful advice. I have one question though. Do you normally use WYSIWYG web design software such as Dreamweaver or would you say the best way is to create the webpage using code entirely. What is your recommendation for building truely proffesional websites, because I’ve been told these programs add alot of extra code that is not needed so does this mean the best method is to write up everything yourself?? Once again thank for the articel.
Serge,
The best way to build a website is to do it from scratch a few times just to get a grasp on how it’s done. Dreamweaver does the work for you, which isn’t really beneficial to someone interested in designing and building websites professionally. Once you’ve got that down, start working with a CMS (content management systems). Drupalis one that we use for our clients. Good luck!
Matt
Great article, well thought out and very good guide. I think we are all guilty in taking short cuts.
Interesting subset maybe for web design projects, add the XML sitemap and then use search as googlebot from Google Wemaster tools. Appears to help speed up the process.
Thanks again.
Simon
Colchester, UK
Hi Matt,
I have been qualified as a designer since 96 and programming both front-end and back-end code since 98, I have experience with every browser since IE2, and the original Netspace Navigator, so can respectfully disagree with some of what you have written, particularly with reference to the use of tables. Using HTML 4, HTML 5 and the CSS standards is a project dependant choice… it always will be since not all web sites serve the same purpose.
The size of the project, the content and the target market, as well as the targeted runtime is more important to consider than simply dismissing some older yet still valid techniques. So many new web designers and developers I train start off with your echoed sentiment, but its wrong. In-fact using tables / HTML 4 tags correctly can be more valid given the right circumstances, and can also actually provide more consistent browser compatible markup.
My advice to all newbies is learn to code rather than generate markup, you will benefit greatly in the long run. Tables will certainly NOT be a performance hit, that’s rubbish, unless you generate them, and especially with a poor tool like word, hence producing less than optimal markup.
CSS on the other hand may be the best tool we have right now, but its not without its own set of problems… CSS could be considered a failed standard (it is hardly standard with little consistency btw browsers)… how is that a standard?
This is the definition of a web standard:
“Web standards help ensure that web sites are accessible on a wide variety of platforms and to a wide range of users including users with disabilities.”
‘Modern web designers’ like CSS because you have access to newer browser features, and this allows you to create more ‘attractive’ pages easier, but usually by ignoring older browsers or writing scores of hacks and swap-outs. Only when the testing starts do you discover the mess and then all the patchwork begins (a maintenance nightmare in massive sites). CSS inheritance is also badly designed so it takes a lot of experience to create lean and efficient style sheets, and knowing also where exactly to put them too. CSS may be easy to learn yes, but truly mastering it is another matter since there are so many ways you can do things and only when you have maintained hundreds of style sheets can you understand this.
Anybody who has ever done some performance testing will also tell you page rendering time tends to be the biggest bottleneck in front-end code, and bloated style sheets share a lot of the blame here, in-fact they are far worse to handle than a few extra tables as opposed to divs.
Not slamming you Matt, you do have some valid points, but you also need to consider the other side of the coin… My clients are mostly financial institutions with lots of cash, but some of them have to deal with a lot of corporate red tape and don’t upgrade often… I have a client running a custom IE5 browser and almost 60% running IE6 as crazy as that sounds. A huge portion also use weird resolutions such as portable palm devices and BlackBerry’s, so fluid designs are very important to me, and some of the more modern CSS renders crap on these devices.
Just something to consider, its not all fixed in stone.
Peter
Hi Peter,
Thanks for the comment. I agree with some of the things that you’ve said here. Regarding “web standards”: yes, there was a time when there did not seem to be much standardization between browsers (mostly IE), but that time has come and gone for the most part. With the market share for IE6/7 significantly dropping over the past few years and all current and new browsers (even IE) moving towards standardization, this is much less of a problem now. Many of the popular web applications that we use to operate CHROMATIC have moved away from supporting older versions of IE simply because the market share is no longer there and hence it’s a waste of time and resources. We charge extra for IE6/7 optimization.
The argument for table-based layouts taking longer to load is valid in my opinion based on research I did prior to writing this article. That being said, there certainly are cases when using a table is superior to using divs (i.e. displaying tabular data). If you’re building an Intranet-based website for a company that primarily uses outdated IE browsers, then working with a table-based layout makes sense.
Yes, CSS does take time to learn, but that’s not a valid excuse for not using it. If you’re a newbie web designer or someone just looking to quickly put together a site, then a table-based layout may be the best option. But if you’re a professional designer, then (in my opinion) there is no excuse for not taking the time to learn how to use CSS. Yes, it will take more time to learn, but it is your duty as a professional web designer to give your client the most cutting-edge coding methods available. The good news for designers just getting started is that there has never been a better (and easier) time to do so since all major browsers are now on the same page with regards to standardization. IE debugging is, for the most part, a thing of the past.
I certainly can relate to where you’re coming from when you speak of the “other side of the coin”. We’ve been there, too.
Thank you Matt, this was a good starting point. I’ll be designing a website for my company, and am new to web design. I am an electrical engineer, and paint (art) as a hobby, so hopefully the balance and the colors will be right. The content will be mostly engineering, and I can do that as well. Thanks again.
Very nice & comprehensive tutorials
Hello, your web site is very informative. I love what you have published. Kindly give me suggestions on how to make my blog site looks professional, my blog site is :
http://www.uarticles.info
Thanks!
In a previous comment you mention charging extra for ie6/7 optimization. It should probably be noted that Google chrome has stolen much of the market share from other browsers. The most widely used browsers of today are firefox, chrome, safari, ie8/9, and opera. I see chrome and safari continuing to take share from firefox and ie over time. If it weren’t for businesses being built on Microsoft over the past 20 years, ie would be gone by now as it sucks as a browser from a user, security, and compatibility point of view.
@Peter
You obviously have not progressed in coding since the 90′s. Modern technique is to have separation of code and style. This is what CSS does. A programmer can look at and work on the functionality of a website only, while a styler can look at and design a website separate of the code that runs it. Matt described the benefits of separating functionality from style in his article. Not only is there less code, it is organized in a way that makes sense.
Organization by separation has been taken a step further with the more modern MVC approach (Model, View, Controller) which classifies and separates many aspects that are part of every website today.
@Jason
> You obviously have not progressed in coding since the 90′s.
You are obviously still very wet behind the ears, you have either not bothered to read or not understood the comments I have made, had you done so you would understand my comments referred specifically to maintenance and backwards compatibility, which is still of key concern in large organizations, and modern CSS implementations fail in this regard and are not backwards compatible, nor strictly standards compliant, especially concerning older browsers (and not that old either).
Great Post. I’ve been making sites for several years an always wondered if someone has put a list together that covers web design from every angle. This post makes it all clear. Thanks. Also, what do you think of website builders like iwebsitemaker.com? Do these sites do a decent job for creating basic websites?
Website building sites like the one you mentioned are okay only if you don’t need something custom, but if you’re serious about your business, product, organization, or even personal website, then building a custom website on a feature-rich CMS such as Drupal or WordPress or even downloading a theme and then tweaking the source code, adding modules/plugins, etc. according to your needs is the best way to go.
I’ve been hand coding sites for a few years and you clearly know your stuff – thank you for sharing your knowledge and experience. What baffles me is that this page still brings up 17 errors in the W3 validator. *sigh*
Molly,
Notice that the errors are due to the social plugins we’re using (delicious, Facebook, etc). Not really an easy way around this. Otherwise, the code is clean!
Too harsh on tables. No offense but that is where everything came from if you remember. Those days we had dial up connections.