Web Design

Making the right choice
If you are looking for a website designer the first question is “Where do I find one?”

Most people will either use a Google search to find a web design company, Yellow Pages, Word of mouth or follow a link direct from a website to a web design company. Any of these are a good way of finding one. The next thing most business owners are thinking is “Can they do the job?” and “How much will it cost?”

Can they do the job?

Finding out if the website designer can do the job you are looking for is usually straight forward. Do they have a porfolio? If so they may already have created a website similar to the website or industry sector you are in.  Are they easy to contact and do you get along with them?

Most website design companies should be easy to  talk with and explain your business needs. To cut out all the technical jargon we created a fact finder that is basically a simple series of questions that answer, email back, and we can give you a website design quote from it.

How much does it cost?
We always produce an accurate quotation that outlines the cost of your project. We stick to that price and there are no hidden charges.

OK as a web designer, you might expect me to use Dreamweaver, and as a web developer, you might expect me to hand code. However, I think Dreamweaver is a by far the best tool for combining the two. This article is not an advert for Dreamweaver, Adobe are not paying me (I wish) it is merely an explanation as to why I use it.

Absolute Beginners

In 1998 I began using Dreamweaver (back then it was Macromedia Dreamweaver version 1.2. This was the latest version). It was easy for a beginner to pick up basic web design principles using the WISIWIG interface. It really was a case of What You See Is What You Get.

I suppose this was the initial joy in building websites. You designed on screen your images and text and when uploaded - things looked the same. I used a design based on tables and nested tables that allowed me to place my content and images practically anywhere on the web page.  My first attempts were basic, but functional. As the web evolved and my knowledge and expertise grew Dreamweaver grew with me. I learned how to use many more features as they became available, and found myself much more of the time in CODE view.

The design progress over the years.

The following image shows the website fitnessfiesta.com from 2001, 2004 and 2006. The website changed to reflect current website design trends.

By 2004, I was using more Javascript and CSS in my web sites.

By 2006 the site had a major redesign. I used a more modern navigation.

Coding Geek

This brings us to the site today. It had another major redesign in 2008. I moved the site into PHP instead of HTML.

This allowed the content of the website to be driven from a MySQL database instead of static HTML web pages.

The benefits of using a dtabase is the ease to make quick changes to the website as new events are added or passed.

The benefits of keeping a website current and updated is of great advantage to your customers and also Google, who can see the website is regularly updated.

Dreamweaver is not the only software in web development, but it is my favourite. In my view, the beauty of Dreamweaver, now under the ownership of Adobe not Macromedia. The on page view renders CSS so that it is simple to switch from code to design view and vise versa. In the beginning it was not only the temptation to stay in design view, but neccessary.

These two screen shots show the same thing, just one in Design View and one in Code View:

As you can see, there are many features to this web devlelopment software.

It is easy to talk about the features of Dreamweaver for almost an eternity. What I would rather discuss is how it has helped me with the transition from web designer to developer. As the internet has progressed, the skill set of the designer and developer has had to grow with it. Whilst you could knock up a half decent website with a basic knowledge of HTML and a working knowledge of Dreamweaver, now there is so much more. Ecommerce design needs to run from a database, CSS helps ensure accessibility, and keeping code clean and simple.

Conclusion

Now any website designer that uses Dreamweaver can make the switch to web developer and the software is still the same and enables a smooth transition from designing static ‘brochure style’ website’s to dynamic database driven websites. Dreamweaver allows the web developer grow their skill set to cover PHP, ASP and Coldfusion programming languages.

Which tools work best for website designers?

Adobe, after taking over Macromedia have all the software packages required for web designers. Photoshop is probably the very first Adobe product I ever used and probably one of the most used in the industry. Photoshop can easily and effectively create a beautiful graphic design for use within a website I am about to build.

I then move over to Dreamweaver to build the website layout. Some website designers use photoshop for the full design and layout. This method produces a graphic mock up however I prefer to build a web browser based mock up as that is what the client is going to view the site with.

For example, anything is possible graphicaly with Photoshop, however the same can not be said for web browsers and how they render.  Yes, you can use any font, but it won’t neccessarily look exactly the same in Photoshop as in your finished website, so I prefer to use Photoshop for all graphic elements of the site, then move to Dreamweaver for all text. This makes more sense for speech readers and Google too.

Useful techniques for the design/development process

There are a few techniques available to the professional web designer. My favourite is Firebug. It’s a FireFox add-on that will shave hours off your workflow when you are creating CSS/Javascript intense development or trying to debug pretty much anything.

Web design covers a wide area of topics and another favourite place of mine is the W3C Validator service. You can supply a URL, direct input or even upload a file for the W3C to validate. This is a great service and will help you understand how a web document needs to be laid out schematically. Once your web page is valid you get a congratulations message along with buttons to add to your site to show that it is valid. A validated website works not just for you but also for the browser and will ensure the site is easy to keep updated.

Why choose web standards and what are they?

The Web Standards Project (WaSP) fights for standards that reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web.  For example, using XHTML & CSS to control not just the look of your website but also the layout. Some people use tables to build websites, however using CSS to control the layout allows the website designer to place graphics and content anywhere on the page that can be read easily by web browsers, mobile phones and speech readers.

You know you have covered everything if you have built your site using web standards.

Were to start and continue learning.

Here are a few websites that have helped me over the years.
http://www.w3schools.com/

At W3Schools, you can study everything you need to learn, in an accessible and handy format. The website covers pretty much all areas of web development HTML, XHTML, CSS, TCP/IP, ASP, PHP, Ruby on rails, etc. You name it - this site covers it along with working examples.

http://www.webdesignerwall.com/

This site is visually fantastic and regularly publishes articles that are of interest to designers.

http://www.smashingmagazine.com/

The Smashing Magazine website has a magazine format, and showcases leading areas in design. It offers great tools, articles and inspiration.

Where do website designers gather their inspiratoin?

How can a website designer gain inspiration if they are stuck infront of a computer screen?

The slide show above from Nick La demonstrates how he gains inspiration from his environment. I have spoken to many designers who gain inspiration from going out for a walk, it may be a simple trip down the high street or a quiet walk in the countryside, what ever method they use it does not matter, as long as the end result is pleasing to the client and the user of the website.

The key is not to stare at a blank screen.

Personally I use a ‘persona’, that is based on the end user of the website. For example if I am working on a fitness related website I would listen to dance music or watch videos of the classes that generate a feeling to inspire the design. So just listening to differnt genres of music can inspire the website designer to create different designs that are beyond what they would usually create.

Creativity should go beyond the realms of the restraints we have and the software we use, imagine what could be possible. The internet has come a long way in the last 10 years. When websites were first designed they were based on a very formal table layout and the closest thing to animation a web designer could hope for was an animated gif, usually of a revolving globe!

Thankfully the boundaries are being pushed with broadband, improved browsers, and user interactivity.  Streaming TV is becoming common place, web standards using a CSS based layout allows the web designer create websites that were unimaginable five years ago.

Web developers describe designers as people who like to play around with coloured pencils and web designers call developers ‘geeks’!

In short, a web designer makes a page look graphically pleasing to the eye and a web developer makes it work. Usually these are described as two seperate job titles however in reality they both need to work together.

Imagine you have a great new car.…
The designer has made it look great, very stylish it has all kinds of gadgets to make your life easier, but it has no engine under the bonnet so will go nowhere….

Imagine another great new car….
This time the engineer  has put a brilliant engine in it, it works like a dream, but it looks awful - no one buys it…..
 

This is similar to the work of the website designer and developer, both roles need to work together. You need a great looking site - with a great engine.

Web Designers:
In some web design comapnies the web designer works in Adobe Photoshop and creates a mock up  of what the final design will look like and pass this to the client for approval. This is based on the print method when a print copy Is physically checked and signed off prior to going to the printers, however this does not work with web design.

Web page mock up
A web designer will take your brief and create a mock up of what your site will look like.A website designer may be working on a  custom ecommerce design They will take into account, colours, visual impact, corporate branding, typography and layout. Here at Microedge we produce a mock up that works on your internet browser, so you can really see what it looks like live on the web. This has the additional benefit that you can ask your colleagues and clients to look at the page and see what they think. It also has the advantage that changes can be made quickly and easily; if you want it in blue not red we can easily change the mock up and reload it for you.

Website creation
Once you have agreed a design, the web designer will make a working model of the site. At this point they usually then pass on the site to a developer to make the functionality and usability of the website.

Our website designers often do this process the other way around. Why? Well, sometimes, especially with a technically complicated site, it is better to make the website function first, then add the design. This can result in a robust, well built site that also looks good. Remember our analogy of the car, you need a good solid engine as well as a stylish body, otherwise it will fail. Web companies always need to work as a team.

Web Developers:

The web developer usually works on the functionality of the site.
They make the site function properly according to your requirements. They tend to work on the ‘back-end’ of the site. The area you can’t see - but makes everything work. This could be:

• ecommerce section and ecommerce design
• content management system (CMS)
• user interaction (like a forum, blog or product reviews)
• databases

In reality, most ideas are possible - talk to us and we will see if we can make your ideas a reality.

Please contact Microedge website design on 0151 324 1056 to see how we can help your business.