5 Steps to a Successful Web Design (or Re-Design) Part 4

Tweet Today we bring you part four of a four-part series on effective website design.

Step Five – Testing & Maintenance

In “Step Four – Code”, a few applications were mentioned as tools that aid web designers to code their sites. Those same programs can aid in the testing step. The higher end editing programs: Dreamweaver, Coda and Aptana, include validation services. Simply running these commands in the program may solve a lot of issues that may occur during coding. You don’t have this luxury if you are using a basic text editor, but you are not out of luck. W3C has a code validation service http://validator.w3.org/, which allows you to validate a site via a URL, ftp upload or directly placing the code into a form field.

For visual testing, it is important to have a copy of each browser available. Again, download Firefox, Safari, Google Chrome and Internet Explorer. For multiple versions of Internet Explorer, use IE Tester http://www.my-debugbar.com/wiki/IETester/HomePage. Check that elements are aligned as intended, spacing is consistent and check for script errors.

Fix Internet Explorer specific issues by targeting the version causing an issue and resolving it with a specific fix. This can be done by creating an IE specific CSS file with the specific fix included by using an if/then conditional in the HTML. This technique will come in handy for any differences in the Explorer version of your site.

EX: This specifically targets all Internet Explorer browsers under version 7.

Test, then test again. Have someone else test the site. If you are not fortunate enough to have a group of people to test the site, send it to friends and family. Take note of technical issues as well as any complaints/suggestions about user interface. Having people other than you, that have never seen the site, test for you is a great asset. It is sometimes nice to stand over the shoulder and take notes, quietly.

The five steps mentioned in these posts are a good overview to the process. Additional information can be found on the web as well. Remember to observe the accessibility rules, pay attention to trends in web design and keep your code clean. With the upcoming release of HTML5 and CSS3, there are new possibilities on the horizon to take note of as well. Web design is a constant learning process, but the basics remain the same. The most important step is gathering the right information in the beginning. This gives a clear direction and allows for a smooth flow between all of the steps of the design process.

5 Steps to a Successful Web Design (or Re-Design) Part 3

Tweet

Today we bring you part three of a four-part series on effective website design.

Step Four - Code.
This is written for someone with some knowledge of HTML and CSS.

There are tools available to aid a designer when coding the front-end of a website. First of all, you will need an HTML editor. There are a number of very powerful applications available for editing: Adobe Dreamweaver, Aptana Studio, Coda (Mac), TextMate (Mac), but editing can also be done in something as simple as NotePad or TextEdit. Second of all, every web designer should have every major browser loaded on their system for testing. For multiple versions of Internet Explorer, I suggest IE Tester http://www.my-debugbar.com/wiki/IETester/HomePage. Some other tools to be aware of are Firefox add-on called Web Developer Tools https://addons.mozilla.org/en-US/firefox/addon/60 and FireBug https://addons.mozilla.org/en-US/firefox/addon/1843. These tools allow you to debug and monitor code on any pages you build.

Now that you have the right tools there are some good rules of thumb to follow when actually writing your code.

1. Start the document with the correct doctype. This is the very first part of any web page:
2. Place all custom Styles into external CSS files and link between the tags of the HTML document.
3. Reduce page load times by placing any at the end of the document, just before the ending tag. This may not work for all but it is worth experimenting to reduce load times.
4. For ease of readability, indent HTML tags that are inside of other HTML tags and comment after closing tags so that their hierarchy is clear.
5. Learn all of the HTML tags.
6. Learn all of the CSS attributes
7. Use CSS shorthand and combining properties in a single line. This is more efficient for the browser and more efficient when editing.

The original CSS…

• p {
  
  • font: bold 12px "Trebuchet MS", Verdana, Arial, sans;
  • font-style:bold;
  • font-weight:bold;
  • color:#000000;
  • font-family: "Trebuchet MS", Verdana, Arial, serif;
  • font-size:12px;
  • margin-top:6px;
  • margin-right:10px;
  • margin-bottom:8px;
  • margin-left:20px;
  • border-width:1px;
  • border-style:solid;
  • border-color:#333333;
  • padding-top:6px;
  • padding-right:6px;
  • padding-bottom:6px;
  • padding-left:6px;
• }

..can be re-written, using CSS shorthand, as…

• p {
  
  • font: bold 12px "Trebuchet MS", Verdana, Arial, sans;
  • color:#000;
  • margin: 6px 10px 8px 20px;
  • padding: 6px;
  • border: 1px solid #333;
• }

8. Organize your CSS using comments as seperators. This will also make editing more efficient.
Ex: /* ------ Global Styles ------ */
9. As mentioned in the design step, accessibility is very important. Use the W3C accessibility guidelines [http://www.w3.org/TR/2008/REC-WCAG20-20081211] for reference.


**********************************************************
Tune in Monday, April 12 for Part 4 of the series

5 Steps to a Successful Web Design (or Re-Design) Part 2

Tweet Today we bring you part two of a four-part series on effective website design.

Step Three - Design Layout.
Designing a layout consists of much more than creating beautiful graphics and adding text to a page. A well designed web page delivers clear communication. Many of the questions asked in the client interview will clearly define what is to be communicated. Each piece of the content must have a purpose or else it should be regarded as clutter and removed. If a user/prospective customer is confused, they will go somewhere else. Less thinking = less confusion. Remember that white-space is a design element and it increases comprehension.

Studies have shown that users don’t read pages, they tend to scan the content. This is referred to as an “F-Shaped” pattern of reading. A web user’s eyes tend to focus on elements within these regions, so use that to your advantage. Put important content in these areas such as a “call to action” or main headlines. Make it quick and easy for visitors to get to the content they want. Another concept of reading gravity is called the “Gutenberg Rule” which splits a page into quadrants. The top-left content is the “primary area” and the bottom-right content is the “terminal area”. The other two sections are the “fallow areas” or areas that get less attention. With this method, buttons should be placed in the “terminal area” since that is where the reader’s eye will rest. This content is important to catching a user’s attention and enticing them to read the rest of your content.

If the 960 grid system is used in the wire framing step, then it is easy to implement a grid-based layout for the design. Grids are used in every type of design and are a way to logically order page elements. In web design a grid-based layout helps to maintain consistency site-wide and aid in another important design element, balance.

The use of color is a great tool in design to focus attention. This is prevalent in many retail sites that put emphasis on shopping carts or software download sites that have a “download” button. Macy’s uses its brand color red, to point out interest areas for the user. The eye moves from the logo to the offer on the right and then to the “checkout” button.

Aviary uses yellow to identify the buttons for each of its programs as well as the “sign up” button. Also, notice that the content is located inside of the “F-shaped” pattern. Legacy Locker’s main page uses a limited palette of blue tones while the “Sign Up Now” button stands out in green. Often, keeping a limited palette is very effective to clear communication and unity on a site. Icons are a quick communication tool used throughout User Interface (UI) design. There are conventions in place that users are familiar with almost universally. A link to a home page may be represented by a house icon. This is commonly know and quickly recognizable. Keep these things in mind as you process the design layout.

Good typography is essential to clear communication in any design. Web typography is no different and many advances have been made in this area.When CSS2 was born in 1998, web type became a little more dynamic allowing linking to fonts via style sheets. With the upcoming implementation of CSS3 and HTML5, a designer is given even more control over typography. Designers have a multitude of typefaces available for desktop publishing, but web designers have long been limited to either using the standard web fonts or making custom type a graphic. There are current “helpers” that web designers can implement such as Scalable Inman Flash Replacement (sIFR) and @font-face in CSS but keeping cross-browser compatibility in mind, some techniques will work and some will not. These replacement tools help the designer to achieve the type style that they could not with standard html. Another key to good web typography is using the correct characters. Using quotes, primes, ampersands, em dashes and en dashes appropriately increases readability of content.

A visually stunning website means nothing to someone who is visually impaired. Accessibility is a very important part of the design process. Much of the implementation of accessibility will be done in the coding step, but it is important to take into account at this stage. There are official sites for accessibility rules and they should be followed. In fact, there are laws regarding web accessibility. The UK has the Disability Discrimination Act (DDA) and, if you design anything related to the U.S. Government, you should be aware of the 508 Act http://www.section508.gov/index.cfm?FuseAction=Content&ID=3. A good guide to follow is the World Wide Web Consortium (W3C) accessibility standards http://www.w3.org/TR/2008/REC-WCAG20-20081211/.

Entire libraries could be written on each of these points. An effective web design comes from experience and a clear understanding of the user base. Be sure to keep elements consistent across a site. Consistency will increase clarity and unite the look and feel of the site. Pay attention to web design trends but do not sacrifice clear communication for fancy techniques.
**********************************************************
Tune in Thursday, April 8 for Part 3 of the series

5 Steps to a Successful Web Design (or Re-Design) Part 1

Tweet In the following four-part series, we will share with you some excellent tips on successful web design that will help you create effective websites for your clients.

Step One - Design Brief/ Scope of Work.
The most important part to the design process in general is the research phase. This applies heavily to successful web design as information is number one on a website. In this step, goals and a clear direction are defined.

A few icebreaker questions to get a client talking and figure out what they really like are essential to developing a clear direction for the design. Start by learning about the business and their customers in these four different areas.

Learn about the business…
1. Do you currently have a website?
2. If not, do you have an idea of a domain name you would like?
3. If you have a website, what do you not like about it?
4. Do you have a logo? If so, do you have a style guide or brand guidelines we can follow to maintain brand identity?

Learn about their customers/users…
1. Who is your audience?
2. How do your clients perceive your business?
3. What makes your company different from others in your industry?
4. What role will the web site play in your business? Sales tool? Informational? eCommerce?

Learn about their likes and dislikes…
1. What are your competitor’s websites?
2. What other sites do you like why?
3. What other sites do you not like and why?

Learn about the project…
1. What is the budget range for this project?
2. What is the schedule?
3. Who will supply content?
4. Will there be a need for a database, content management system, secured transactions or other back-end setup?

These basic questions are a good starting point from which to begin discussions with your client. It is always best to gather as much information as possible before beginning a project and set goals and expectations early. Thorough planning includes asking plenty of questions and listening to your client's needs carefully. Really get a feel for their business and what they offer to their customers. This will show the client that you know what you are doing and lead to less revisions later in the process.

Step Two - Site-map and Wire-frame.
After the client interview, the designer can begin the planning step for the website. Planning a site-map helps to nail down what content goes where and how a user will navigate that content. The site-map is a structure that shows how the site's pages link together. There are many visualization applications available to aid in building great looking site-maps. The top two applications are OmniGraffle for the Mac, and Visio for Windows, but a pencil and sketch paper works great too.

Once a site-map is approved, it is time to move on to the structure of each page. This is done through a wire-frame. Again, there are many applications available to aid in building some great looking wire-frames. One great resource for laying out a page from wire-frame to final design is Nathan Smith’s 960 grid [http://960.gs/]. This package includes sketch sheet pdf files that work great for wire framing. The advantage of using this system is that the package also includes templates in 12 and 16 column layouts for popular imaging programs like Photoshop, InDesign, OmniGraffle, Visio and more.

While wire framing, focus on organizing content on the page and keep it simple.

“Simplicity is the ultimate sophistication.”
– Leonardo Da Vinci

AccuLink wins PICA Awards

Tweet PRINTING EXCELLENCE IN THE CAROLINAS RECOGNIZED

March 6, 2010 (CHARLOTTE, NC): The Printing Industry of the Carolinas, Inc. (PICA) recognized AccuLink of Greenville as a 2009 PICA Awards winner. Since 1966, the PICA Awards have been the premier symbol of excellence for the graphics industry in North and South Carolina. The PICA Awards demonstrate a company’s commitment to excellence in graphic communications.

AccuLink received four Best of Category Awards in Business Cards, Combination Finishing Techniques, Digital Printing: Booklets, and Foil Stamping, as well as two Special Judges Awards in Digital Printing: Books and Printer's Self-Promotion: Campaigns.

Winners were announced March 6, 2010, at the 43rd Annual PICA Awards Banquet, held at the Embassy Suites Golf Resort & Spa in Concord, North Carolina. The PICA Awards program is open to all printing companies in the Carolinas.

The Printing Industry of the Carolinas, Inc. (PICA) is a trade association representing the graphic communications industry in North and South Carolina. North Carolina ranks as the 14th largest state print market in the United States with $4.4 billion in sales, 889 total printing establishments and 25,709 employees. South Carolina ranks 31st in the nation with $1.8 billion in sales, 337 establishments, and 10,208 employees. Headquartered in Charlotte, NC, PICA has been serving the print industry for over 75 years. For more information, visit http://www.picanet.org/.