What Do Web Designers Think About?

I have people ask me all the time, "What software do you use in web design?"  This is typically a loaded question followed by other more specific questions. The idea behind it is that there are many weekend warriors who love tinkering with the bells and whistles website design as a hobby.  So, for the hobbyists out there, this is your lucky day to get the insight of someone who does this professionally.

Master of Web Design

Is there just one tool to create a website?  No, there are many tools that we use to make a website successful.  However, I lean the heaviest on a suite of tools made by Adobe.  It is called the Adobe Creative Suite Master Collection and currently runs about $2,500.  As of Creative Suite 5.5, Master Collection comes with the following software:

• Photoshop Extended — Primary workhorse of most website designers.  This is primarily a pixel-based editor used to mock up designs.
• Illustrator — Used for vector artwork like logos and other things that may need to scale to print or other venues.
• InDesign — Layout tool for print and digital distribution. We usually use this when creating a multi-paged booklet or brochure for print or digital distribution.
• Acrobat Pro — Many websites have Adobe PDF forms, manuals, or disclosures, and this tool is a must to create these web documents.
• Flash Catalyst — This is a web designers dream to getting interactive behaviors without having to write code. 
• Flash Professional — Flash is still the basis for much of the interactive media on the web.  With the advent of HTML5/JS combo, there are other options available in addition Flash now.
• Flash Builder Premium Edition — This Eclipse™ based development tool is makes it possible to create one application that is cross platform capable on iOS, Android and Blackberry Tablet OS.  This hovers more on the web development side of things, so most web designs won't be using this.
• Dreamweaver — Web authoring and editing software.  This is the primary key to creating your website templates and content.  It handles HTML, CSS, JS, PHP, Ruby on Rails (RoR), and any other language that needs to be used. We design everything in Code view though for newbie designers, you can use a Design view, which is pretty much WYSIWYG for design.
• Fireworks — Vector based graphic editor equivalent to Photoshop.  There really are not that many people who use this program any more, but we still use it occasionally to create semi-transparency in 8-bit PNG graphics since Photoshop still makes this difficult.
• Contribute — This software can act as website management tool for multiple website editors who need reviewing and publishing capabilities.  This is typically used for websites that don't already rely on an enterprise-level content management system (CMS) like we use.
• Premiere Pro — If you're editing video for the web, you will definitely be using this tool.  It is the backbone to video editing.
• After Effects — Put the finishing touches on your 2D or 3D elements for web video.
• Audition — Video and audio sound editing software.  Work in the waveform or spectral modes, multiple tracks, and destructive or non-destructive editing/effects.  
• OnLocation — Enable direct-to-disk video recording, logging, and monitoring.
• Encore — Create DVDs, Blu-ray discs, and web DVDs all from a single Premier Pro project.
• Bridge — Get live previews of files that you would normally have to open to see what it is.  Get thumbnail previews of PSD Photoshop files and AI Illustrator files.
• Device Central — Plan, preview, and test your creations to see how they operate on mobile phones, tablets, and consumer electronic devices. 
• Media Encoder — You will notoriously get a video file in some random format that is not compatible with many web-enabled devices.  Use this to transcode your videos to the formats needed for web video.

Before you begin...

We are in the middle of battle.  You may not spend much time thinking about it, but there are many different devices being used to view the same content.  This will effect everything from layout to color, usability, and more.  Some of the decisions that must be made right up front are;

• Fixed width (pixel based width), elastic width (em based width), or fluid width design (fluid width designs expand to the width of the device screen).
• Color theme.  This can be aided by color theming tools which will help you choose and save your color choices in RGB, HSB, CMYK, and Lab formats.  Don't forget that there are many devices with low quality screens that may not be able to display the dynamic range (from the lightest to the darkest) that you can on your $1000 desktop LCD.
• Video formats and players.  Flash video players are great for delivering video exactly like you want.  Just don't forget to make sure it gracefully degrades to an HTML5 alternative and acceptable encodings to work on most all devices.

What happened?

So, you've finally created some content for your website.  You published the content and are now looking at it on your iPhone.  What went wrong?  Well, you may have designed the webpage primarily using (cough cough) Internet Explorer.  The iPhone currently uses the Safari browser.  Since every browser has its own rendering engine, there is the possibility that they interpret your HTML/CSS differently.  You will need to use some cross-browser checking tools to ensure that your web page looks good in all the major browsers.

Start To Finish

So here are the typical steps required in the design of a website.

1. Discovery — Let's define what we want.
2. Design — Create several web design alternatives in Photoshop and narrow it to one.
3. Slice — Slice up your Photoshop design into the necessary images for an HTML webpage.
4. Code — Open up Dreamweaver and create a HTML/CSS layout and stuff it with your sliced images from Photoshop.
5. Customization — Add JavaScript, Flash, or any other custom code (PHP, RoR, etc.) to achieve the desired effects or interactivity on the website.
6. Content — Add copy and media to the website.
7. SEO — After adding your content, go back through and do a search engine optimization to make sure the words you want are emphasized enough.  Don't fall into the trap of optimizing the whole site for three words.  Each page is should be optimized independently for the subject it is about.
8. Proof — Review the entire site for cross-browser issues, copy errors, device compatibility, etc.
9. Rake in the profit — This is the part that many people never seem to get to.  If you are having trouble getting "conversions" on your website (website visitors becoming your client), then there may be something wrong.  Ask yourself, "do I have a marketable product?"  Then WHY are the profits not coming in?  Do you have enough inbound links, do you really understand SEO or are you guessing, do you have a clear call to action, are you even reaching your intended audience, have you considered market segmentation?  We don't have the answers to all of life's problems, but we certainly do have a lot of experience turning businesses around and helping them become more profitable on the web and because of the web.  Call us now... our goal is to help YOU succeed.  You succeed, we succeed.