If you need to advertise your business a website is the best way of reaching clients.

It's important that your website looks good and works well on any device.

Google must find your website when people search for your business or your location.

I can help you achieve all these things at an extremely competitive rate.

Below are some examples of my work:

If you feel I can help you please contact me to discuss, no obligations, on 0410 346 344 or email odeaju@gmail.com

 

Justin O'Dea

 

If you've ever written an application and wished it looked a little better, then this book is for you. If you've ever looked at your favorite website and tried to pull apart the CSS to figure out how it works, you're reading the right book. If you've ever wondered how many licks it takes to get to the center of a Tootsie Pop, then you should consult Wikipedia because this book doesn't cover that.

This book covers the web-design process for programmers who have little to no design background. Underneath all the pretty colors and nice layouts, websites require an awful lot of programming to get just right. You must follow rules and best practices when working with Java, Ruby, or C#; the same is true of designing websites if you want to achieve the desired result.

Before We Get Started... Good web design is about much more than creating pretty pages. Basic concepts such as color theory, typography, layout, and usability are all part of a good design. These things work together to make the site succeed for users. You could pick all the right colors and use smooth gradients, but if you don't use a readable font, your site isn't designed well. You could whip up something awesome in Photoshop or GIMP, but you'll never be able to make it look good in a browser if you don't know how HTML and CSS work. If you have sloppy markup, your JavaScript won't work as you expect it to work. If you don't optimize your content, search engines will hate your site. And if you take accessibility and usability for granted, your users will hate your site even more.

There Is No One True Way This book is aimed at the programmer who wants to learn about web design. The method this book uses is an effective entry-level web-design process, and although it's certainly not the only way to build websites, the techniques described in this book will make you well prepared to explore other techniques so that you can develop your own workflow. As you work through our example, you will find many places in which you might have made a different decision than I did or used a different technique. That's great! I've made these choices to help you get started as a designer. Over time, you'll change, and so will popular tastes. I look forward to seeing the sites you create. Another key aspect to good web design is creativity. I want you to focus on your own creativity when you work through the exercises in this book. I will show you how to build a site in this book to illustrate the design process, but my hope is that you won't completely follow every example exactly as shown. I want you to pick your own colors and fonts, using this book as a guide to make your own design. As you implement your own design, you'll learn a lot about the theory behind web design. It is my hope that the site you design will look completely different from the example shown at the end of the book.

Your programming experience will help you build an attractive web page. For the first half of this book, you will live in the world of the designer. You will learn about colors and fonts because they are important parts of creating a good design. You'll also learn how to use the tools and techniques that designers prefer. Once we cover the appropriate theory, you'll have some code to write. After all, that's what you expect from a book for programmers, right?

The Design Process in Action A good way to understand the typical web-design process is to follow Ron, a busy web developer, as he works with a client to create a small web page.

Designers do. If you're not seeing it where you work, you probably spend a lot of your time around skilled CSS coders, not designers. I know tons of programmers who routinely receive a Photoshop file (PSD) from a graphic artist. Part of a developer's job is to incorporate that design into a web application, and learning how to handle PSDs is part of the design process.

We will use Photoshop mock-ups in this book for two reasons. They are good vehicles for describing many parts of the design process, and it's easier to learn CSS concepts when you have working color mock-ups to follow.

Ron has a new client, a real-estate agent. The agent needs a simple content system to manage her property listings. After an initial meeting with Kim, the realtor, Ron grabs a pen and sheet of paper, and he starts sketching the home page. He draws many different designs and then picks the three designs that he thinks will work best, given Kim's needs.

He meets again with Kim to discuss the three designs. Kim selects one of the sketches and makes some suggestions. When Ron brings up colors, Kim decides on a color scheme of blue, gray, and white because these colors are similar to the ones on her business card.

Later that day, Ron sits down at his computer, opens Photoshop, and quickly mocks up the home page using the finished sketch and Kim's preferred colors as his guide. He grabs a few royalty-free stock images and places them on the mock-up. He spends a little time looking at various shades of blues and grays until he gets something he likes. Once he's done, he exports the document and sends it off to Kim to get some feedback.

After waiting a week, Ron calls up Kim to get her opinion on what he's done so far. She tells him she'll take a look at it when she gets back from her vacation in a week.

Another week goes by, and Ron finally gets a call from Kim. She says she likes how it looks, and she wants to move forward. Relieved, Ron fires up his trusty text editor and begins the transition from mock-up to web page.

Ron begins by creating a simple HTML document that defines the structure and content for the page. Next, he uses Photoshop to slice up his mock-up so he can extract the banner graphics and other images, which he then inserts into the HTML document.

Next, he carefully codes some CSS to pull the whole thing together. The style sheets transform the linear-page skeleton into a brightly colored, two-column layout.

Ron opens up the new web page in Firefox, and everything looks great, just like his mock-up. He then fires up Internet Explorer 6 and winces at the ugly page staring back at him.

Fortunately, Ron has seen this kind of thing before, so he quickly throws in a few extra style definitions in an IE-only style sheet. Presto! He's ready to show Kim the finished page.

Kim loves the site, and Ron is ready to start building the rest of the pages for the site. Now that Ron has worked out the colors, the images, and the style sheets, it will be easy to produce the rest of the site. Ron can take pride in the fact that he's made his new client happy.

Ron got lucky this time. He got an easy-to-please client. Unfortunately, clients are not always so easy to please, as you'll see when dealing with the stakeholders of the Justin website that we'll use as a running example in this book.

1.3 You just finished a website for a company that has obtained financial backing to build the ultimate recipe-sharing website. The site will allow users to search thousands of recipes, contribute their own recipes, and offer variations on existing ones. You're supposed to launch the site next week, but you've just shown the finished product to the stakeholders, and although they think the functionality is intact, they can't stand how it looks. They don't think it "feels right," and they would like something more eye-catching. Of course, they can't give you any concrete ideas, and you will need to use your experience at gathering requirements to figure out what they want so you can make them happier.

The chapters in this book will guide you through this all-too-common scenario. You'll learn about the process of picking colors, choosing fonts, creating buttons, optimizing images, and using a grid to build the template for the site. You'll learn how to make web forms look a little nicer, and you'll learn assorted tips and tricks to make your site work across multiple browsers and platforms. After you finish building the site, you'll learn how to make it friendlier to search engines, as well as how to squeeze a few more drops of performance out of your pages.

You'll also find that it's important to me that your website be accessible to the widest possible audience. We'll try to make sure that people with disabilities can easily work with the site. This is a good business decision for you and personally important to me because I, along with my father and daughter, was born with congenital cataracts that affect my vision. We won't tackle accessibility issues in depth until later in the book, but I will make references to various accessibility and usability topics as we work through the examples.

Justin, our example site, is an online community where users can post recipes and share them with the world. It's intended to be one of those trendy social-networking sites where users can tag recipes, leave comments, and build their own cookbooks.

The site has financial backing and a talented group of application developers. Steve, your fellow developer, has just finished presenting the demo to the stakeholders. He tosses a notepad on your desk filled with bullet points from the meeting.

"They hate the home page," Steve says. "They hate the banner. They hate the colors. They think it's too bland, and they want to see the things on this list addressed before they'll even look at the rest of the site."

It's also important to realize that in the world of design, one person's masterpiece is another person's terrible design. Your challenge is to take what's in this book and put your own spin on it. Pick your own fonts, colors, and design, using this book as a guide.

Finally, you should reserve your domain names as soon as you think of them. You'll notice that our Justin site has the http:// www.URL and that http://www.Justin.com is a different site. A domain name is cheap if you're the initial buyer, but it can be expensive if you have to buy it from someone who already owns it! In our case, someone else already owns the http://www.Justin.com site.

Where do you start? First, try to understand what your clients think they want from the site you are designing. The feedback you got is a good starting point, but often a list like this means you did not do enough discovery the first time around. Gathering requirements is as important to design as it is to development. You need to use your experience as a developer to get the answers you need to solve your customers' problems.

Second, make sure you understand the real purpose of the site and that you have a feel for the intended audience. Different audiences will have different expectations and interact with sites differently. So, find out who your client's target audience is, and then research the competition to learn its strengths and weaknesses. This research will help you ask your clients all-important questions such as, "Have you thought about this?"

Finally, once you get a list of requirements together, start sketching while you process all this information. Yes, I said sketch, as in pen and paper. We'll get into why in a bit, but first let's talk about how to extract the information we need from the clients.

Clients Are Difficult, but Don't Be Too Hard on Them It's can be tough to deal with the odd requests you get from your clients. The thing you have to remember is that they hired you for your expertise. It's your job to figure out what they truly want. They don't know how to tell you what's wrong with the site, so they do the best they can. You have to use your experience to listen beyond what they are able to express to you so you can understand what's really bothering them. Many developers say that clients don't know what they want. I'd say that they just don't know how to tell you, and what they want becomes clear to them only after they see something that doesn't work for them. You can get the best results by constantly communicating and showing things to your clients so that they can tell you whether or not you're on the right track. This constant communication works as well in design as it does when building an application. 2.2 Gathering Requirements If you were to redesign an existing application, you'd need to know exactly what it is that the app is supposed to do. You'd interview the stakeholders and users. You'd also dig into the source code and play around with the current system. You might also investigate what the competition is doing. You need to follow the same process that you use when redesigning a website.

Start by gathering requirements, as you would for any other project. In this case, you can look back at the list of notes that Steve has dumped on your desk from Section 2.1, The Existing Site, on page 20. You should start to see some basic requirements for your design.

You can see that you'll need to learn how to make buttons and other graphics. You will use some of the buttons as links; you might need to use others to replace form buttons.

You want to be careful not to follow all the latest fads, but you also want to balance that against the desires of your clients. Reflective text and images are popular, and your client wants them. You need to learn how to reflect things, something we can do easily in Photoshop. You'll also need to draw a digital copy of the logo for the site, which will give you a chance to learn how to create scalable vector graphics.

The color requirements mean that you'll need to learn some basic color theory and learn how to select appropriate colors. Also, you can soften the look of a website or web application by using images, color, and some CSS tricks. This will address the concerns the client has with the look of the forms.

This is a food site, so you'll need to get your hands on pictures of food. Competing recipe websites are adorned with imagery that makes people hungry. When you do manage to find some pictures, you might have to modify them to work with your site. This will involve doing some photo retouching, lightening, darkening, and resampling.

Some requests might not seem clear or reasonable. Don't feel overwhelmed when clients say they want the site to look more fun. Having heard this one myself many times, I can say only that you'll accomplish this one by brute force, trial and error, and a little luck. If you accomplish the rest of these requirements, then you'll be in good shape.

Even worse is when the client asks you to create something exactly like an established site, except different. At least that request conveys useful information; look back to Steve's list, and you'll see that the last stakeholder in his list basically leaves you sitting there without a clue about how to respond. So don't. It might seem like a bad idea at first, but a comment like this is one that you should quietly ignore. Follow good design principles and solicit constant feedback from your clients, and these kinds of requests should work themselves out.

Know Your Purpose As you design this site, keep your focus on serving your target audience. One useful approach is to get the clients to list a few websites they would like you to use as a reference. You don't want to use these as a model, but knowing about them can help you gauge what elements your clients like. Usually, clients will look at what their direct competition is doing, but others will try to design their site based on sites in an unrelated field. It's common for people to say things like, "Do it just like eBay does it." Your clients want these features because they are familiar to them.

As you work on the design for Justin, be sure you make the site for your client and her users, not for yourself so that you can show off to your colleagues. Don't throw in some flashy new technique you just learned so that you can impress your co-workers. The client and her users come first.

Keep Your Focus on Your Audience I had a client a few years ago who hired me to redesign a site of about 100 pages. He wanted something that would help him sell his services more effectively. The original site was something a family friend had developed for him, and it consisted of a few stolen images from other sites, a couple of animated icons, neon colors on a black background, and a bit of JavaScript that placed the company's phone number on the end of the mouse cursor, so it waved around as you moved the mouse. This client ran a respectable business, but he had a website that did nothing to project that image. When I presented my first design, it was immediately rejected because it wasn't funenough. The client kept asking me to look at a few radio-station sites that he liked, and I had to explain to him that he was in a completely different market. After many hours of negotiating, gentle prodding, and careful compromise, we ended up with a great site that kicked his company into high gear. Within a couple of years, his sales multiplied several times, and he continues to thank me for steering him in the right direction. The point here is to remember that, above all else, you need to design your sites with the intended audience and the goals of the site firmly in mind. You'll probably need to give in on a few things, but the end result will be a better site. Make sure everyone understands the site's purpose. Is the site meant to present information, encourage consumers to purchase products, entertain users, or collect data? For example, you would design and present a website for an upcoming summer blockbuster differently than you would for an online retailer.

You'll also need to learn as much as you can about the site's audience. You will need to ask all sorts of questions. Will these be casual visitors who will occasionally use the site, or will they be experts in the field who will use this site on a daily basis to get their work done? Knowing your audience will help you plan the scope of your design. For example, you would design a site for younger children much differently than you would a site for real-estate agents.

Where to Go from Here You've gathered the requirements, and you have a good understanding of the site that you're trying to build. Now it's time to come up with an implementation plan. If you break the requirements into logical steps, they might look like this:

Sketch some basic designs and get one approved. 2. Select colors. 3. Select fonts. 4. Implement the basic design in Photoshop. 5. Create images for the banner, buttons, and other elements. 6. Create an HTML and CSS template. 7. Test your designs for compatibility and accessibility. The rest of this book will walk you through this process, teaching you various techniques and the theory behind them along the way.

Pencil and paper are important to the creative process, and you can draw much more quickly with these tools than you can with a computer. Also, it's easier for you to throw away early designs because you have so little invested in them.

If you've been a programmer for a while, you probably have access to a whiteboard, and I'd be willing to bet that you draw simple diagrams on that to communicate with the rest of your team. Apply this same approach to your meetings with your clients. A nontechnical client might be put off if you pull out your laptop and start typing and clicking away on a design, but pencil and paper can be a great interpersonal communication tool. Sketch your ideas in front of your client, and then hand your client the pencil to see what ideas he has for the site.

The point of this is to facilitate communication with your team and your clients. Your initial designs might end up looking nothing like your final product, but any designer will tell you that's normal. You could spend hours on digital versions, or you could spend minutes with a pencil and some paper.

Sketching Your Ideas You should draw your designs on paper to capture your ideas quickly. Doing so makes it easy to share your ideas with others or to make adjustments to them. You can even get your client to help.

You've probably noticed that websites tend to have many things in common. Most have a header region that displays the site's name or logo. Many sites also have their main content region divided into columns, and at least one of those columns is often used as a sidebar region that might contain navigation elements or additional information. It's also likely that the site has a navigation bar either across the top of the page or along the left side. Finally, you can usually find a footer region that contains copyright information and maybe some additional links.

The most obvious reason for this similarity between sites is that designers and developers imitate what works. It's no coincidence that many news sites look the same. In fact, most newspapers follow the same layout.

Dionysus Winery Digs Sportswear Jim Murphy Wine Storage Tuesday Blind Tastings Dock 5 AAANZ Directory Gallagher Wines JRC Bricklaying