The Cultivated Web Blog » Design

Design a Website with Adobe Fireworks

Mitch Cohen — Sat, 05 Mar 2011 16:53:52 +0000

I’ve been a fan of Adobe products for years. For the beginner, the price is a little steep and so is the learning curve. But if you’re serious about your design work, it’s really a good way to go. Once you’ve started up the learning curve you’ll never look back.

As I began thinking about the best way to come up with a totally new design for my site, The Cultivated Web, I wanted to do a good job thinking it through and having a good plan. I’ve used wireframes on a few projects but had never used Adobe Fireworks. I just wasn’t aware of how capable it is in this area. Besides, I knew how to use Illustrator, Photoshop, and Dreamweaver. What else would I need and why would I want to spend more time learning a new program?

I believe I got the answer to those questions from a presentation by Paul Dorian posted on Adobe Inspire site. It walks you through most of the details of creating a wireframe for a layout and then how to skin it (do the visual design work) all in Fireworks. The best part is how well you learn about the time saving aspects of prototyping your design, sharing with your client and other designers on the project, and generating the html and css code to boot. Fireworks is well integrated with the other programs in Adobe’s Creative Suite, so Illustrator, Photoshop, and Dreamweaver are still major tools to continue using.

Take a look at the Fireworks tutorial and leave a comment about your experience with Fireworks or you favorite tools.

Web Designers Should Design Their Own Website

Mitch Cohen — Mon, 14 Feb 2011 00:32:39 +0000

I just had to put this out there because, in my humble opinion, any designer worth his or her salt should design their own site. Specifically, they should not use an online site building tool designed for the masses to create their own website, the purpose of which is to explain the benefits of their services to you, their potential customer.

I’m beginning to work on updating my own website, CultivatedWeb.com, and started to look around and at the websites of other web design firms. I like to see what other folks are doing to get some ideas. Some design work I see is really good, original, and progressive. Other sites I see are very useful in helping me decide what not to do. This is what I found today, a web design firm offering a range of “packages”. But they use an online web design service, which will remain anonymous to protect the innocent, to design their own website. I know this because of the <meta name=”generator” content=”Anonymous Program and Company Name“> tag in all the pages of their site. Give me a break!

A word to the wise: while this is a legitimate business, you get what you pay for. All their packages range between $199 and $649 (dirt cheap) for the one time design fee plus a monthly subscription fee ranging from $10 to $20 per month which is too much for web hosting these days. I have to assume they use the same online site building tool they used for their own site which means your not really going to get an original design. What you will get is a template they modify for you.

I find this approach to be somewhat misleading and somewhat of an insult to designers who really do design, not just pump stuff out of a template.

Buyer beware.

The Advent Calendar for Web Designers and Developers

Mitch Cohen — Sat, 21 Feb 2009 17:22:54 +0000

The more time I spend on the web the more gems I stumble upon. But I did not find this gem on StumbleUpon.com. This time I was venturing into a new (for me) service to reach out a little more and enhance my online identity with Gravatar. What Gravatar does is provide you with a globally recognizable avatar. For those who may not know, an avatar is representation of yourself, in this case a small image. When you open an account and upload your avatar, the Gravatar service will show it on blogs, forums, or any other web site that supports them when you do something like comment on a blog post or participate in a forum.

But I digress. Gravatar is not the gem I am talking about, although I believe it will prove to have value. Gravatar.com is the starting point that led me to 24 Ways to Impress Your Friends, a wonderful collection of web design and development articles and tutorials posted each year on the first 24 days of December. The authors are a diverse group of rather pretigious personas in the web design and development world such as Jeffrey Zeldman, Eric Meyer, and Kevin Yank. As you might expect, the design is a good example of blending functionality, information architecture, and content. Make no mistake, it’s the content (as should be with all web sites) that is the real value here.

I’m interested in what you think about 24 Ways, so leave a comment.

Here’s to the Endurance of the Perishable Press

Mitch Cohen — Tue, 10 Feb 2009 03:04:03 +0000

Sublime, elegant, well written design blog of Jeff Starr. This most informative blog covers a wide range of technologies that pertain to digital design. Jeff reminds me how much I have to learn and I always learn something new. The Perishable Press challenges us all to be better designers. Remember the quote from the potato chip commercial, “I bet you can’t eat one”? Well, I be you can’t just read one Perishable post. They just make you want more and what may start out as a 10 minute visit will often turn into a 30 minute read and an hour of putting your new found knowledge into practice and then going back for more. Head over to Perishable Press and see for yourself.

If Your Website Isn’t Accessible, What Good Is It?

Mitch Cohen — Sun, 01 Feb 2009 15:38:00 +0000

If the search engines can’t find you, how can anyone else? Valik Rudd over at WebDesignIdeas.org gives a good overview of the benefits of making your websites accessible and some good tools to help you do it. Making an accessible website not only involves a good visual appearance, it also requires a usable organization of the site’s information, and the ability to view that content without the visual design aspects of the site. That’s why Rudd suggests using a text-only browser to look at and navigate your site. If you have problems doing so, so will most of the search engines and part of your audience. In a nutshell, good design must allow everyone, including the search engines, the ability to access your content. To do otherwise is like shooting yourself in the foot. Ouch!

Divine Gold: Phine Design

Mitch Cohen — Sun, 01 Feb 2009 01:57:26 +0000

Most of us know that pie are square, especially if you use a square pie pan. Oh! No, no….sorry, wrong pie. I know you’ve heard of Pi, the irrational number equal to the circumference of a circle to the diameter of the circle. Pi = 3.14159265358979323846… The trailing numbers go on forever.

That’s not the same as Phi, another irrational number equal to 1.61803399… What’s interesting about these numbers is how often they pop up in the universe and the world we humans perceive. Now, Pi is a little easier to get your head around because we all know what a circle is and its diameter. But Phi is a little phunnier. So rather that go into where Phi comes from mathematically, you can read all about in Wikipedia. One way to estimate Phi is the Fibonacci sequence. The easiest way to describe this sequence of numbers is this: the number following the number before it is the sum of the two preceding numbers. So it looks like this:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, and so on forever.

If you move into the sequence past the first few numbers and divide any of these numbers by the one preceding it, guess what you get? Phi. It’s actually only a close approximation after all because Phi is irrational. But the further you go in the sequence the more accurate it gets. To wit, 6765 divided by 4181 = 1.618033963… That’s accurate to the 7th decimal.

“Big whoop”, you say. This is just a bunch of boring math stuff. But consider this, the curve of the human ear is the same as the as the Fibonacci spiral. The proportions of the body segments of ants, the body features of an angel fish, the human body, the arrangement of leaves on their stem. There are too many examples to mention here.

If you’ve never heard of the Golden Ratio, Phi, or the Fibonacci Sequence, you really should check them out. They are the basis of many great designs that have been created throughout history by architects, artists, and musicians, and the Creator of the Universe. There are as many ways to apply Phi to a design project as you can imagine and use it to produce just about anything pleasing to the human senses. Just don’t blog about it when you’re hungry.

How to Become a Web Designer

Mitch Cohen — Mon, 19 Jan 2009 01:30:08 +0000

My Story

I don’t’ really know exactly when it began, my interest and desire to be creative. It probably started before I was aware of it. As a child, finger painting was always fun. Some of it showed up early on through the medium of photography. As early as elementary school I loved to take photos. I even learned how to develop black and white film in my darkroom which doubled as the hall bathroom when I wasn’t pretending to be a photographer. I always enjoyed art class in high school, especially projects in sculpting, drawing, and painting. In college I made models of dodecahedrons out of wooden dowels and rubber bands. When personal computers came along in the early 80’s and I bought my first computer, an Atari 400, I directed my creative energy into programming and graphics. The Atari went into the basement when IBM PCs came along. Then the Internet and the World Wide Web became accessible to the public. To their credit, AOL was among the first to offer web hosting as part of their membership and that’s where I really started learning about graphics and html. During the early 90’s, I decided I wanted to be a web designer. But having a family to support with my full time job that paid the bills took up most of my time. Please don’t mistake that statement for a complaint. It’s not. My hope and desire and decision to be a web designer was to one day provide for my family as a web designer. So I became a web designer.

Be a Designer

This is the key point. See yourself as a web designer and be one. I suggest you use this approach to anything you desire in your life. Learn what a web designer does, get the tools, and practice being a web designer. Learn from any source you can find and can afford. Fortunately, you can learn to design web sites from any number of sites on the web at no cost. Tools are freely available and most internet service providers include personal web space for you to host your own site. What a great opportunity to learn and improve your knowledge, skills, and abilities.

I started to be a web designer just building my own website. Then I had the opportunity to build a site for a local nonprofit organization I belonged to. A friend found out I built the site and asked me to build a site for his new business and actually gave me some money to do it. I built another site for another nonprofit. That’s how it starts. Just be it. Let people know you are it. I’m sure you have your own story that brings you to web design. If that’s what floats your boat, let no one tell you it can’t be done. Once a strong desire rises inside you, make it your goal and do whatever it takes to make it come true.

Website Infrastructure

Website infrastructure is just the physical stuff you need to make a website. I’m talking about a web server connected to the internet. Most of us don’t have the wherewithal to set up a web server so we use a web hosting service. As I’m sure you know there’s a big industry that now provides web hosting and finding a service that is suitable for your needs can be confusing. Here are a few things to look for in a web hosting account.

Great customer service and technical support that’s available 24/7/365. There’s nothing worse than to have a problem and not be able to get in touch with someone who will respond quickly.
Reliability of the service. Most reputable hosting companies have state of the art, secure data centers. These facilities are climate controlled, have their own back-up power supplies, and plenty of bandwidth to the Internet. Your website will be online and available almost all of the time. By “almost” all of the time, I mean like 99.99% up time.
Ample bandwidth and file storage capacity. This should not be a problem for most hosting account. The account I use costs about $8.00 a month and I don’t even come close to using half the capacity of the account. This leads to the next point.
Price. You don’t have to spend an arm and a leg for webhosting. Entry level hosting plans that provide all the basic features for a static html website can be had for under $5.00 a month. You’ll pay a little more to get features such as databases and scripting services when you start looking at building a database driven website based on a content management system or other web applications.
Choice of server operating system and web server. My recommendation is to use a server running the Linux OS and the Apache web server as opposed to a Windows OS and Microsoft Server. Apache running on Linux is generally considered more secure and costs less than Microsoft Internet Information Server running on Windows.
A note about registering domain names: some low cost hosting plans entice potential clients with free domain registration for the life of the hosting account. There are two key considerations here.
1. First, when the hosting company registers your domain name, who owns it? Without a doubt you should. If you don’t, the only way to keep your domain name is to keep hosting with the same company. This is a risky practice if you value your domain name. See my post about tips on choosing a good domain name.
2. Second, I urge you to register your domain name independently of your hosting account. By doing so, you can change your web hosting company without having to change your domain registrar. Changing registrars is possible but takes extra work and time. So choose a good, reputable registrar.

Information Architecture

Care to guess what the most important part of a website is? I’ll give you a hint. It’s not the design. It’s the information. As has been said so often for so many years, content is king. You can have a website that’s an absolute work of art, but without quality content that’s well organized, easy to navigate, and of real value to the reader, you don’t have squat. It would be like having a picture frame without the picture. Many web designers will work with their clients to get the initial content for the site before they even start to design the site. The organization of the information, the information architecture, guides the design of the navigation and this all influences the visual design of the site. Content consists of the text, pictures, graphs, charts, audio, video, and another media that communicates the information of the site to the user. Gather as much as you can before you design and build your site.

Web Design Tools

Text Editors

For the business of creating a basic web page, you’ll need some kind of text editor. In the early days, the Notepad program installed on all PCs with Windows was all there was. Today there are many editors of all kinds for text, html, Cascading Style Sheets (CSS) as well as various scripting editors for the likes of JavaScript and PHP. Wikipedia has a great page that provides a comparison of these types of editors. Personally, I use the free and very capable Notepad++ that does everything I need to examine and edit various text based files. Although this paragraph addresses text editors in general, I have referred to several web related scripting languages. Each one is truly a new language to learn. Do not let any of this overwhelm you. No one knows everything about all the technologies that make up the web. At the very least you should learn to work with html and CSS. I dabble in just enough JavaScript to adapt and use scripts developed by people who really know what they are doing. Most of these scripts do seem to have some things in common in their syntax so once you start to get the feel of a couple of them, the others are not complete gibberish.

Graphics Software

Most websites make use of digital images in their design, from backgrounds to borders; from diagrams and charts to photographs. There are two basic ways digital images are made. Most common on the web are raster graphics, also known as bitmaps. Images created this way consist of lots of little dots, each dot forming an element of the picture, or pixel (for picture element). Programs used for creating and editing raster graphics are the GIMP (GNU Image Manipulation Program) and Photoshop.

The other way to make graphics is to use points to create lines and shapes. Images made this way are called vector graphics. For example, to create a triangle using the vector graphics technique, you would 3 points on the canvas and connect them with straight lines. This is a very basic example. I suggest you take advantage of the list of further reading to gain a better understanding.

FTP Software

The usual practice is to design and build your website locally on your PC and then upload it to your web server. The method of transferring the files is called FTP, File Transfer Protocol. Today’s modern FTP programs make it as easy as drag and drop. Once you configure your program to log into your web server via FTP, you’ll see the files on your PC and the filing system of your web server. Just drag and drop from your computer to the server, being sure to maintain the same file structure. Once again you can buy an FTP program or use a free one. I’ve been very satisfied using the free, open source program FileZilla.

The Power Tools

Well, that’s what I call them. There’s much more to designing an entire web site than creating one design for pages. Productivity becomes important. Once you start learning the basics of making web pages, filling them with content and organizing them in a meaningful way, you’ll really appreciate having software that not only edits text, html, CSS, and the rest, but also automates some of the coding and other tasks. MS FrontPage is an early example of such software. Adobe Dreamweaver is very popular for this purpose. Microsoft replaced FrontPage with their new program called Microsoft Expression. You’ll have to fork over a very pretty penny for these babies. As of this writing, Dreamweaver sells for $399 and Expression goes for $699.

But don’t be dismayed. There are some low cost or no cost alternatives to get you started. Take a look at the free Nvu, SeaMonkey, and KompoZer, all of which have WYSIWYG editors. I have not tried SeaMonkey or KompoZer, but I have tried Nvu and found it pretty darn good, especially for a free product. For just a little coin, you can buy CoffeeCup HTML Editor 2008 for $49.00. Try it free for 30 days.

How to Start Learning

Play. Yep. Play. Start by downloading and installing some of the programs mentioned here and play with them. In addition to articles in Wikipedia, the web is full of tutorials and videos that show you how to use them. How about this novel idea? Go to the library and find a book on Photoshop or any of the other technologies. Classes at community colleges are also good. Better yet, make computer science and web design your major and get a degree. However you decide to do it, get serious about satisfying your desire to be a web designer and play. It’s fun. By the way, I still have my full time job that pays the bills. But I also am a web designer, and pretty soon, it will be my next full time career that pays the bills.

Do You Need to Smash Your Creativity?

Mitch Cohen — Thu, 08 Jan 2009 00:58:43 +0000

I started with the intention to write a post about some great tutorials on using Illustrator. When I started looking at those tutorials, I really had to resist the temptation to watch them and try them out myself. But I stayed on track for about 5 minutes until I became so impressed with all the other great content for web designers and web developers at Smashing Magazine. They have so much such for web design and web application development it’s mind boggling. Tutorials, how-to articles, tools of all kinds, design principles, fonts, graphics, icons, wallpapers, and on and on. This site is such a great resource I’ve added it to my list of resources at the right side of this blog. Smash On!

To Sub or not to Sub…that is the question.

Mitch Cohen — Thu, 04 Dec 2008 01:50:22 +0000

The other day a friend of mine asked me about setting up a blog. He’s planning to lay the foundation of an internet business and is following a blue print that lays out all the steps to be successful. Blogging is part of the process. In the course of the conversation, I mentioned one alternative to installing a blog in a folder. That alternative is using a subdomain for the blog. He asked some good questions about the pros and cons. I had a few ideas about it such as using a folder being a little simpler, but a blog would have a more distinct identity in a subdomain while still having a relationship to its parent domain. But there are other considerations as I learned after doing a little research. A lot of it depends on your goals and the size of your web site.

If you intend to do nothing but blog on your domain name, then by all means, just install your blog in the root of your web hosting account and have your visitors come directly to your blog when they enter your web address. But if you intend to have a separate website that stands on its own, it’s time to consider the pros and cons of using a subfolder or a subdomain. For those of you who are ambitious, big thinkers and you envision building out a large and complex site, subdomains can be helpful to separate distinct areas of subject matter. This is also useful to improve search engine indexing and rankings. Search engines treat sites in subdomains as unique sites. So if you provide good content with links back to your primary site in your subdomain blog, this can improve search rankings if done properly. See this tip sheet from Net Mechanic for some of the potential pitfalls. Try this search for more information on the question.

Here’s an example of an organization that’s using a subdomain for their blog. As you’ll see in the blogroll at the bottom of the left column, there’s no one-size-fits-all answer. Learn a little and take your best shot. You can always make changes if needed.