7 Fundamental Aspects of Great Website Design

1.Professional Appearance

When designing a website for a client we often ask some basic questions such as; what is the target demographic? What will your clients or customers be looking for? Knowing your audience or target demographic is key to help building a professional look and feel for your website. If your target demographic is other businesses (B2B), then perhaps you may not want to build a website with florescent text and technicolor blinking backgrounds. Potential clients will leave your website even if you have great content. A theme for your website should be kept consistent so every page looks alike and is easily readable. There are a lot of websites that are difficult to read due to font choice, size or color. Make sure that there is enough contrast between the color of the text and the background because we don’t want users straining their eyes to read the content on the page. You have three seconds to capture their attention. You better act fast!

2.Clear, Concise, and Consistent Navigation

If users cannot figure out how to navigate your website quickly, they will most likely exit your website. Throughout your website it is ideal to keep your navigation structure consistent. When designing navigation for your website make sure that your links stand out and do not look similar the rest of the text on the page. There should be a navigation link to go to the homepage on every page of your website. A common practice is to make the main logo a link to the homepage. The desired content should never be more then “2 clicks” away.

3.Professional Photography

“A picture can speak a thousand words.” This is a very old but true statement. Not all users enjoy reading. In today’s world, everybody wants everything right now. And there’s no better way to illustrate what a piece of content is about than a visually striking image. Making your website visually stimulating is the goal. When adding an image to your website make sure to give it a file name related to the image. Search engines like Google and Yahoo cannot read images but can read titles, file names, and alternate descriptions. Image alternate descriptions lets the Search Engine fully understand your image by adding alternate attributes to your images. These alternate attributes should include keywords describing your image. Reducing the images file size is very important because people who have slow Internet connections or people using PDA’s will lose interest if the page takes too long to load. You want to give users a fast load time by having the highest quality image and the lowest possible file size.

4.Load Time/ Page Speed

Responsive and fast loading websites make users feel empowered and in-control. You can get faster load times by properly sizing images, audio, and video. If not resized properly they can drastically reduce your page load speed. “Who wants to sit around for 10 seconds and wait for a page to load?”…Not us! The benefit of a fast loading time, from a search engines point of view, is that faster loading pages provide a better browsing experience for the user, which translates into the kind of quality links that they strive to deliver. Recent statements from Yahoo and Google about slow load times is that it may effect your website’s Search Engine rank.

5.Cross Browser Compliancy:

By definition, cross browser compliancy refers to the ability for a website, web application, HTML construct or client-side script to support multiple web browsers. It is important for your website to be usable across all operating systems, web browsers, devices, mobile devices, and any other platform that displays your website. The problem with cross browser compliancy is that there are new browsers and devices debuting what feels like monthly, yet we still have the older web browsers like Internet Explorer 6 lingering around. In order to maintain cross browser compliancy, you must adhere to standards based compliant HTML code. This will ensure the highest likelihood that your website will look identical on all devices and browsers.

6.Quality Coding Structure:

When developing your website it is imperative to make sure that it is coded properly using standards based HTML and CSS. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. The title tag is what is displayed at the top of your browser. This gives users a brief description of the content on the page. Search Engines display the title tag when listing results of a search. CSS deals with the website layout, color, font, backgrounds, and other items. CSS defines how HTML elements are to be displayed. Styles are normally saved in external [.css] files. External style sheets enable you to change the appearance and layout of the pages in a website, just by editing one single file.

7.Content:

Good quality content on website is vital. It is important that your content is relevant to your website. Paragraph lengths should be brief and only be about 1-4 sentences long. It is recommended to not have long blocks of text. The sentence length should be about 10 words or fewer. If you do have medium to long sentences they should be spread out and not clumped together. Lists are a great way to make the page look more organized. Bullets and numbered lists help keep those long sentences out of your content. Your content should contain numerous terms that are related to the keywords you wish to target, as well as variations of those keywords. Spelling and grammar should be double checked to ensure that Search Engines will not drop your rank due to misspellings. It is recommended that you or your company frequently update your content as much as possible. This lets your users and Search Engines know that your website is being maintained and that new content is added on regular basis.

Without being well-versed in the process of creating a new interactive web site or web-based application, getting started planning your site is difficult. By understanding what goes into the creation of a dynamic web site, it will become easier and faster to explain the structure of your web site in a way that will make sense to everybody involved from the designers to the developers to the end users.

How do I get started planning?

At the core of any good application is a solid structure. The structure defines all of the objects that are represented on your website and how they fit together. Objects on your website will mirror the objects in your business. As web designers, we have knowledge of how to create a useful website but not how to run your business. This model should contain all of the objects necessary for somebody to understand what your application does and the connections between the objects should provide how the application is intended to work.

The model for your application can be compared to the framing of a house. A solid frame is required before continuing construction of the house. Likewise, it can be difficult to go back and move a wall after the next steps in the construction have taken place.

By working out this model before construction begins, you can be assured that your application contains everything that you need to communicate with your users. A solid plan guarantees that neither party needs to waste time re-clarifying the purpose of the site or a specific function further down the road.

Creating a Model

Objects represented in your database can be anything that you need to keep track of. In this article, we are going to be creating a model for an application to keep track of employee hours and their activities for a delivery company. We will be keeping track of office locations, managers, delivery drivers, their time sheets and their meetings. Each type of object can contain properties for storing more information about the object. The time sheet object may contain properties to further describe the hours worked for a day such as whether or not to deduct time for a lunch break or if these hours are to be counted as overtime.

In the diagram above, objects are arranged vertically with parent objects on top of child objects: a user will belong to a user type and a location, a time sheet will belong to a user, locations contain links to both users and finances, etc.

Web applications can allow for multiple types of users to log in and be presented with different information. In our time sheet application we have two types of users: managers and administrators. Managers have the ability to log in and input time sheet hours and meeting information for their own employees. Administrators can log in to add and delete managers, their delivery drivers, and even their time sheets. Planning out these roles on the website are crucial to ensuring proper function and security.

When moving to the next steps in the design of your web site it is useful to provide estimated quantities of each object type. By giving this information up front we are able to make the best decisions on how to design the software and what type of hardware to run it on. Some quantities are easy to figure out; in our time sheet application, each employee will have one time sheet for each day. Some quantities are specific to your operation; an application to keep track of fifteen employees will require less resources than fifteen thousand employees.

Connections

Just knowing what objects are going to be represented in an application is not enough. In order to figure out how the application is going to work, the connections between them must also be defined. There are three types of connections between objects that are useful in planning your model.

One to Many

The most common type of link between objects is when an object contains links to many of another type of object. In our time sheet application, each user will have many time sheets and each time sheet will belong to an user.

One to One

The simplest type of connection is when one object of a particular type is linked directly to one object of another type. If we wanted to keep track of which computer an employee is currently using we would need to state each employee has one computer. The computer object would contain properties such as the computer’s serial number and what programs are installed on it.

With connections that define when one object has only one of another object it may seem like it would make sense to combine object types. It may seem possible in the above example to keep track of the employee’s computer serial number as simply a property of the employee. This type of oversimplification can cause problems when you want to keep more information about the computer or transfer the computer to another employee.

Many to Many

The last type of connection is when one type of object is connected to connected to another type of object many times in both directions. If we wanted to expand our time sheet application to include projects we would need to link an employee to many projects and each project to many employees.

What does a completed application look like?

Designing the site is where our expertise in user interface design can transform your model into a streamlined interaction for your users. After agreeing upon a solid model that covers all aspects of the site it is possible to make useful interfaces for your users to access your website. Your model will allow us to allow us to find the easiest way to transmit the necessary information from your website to your users and from your users back to your website.

We can begin calculating the best ways for people to interact with your web site in order to minimize input errors and eliminate confusion about how to use the site. Most websites begin with some wire frame diagrams on paper to decide what information is going to be on each page.

Our work designing the website is similar to figuring out the interior design of a house. The framing to define the rooms is necessary before deciding where to put the furniture in a room. Multiple kitchen arrangements will yield varied productivity just as different user interfaces will effect how successful users are at interacting with your website.

Our recently completed Creation Gardens Web Application provides their business with a tool for automating their time sheet system in a simple, usable interface.

After the interface has been decided upon, the site can be completed. Similar to the plumbing and electrical systems of a house, the back end system is the last step to creating a fully functioning website.

Woof & Poof offers many products such as Christmas ornaments, holiday decorations, aprons, hot water bottles, clothes, blankets, bibs, collectible bean bags, music dolls, and can be found in over 600 retailers across the country; like Nordstroms. Woof & Poof’s merchandise is handcrafted and made with exceptional quality and care for everyone to enjoy and love. Our boutique style website designed for Woof & Poof was made to catch the attention of their online visitors and to showcase their designs, handcrafted decorations, and gifts that they offer.

Chico Web Design contributed to Woof & Poof’s brand design with our very own label design, which were used on aprons for Nordstroms retail stores. We have the brand design, print experience, and creative expertise to make your product stand out from the rest.

Chico Web Design crafts eye catching product labels that will make customers turn their heads and come back for more. Chico Web Design also worked with their local boutique, Made in Chico, to design new product labels  for a variety of food packaging.  Items such as almonds, jam, and candy all received a new fresh look and packaged feel. Chico Web Design worked closely with Made in Chico to create the label design that best fit their product merchandise.

Chico Web Design offers an assortment of design services including website design, website development, print design, and web hosting for the greater Sacramento area. While companies are marketing their businesses and spending money on traditional advertisements, Sacramento companies can hire Chico Web Design to design a website. theWebsites are the least expensive way to advertise and the easiest way for customers to obtain information about your business.

Chico Web Design can provide custom website designs for Sacramento in the following industries:

• Financial
• Insurance
• Agriculture
• Public safety
• Online retailer
• Music industry
• Boutiques
• Law Firms
• Architecture Firms
• Restaurants
• Construction Firms
• Much, much, more

We work closely with our design clients to get the appearance and functionality that they are looking for, insuring our customer’s satisfaction.

Sacramento Web Development

Chico Web Design has a experienced web development team that can apply your business requirements into a fully automated, easy to use, business solution. We have the advanced tools to help you manage your content, place inventory online, or craft an online retail experience for your customers. We make it easy to promote your business and maintain your website with little to no knowledge of HTML. Our content management tools and custom built framework allows administrators too add content, photo galleries, current news, web blog entries, calendar events, and much more. With the click of a mouse you can log into your secure website tools and change the content from anywhere, on any computer, at anytime.

Sacramento Graphic Design

Chico Web Design has the creativity for your business to give it the edge over your competitors when it comes to print marketing collateral. From logo design to tradeshow booths, we have professional and knowledgeable designers who have experience in designing just about anything. Business cards design, T-shirt design, magazine ads, even custom gift certificates, we will work closely with you and your business to get your ideas and turn them into a reality.

Sacramento Web Hosting

Not only do we offer web design, print design, and web development services, but we also specialize in web hosting in Sacramento. In order for your business website to be seen on the web, the website we create for your business needs to hosted on a web server. Our servers, which are multi-homed, 16 core servers, will make sure that your website loads at lighting speeds. We offer both Linux and Windows based hosting solutions along with shared hosting. Chico Web Design has the capacity to manage dedicated servers as well as co-locate multi-tiered solutions with our data center partners in Sacramento California. We have a full time server manager to proactively maintain all web servers. We also are prepared for anything that happens unexpectedly, so we perform offsite backups on a nightly, weekly, and monthly basis to protect your data.

Esplanade Office, located in Chico California, wanted to emphasize their industry leading position by updating their web presence.

Read More

Client: My Independent Contractor
Location: Chico, CA
Industry: Independent Contractors, Construction
Spotlight: Create a web site which allows independent contractors to create their own website
Technologies used: PHP, MySQL, HTML & CSS, JavaScript, Flash, XML

Read more about My Independent Contractor

When asked by the owners of McGrath Woodworks to create a website for their business, Chico Web Design’s creativity kicked into high gear! With no previous website or marketing materials, Chico Web Design started from scratch to create McGrath Woodworks brand and image. From business cards, tradeshow banners and truck magnets, to a fully dynamic website.

McGrath Woodworks needed a solution which allowed them to easily update and maintain their own products. We had the perfection solution for them. With our Mavieo Content Management system, we were able to seamlessly integrate their websites look and feel with a graphical administration interface making uploading products, modifying content, and editing categories a breeze.

Launch McGrath Woodworks

Other Design Items

Getting well underway to a new Blog for LuLus.com!

Every website that we design at Chico Web Design starts as an idea.  Based on those ideas and client interactions, we put pen to paper and begin creating website design mockups.  Depending on the requirements, a full set of design comps will typically begin with a home page and inner content page.  More advanced web sites introduce member sections, payment details, and can go upwards of a dozen or so independent mockups.

Just as a builder draws blueprints, Chico Web Design creates our own set of blueprints for several reasons.

• It’s cheaper and less laborious to make changes in this phase
• It gives the client an idea of what their site could look like without the investment of full development
• Allows for open collaboration between our creative teams and our clients
• Gives us a venue to express our ideas about your business and site
• Sets the tone for the remainder of the pages