Web Site Design.
I think we should start this topic by putting a few things into perspective. I will not attempt to teach you how to build a web site, but will share with you what is involved in order to build one. I will also list resources to help you learn the technologies behind the designs if you should wish to continue on your journey of building your own websites.
What is a web site? Well, it is what you think it is in terms of what you see in a browser, but there is much more to it than this. At its primary level a web site is a collection of related files and folders relevant to each other. If I were to look at my files on this computer and wish to work with my latest client’s site, I would find where in my drive (folders) I saved his site. I may have called his site my ‘client’s site’ and that would be the name of the folder containing all the sub-folders and files for his site. So in short a web site is a collections of folders all related to one another at a relevant point. This collection of folders and files would include the page file that our visitors would consider the site.
Going deeper, a page is a list of commands and instructions generally written in XHTML (Extensible Hyper Text Markup Language) that tell the browser what to do. It dictates the layout of the page, where each elements or objects should be placed and where those elements or objects are stored within the folder structure that makes up the web site. It tells the browser what color to use on text or back grounds, and where the instructions are that makes an animation or action. There can be a lot of instruction on the page or very little. In pages with less instructions, they generally point to other files that contain more instructions. Some of these files would be: CSS (Cascading Style Sheets), JavaScript (a scripting language that can monitor user interactions and direct reactions), PHP, Perl, ASP, .NET, JAVA, Python, Pyramid, Ruby on Rails, and many other languages that direct display of objects and interactions within the objects. Basically the page that is made up of the XHTML instructions, is the first layer of engagement with the browser that forms the page. A simple web site would have at the minimum XHTML, CSS, and some JavaScript to handle the layout and look of the page. The CSS and the JavaScript can be part of the XHTML page or located in external files. This is the backbone of a page.
What makes up a page? Well, as you might expect if you plan to create your own web site, there is a wealth of information you will need to gain in order to make a decent page. The learning really never stops if you wish to do this professionally. You will need graphics, and I do not mean just photos, I mean little elements that most visitors will take for granted such as lines, faded linear objects that match the color pallet of the page, little illustrations, and or animations that make the page more professional looking. However, one word of caution, too many little animations can make your page quite annoying. You have to use discretion when you use some things. You will need Photos, backgrounds, typefaces, artwork, etc in order to pull off a nice looking page. Otherwise you will see a very boring site with a white background, no page layout and just written text with a few hyperlinks (links to other pages or sites) listed out.
You must be proficient at Photography (unless you buy royalty free photos), Photographic manipulation (I use Adobe Photoshop CS4), Art (drawing I use Corel Painter X), Illustration (Adobe Illustrator), Animation (if you choose to have it on your page, I use Adobe Flash), Typography (I use Illustrator, more on this later), Page layout (this can be done with Fireworks, Photoshop or Adobe Indesign), Design elements, Site Architecture, Copywriting (to add verbal content), Marketing, and Search Engine Optimization; all in order to create a basic and professional site. You can buy each application listed above separately or save some money buy getting them in a package deal: Creative Suite 4 Premium.
This soft ware is not cheap to buy, but I can assure you it is better than anything else out there. I have tried several packages and this one allows me to work at the level I prefer to work in with the amount of control I like to have. The other less expensive packages work, but really confine what you are allowed to do, and if you have an existing site can be a huge source of frustration to convert it into the format of a less expensive application framework. This is another reason it is better to use a professional so that you do not have to buy expensive software to make the job of creating and maintaining your website easier on you.
Trying to save the cost on the Adobe software, I have spent a couple times over the amount I would have if I would have gone with Adobe to begin with. It is where most people eventually end up that build web sites. I would suggest you just bite the bullet and get it from the start. It will save you money over the other applications out there over the time you own it. Or you can call me, I will be happy to build your site from the start. : ) Converting another application’s generated code into the Adobe suite is also quite an undertaking, all things to consider when doing web design yourself.
Indeed I have read, and learned every aspect of site design, interaction, and server side technologies over the years to be able to offer my services. It is an undertaking to build even one site. Yes, there are a few shortcuts, you could use a template for example. With a template you have an editable region and you tell some application or online interface what you want to say, where you want to say it and what photos you wish to use. However, as with all shortcuts there are limitations. A template cannot be changed to fit your specific look or feel, unless you understand the technologies used to create the template and have the ability to go into a template and make changes.
My website is a good example of using a template. I started with a template I purchased from a design company to save some time. For me, my time is money so I did not want to tie up too much potential billable time into my web site. I can build this web site from scratch, but like many seasoned professionals, there is little reason to start from absolute scratch, it is called adapt and modify. Having taken this template, I pulled it in to my web design software ( I use and highly recommend Dream Weaver CS4 it comes as part of the Creative Suite 4 as well) began to dissect it and make the changes I wanted to see. I could change any and every aspect of the template; what I decided upon was a few changes to the layout, replaced all the photos of course, and other design elements, added a few helpful navigation items and created the text content.
That did save me some time, but I had to have the knowledge of how this template was created in order to effect the changes I made. Otherwise it would just look like the next person that purchased it. There are some similarities that this site would share with other sites due to the fact the animation was created the way it was. I could leave that animation in tact, which I did because I like it, or I could have created my own using Adobe Flash. I chose to modify what I had as a time saver. Still this site took me 20 hours to change, test, change, test, fix, add, publish, and test again. Without the knowledge I have previously taken the time to gain, this would have easily taken three times the amount of effort. For this template I had to be proficient in XHTML, JavaScript, CSS, and Flash technologies, of course not to mention Dream Weaver which is where I did most of my work.
If you have the time, the desire and the drive to build your own web site, start off with learning XHTML, then CSS, then JavaScript as your basic skill set. You can learn online, or by reading books, preferably both. If you want some good books to start with there is Creating a Website: The Missing Manual by McFarland, CSS: The Missing Manual by McFarland, and JavaScript Unleashed Fourth Edition Wyke. For online learning I would suggest: XHTML, CSS, JavaScript for starters.
In order to build the website, I would suggest purchasing the before mentioned Adobe Creative Suite, and then several books to learn each of the applications in the suite. At the minimum you will need the following books; Dream Weaver (I suggest Dream Weaver the Missing Manual), Photoshop CS4 Classroom in a book, and Illustrator CS4 Classroom in a book. If you plan to have animation on your site, even in a template, you will need to add Flash CS4: The Missing Manual to the list of applications to learn.
If you must cut corners on the software you purchase, I would highly suggest Dream Weaver be your main program. To it you will need photo manipulation software that can adequately optimize photos. You must take most of your photos and reduce them in size in order to make a fast loading page. Otherwise you end up with a slow page and lost visitors. Nobody likes to wait for the page to download. If you use raw photos taken with a digital camera, your file size is going to be 2 – 6 megs per photo. Resizing a picture is not the same as optimizing it for the web. To optimize it you need a program that can do it. You also need a vector graphics program to create the design elements, logos, etc that you also optimize for the web. Every graphic has to be reduced in a way that keeps the detail but looses the overall file size.
Next there is Flash. If you use animation, slide shows, or video on your site or want to, you need Flash. You can make slide shows without Flash, but it is very much preferable to create a flash slideshow opposed to a JavaScript show.
Finally there is WordPress. Since originally creating this site, I have moved to WordPress as my framework. I like the felxibility of design, interface (for updating and creating), as well as the maintainability it affords. In past times, to make a global change took some heavy lifting and many page modifitation efforts. Then there was CSS which allowed for more control over a gloabal design change in one place. WordPress uses CSS, PHP, MySQL, and tons of plugins (similar to apps) that are free open source. You can even make your own plugins and or themes if you cannot find what you are looking for already made. I highly recommend using this framework over all others now. Best part, it is free! I have fully converted this site and the sites of others in my client list to this framework. Once you get past the learning curve, you will fly through design or updates.
[ Home ] [ Beginning ] [ Previous ] [ Next ]