< SOS Health Clinic Website Launch
Dec 01, 2011 at 08:17pm
Age: 13 yrs
Category: Rapidfyre Web Design & Devlopment
By: Charles Coleman

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 Opens external link in new windowAdobe Creative Suite Master Collection and currently runs about $2,500.  As of Creative Suite 5.5, Master Collection comes with the following software:

  • Opens external link in new windowPhotoshop Extended — Primary workhorse of most website designers.  This is primarily a pixel-based editor used to mock up designs.
  • Opens external link in new windowIllustrator — Used for vector artwork like logos and other things that may need to scale to print or other venues.
  • Opens external link in new windowInDesign — Layout tool for print and digital distribution. We usually use this when creating a multi-paged booklet or brochure for print or digital distribution.
  • Opens external link in new windowAcrobat Pro — Many websites have Adobe PDF forms, manuals, or disclosures, and this tool is a must to create these web documents.
  • Opens external link in new windowFlash Catalyst — This is a web designers dream to getting interactive behaviors without having to write code.
  • Opens external link in new windowFlash 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.
  • Opens external link in new windowFlash 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.
  • Opens external link in new windowDreamweaver — 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.
  • Opens external link in new windowFireworks — 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.
  • Opens external link in new windowContribute — 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.
  • Opens external link in new windowPremiere Pro — If you're editing video for the web, you will definitely be using this tool.  It is the backbone to video editing.
  • Opens external link in new windowAfter Effects — Put the finishing touches on your 2D or 3D elements for web video.
  • Opens external link in new windowAudition — Video and audio sound editing software.  Work in the waveform or spectral modes, multiple tracks, and destructive or non-destructive editing/effects.  
  • Opens external link in new windowOnLocation — Enable direct-to-disk video recording, logging, and monitoring.
  • Opens external link in new windowEncore — Create DVDs, Blu-ray discs, and web DVDs all from a single Premier Pro project.
  • Opens external link in new windowBridge — 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.
  • Opens external link in new windowDevice Central — Plan, preview, and test your creations to see how they operate on mobile phones, tablets, and consumer electronic devices. 
  • Opens external link in new windowMedia 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 Opens external link in new windowcolor 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 Opens external link in new windowcross-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.

Oops, an error occurred! Code: 20240615091158888b96a9
©2024 Rapidfyre Inc, Web Design & Web Development  •  34 Quail Haven Ln, Tonasket, WA 98855  •  (509) 684-0600