Jen's Kitchen

Web design and development
(DIY or hire pros?)

Chapter 4

In this chapter, we’ll cover the basics of website design and development. This will include core technologies that are used to build a site (HTML and CSS). These are useful if you plan to make your own website from scratch, without using pre-made themes/templates, or if you just want to learn something new.

Also, we will present graphic design principles and tools that can be used to create custom graphic elements for your site. If you are planning to hire a professional to do the custom design work for you, this chapter will help you understand costs and how to find a pro who will best meet your needs.

If you decided to make a website on your own (from scratch) without using pre-made templates and web builders, you will have to wear many hats. That means you’ll be part-time graphic designer and an information architect—and you’ll need to know HTML and CSS. But don’t get too overwhelmed, think of it as simply creating web page. This process can be divided into two broad areas: design (visual) and development (HTML and CSS).

Web page design (DIY)

Page layout

When you are creating a web page for the first time, knowing what direction to go when it comes to its anatomy can be mind boggling. But there are common rules of thumb that will guide you in designing your site.

Most mainstream web pages have the following structural elements:

Header
The header contains content relevant to all pages on your site, such as a logo or website name, and a navigation system. The header is seen on each page.

Main body
This occupies the largest area on a web page. It contains content specific to the page being viewed.

Footer
Footer content usually includes contact information, a shipping address or legal notices. Like the header, the footer appears on every page, but it’s positioned at the bottom.

  • A one-column layout (header, main body and footer)
  • A two-column layout (header, main body, sidebar and footer)
  • A three-column layout (header, main body, two sidebars and footer)

Most websites use a one-column or two-column layout.Single-column layouts also work well for mobile screens, while two-column layouts are especially well suited for tablets. Three-column layouts can get trickier and are only appropriate if you know they’ll always be viewed on desktop computers with large screens.

Visual (graphic) design

When first visiting your website, visitors will decide whether or not they want to stay on your site in three seconds or less. Because of this, it’s critical that the design of your website is appealing, presenting graphics and information that make visitors want to see more.

Graphic design encompasses all the elements that make up the «lalook and feel» of your website. This includes: logos, graphics, fonts and colors. It should be consistent with the visual identity of your brand as it appears on your logo, signage, letterhead and brochures, or other promotional materials.

Visual design is usually presented in the form of sketches and graphic files showing how the website will look. Important elements of visual design include:

Logo
Your logo is the most prominent element of your business identity. If you don’t already have a logo, it’s important to create one that’s professional and reflects well on your business. There are many professional tools and easy-to-use logo design tools that you can try. We’ll discuss this more later in this chapter.

Graphics
Graphics are additional visual elements that you might use on your website. It may include banners, widgets, clipart, icons, photos and images. These should be placed on the page appropriately and match the content of the web page.

Colors
The color combination used on your website also represents your brand identity. You’ll want to pick an appropriate color scheme for your business and industry niche. How to pick a perfect color combination.

Fonts
Fonts should be selected as part of your website design. You’ll want them to be consistent with your brand identity. While there are no absolute rules to follow when choosing a font, it is important that you understand and follow some basic precepts when combining fonts in a design. How to select the right font.

DIY design and editing tools

Logo design Graphics design Colors
Squarespace logo (Free) GIMP (Free) Adobe Kuler
Logogarden (Free) Canva (Free) COLOURlovers
LogoYes ($0.99) Picmonkey (Free photo editing) ColoRotate
DesignMantic ($29) PiktoChart (Infographics free and paid) Color Scheme Designer
GraphicSprings ($39.99) Infogr.am (Infographics free) Fonts
Page layout Google Charts (Free) Google Fonts (Free)
WiteFrame.cc (Free and paid) Picfull (Free photo editing) TypeTester (Free)
Gliffy (Free and paid) Adobe Photoshop (From $9.99/month) Adobe Typekit (Free and paid)
Iplotz (Free and paid) Adobe Illustrator (From $9.99/month) FontDeck (From $7.50/year)
Balsamiq ($79) Corel Paint Shop Pro ($79.99)  

Web page development (DIY)

HTML and CSS are the two core technologies used to build websites. This section will give you the steps needed to develop a web page using the two internet markup languages—HTML and CSS. But before we begin, it is important to understand some basic terminology of the two.

What is HTML?

HTML is the markup language for the structure of Internet content. It refers to the technology that is supported by modern web browsers, and it is an open standard that can be used by anyone without requiring a license. HTML can be used to build a rich, interactive website.

HTML5, the latest markup language, can be used to create web pages that:

  • function when you’re not connected to the web
  • handle HD videos
  • deliver visual content and media-rich graphics
  • organize the structure and presentation of the website

The basics of HTML

The best way to create a web page with HTML is learning by doing. But before getting started, it’s helpful to know some basic terminology, including tags and elements. You should note that an HTML document contains text that includes tags that describe the structure of the document. In other words, they guide the web browser in how to present the document.

HTML tags
HTML has over 100 tags that allow web browsers to interpret and display content. They can be used to emphasize phrases, add media or provide metadata, which describes other data on the site. Some tag examples are: <h1>, <img>, <p>.

HTML elements
These consist of opening tags and corresponding closing tags, and text in between the two. An example is the following: <p> I am learning HTML5 </p>. This is where <p> is the start tag and </p> is a closing tag.

What is CSS?

CSS is the acronym for Cascading Style Sheet. It is a plain text format used by web pages to organize content in proper format for display. It can help define HTML information with size, spacing, border, color and location on a webpage. It can also help create a consistent style throughout multiple web pages.

CSS can be added to HTML elements using a style attribute (inline), using a <style> element in <head> section of HTML (internal) or using a single or more CSS files (external).

A CSS syntax takes the following form: element { property:value; property:value }

  • Element = HTML element name
  • Property = CSS property
  • Value = CSS value

Example of a simple web page

BIG IMAGE

HTML and CSS source file

index.html



{{ DOCTYPE }}
{{ html }}
{{ head }}


{{ /head }}
{{ body }}

food illustration Jen's Kitchen

If you love to read about cooking and eating, would like to find out about some of the best restaurants in the world, or just want a few choice recipes to add to your collection, this is the site for you!;


Copyright 2011, Jennifer Robbins

{{ /body }} {{ /html }}

kitchen.css

body { font: normal 1em Verdana; margin: 1em 10%; } h1 { font: Italic 3em Georgia; color: rgb(23, 109, 109); margin: 1em 0 1em; } img { margin: 0 20px 0 0; } h1 img { margin-bottom: -20px; } small { color: #666666; }

Image file used on the page

food.png

spatula.png

Publish a page on the web

Although you see it as single page, this web page is actually assembled from the four different files shown above: HTML document (index.html), a style sheet (kitchen.css) and two graphics (foods.gif and spoon.gif).

Once you’ve created these files and saved them on your computer, you can upload them via FTP (File Transfer Protocol) to the web hosting server to make your page available online. For more information read our guide “The beginner's guide to web hosting.”

Tips. A simple website can be a collection of static HTML documents, CSS files and image files (see example above), with one file linking to another. However most larger websites have advanced functionality such as forms and dynamic pages handling, databases, shopping carts and content management.

These functions are created by different programming languages (PHP, Python, Ruby, JavaScript, etc.) and are handled by applications on your hosting provider’s web server. This is totally different territory and doesn’t belong to web design. If you need these capabilities, you can get most of them as a pre-packaged solution (CMSs, shopping carts, etc.) without programming them from scratch.

Web page development tools

As you can see, you can create a simple web page that is just an HTML document. But you will need some tools to do that:

Learn to code (online) HTML editing Networking (FTP)
Codeacademy (Free) TextPad (Windows only) CuteFTP (Windows only)
Udacity (Online paid classes) Sublime text (Windows, Mac) FileZilla (Windows only)
Code.org (Free and paid) Coda by Panic (Mac only) Cyberduck (Mac only)
CodeSchool ($29/month) TextMate (Mac only) Fetch (Mac only)

Hire a professional web designer/developer

Are you comfortable doing all this yourself or should you hire a web designer? This is the question you ask yourself when planning to set up a website. And for good reason. With a wide array of do-it-yourself website builders, cheap templates and coding instructions available, why pay someone to do something you can do yourself?

If you do not have any complex requirements of your website, there are tools that will help you build it. For example, if you don’t have design/development skills or funds to hire a professional, you can still build a great-looking website with pre-made templates that are available with CMSs or web builders.

However, if you have a decent budget and want to create complex or custom-designed website, it’s likely you will need help from a web professional. Apart from getting a professionally designed website, the benefits of partnering with a web designer can include the following:

Fresh insight
A web designer can give you a fresh, outside perspective on your business after learning about your potential clients.

Custom functionality
Web designers know how to add custom functions to your website and partnering with them makes the entire development process much easier.

Less chance of error
A web professional can ensure that your website is built properly and you will be able to make a great first impression on website visitors when the site goes live.

That’s where the services of a professional web designer/developer can make a difference.

Choosing a web designer/developer

It’s important that you find the right talent to help you build your site. You need to have a good idea of what help do you need—design and/or development services. You will find that some people specialize only on a specific area of expertise, but many can offer you full-service package.

When selecting a web professional, it’s important to:

  • Understand what level of expertise they have (designer, developer or both).
  • Know what tools and resources will be used to create the website (CMS or builder).
  • Make sure you own the intellectual property; don’t get locked into ownership issues.
  • Make sure the web pro is familiar with search engine optimization (SEO).
  • Get price quotes from several people/companies to compare rates.

How much will it cost?

If you have specific requirements for your website and develop an online strategy, you can hire a professional with the specific knowledge to help you with some of the tasks.

Following are typical fees for different web professionals:

Type Local Outsource
Web designer $30–$120 per hour $10–$50 per hour  
Web developer $30–$120 per hour $10–$50 per hour  
Copywriter $30–$120 per hour $20–$100 per hour

An offshore web designer may charge anywhere from $10 to $50 per hour while an established web designer from the US may charge between $30 and $120 per hour, or more.

If you are not planning to do any of the work related to making a website, there are companies that will complete the entire project for you. Make sure you understand what technology they will use, it can be divided in two categories: template based (using specific CMS or builder) or a fully custom solution. It’s important you know this and understand how you are going to maintain your site.

Typical costs to develop different types of websites follow (domain name and hosting are not included).

Type Template/theme site Custom made site
Business card site $200–$800       $1,000–$2,000    
Portfolio site $1,000–$2,000 $5,000–$20,000  
Product brochure site $1,000–$2,000 $5,000–$20,000  
E-commerce site $1,800–$4,000 $10,000–$80,000
Blog $400–$800       $1,000–$2,000    

If you decide to hire a web development company to create a website at a one-time cost, fees may range anywhere from $400 to $20,000. A custom website design with advanced functionality such as social networking may cost $10,000 to $80,000.

The key to success is to know exactly what you want to be done.

Remember that all the costs are estimates, especially on the minimum end. These numbers should only be considered as a starting point in your negotiations.

The other thing you can do is make a list of everything you want to be done, from menus and content to colors and fonts. Giving exact details about the kind of design you want and your budget will help the web designer to give you the most accurate quote for their services.

Tips. Make sure you buy and register a domain name and hosting account under your own name or your company’s name.

Outsource web design and development services

  • oDesk — freelance design, copywriting and web development services
  • Elance — freelance design, copywriting and web development services
  • Freelancer — freelance design, copywriting and web development services
  • Fiverr — graphics, marketing, fun and more online services for $5
  • Dribbble — a community of designers sharing screenshots of their work, process and projects
  • DesignContest — thousands of professional designers compete for your business
  • 99Designs — a community of designers