Introduction

First off, what is Microsoft surface? Surface is a new and forthcoming desktop computer, but it has so much more to offer than the desktop we know and use on a day to day basis. On first glance, it may look like a simple desk or table, but it is actually a computer, with an enormous touch screen for input. There is still more to it, it syncs with devices and items that are placed on the Surface. This opens up so many possibilities, not only for technology to advance, but for web designers to produce sites in a new and exhilarating way.

Design features

From a web designers stand point, Surface is appealing with a large touch screen to design upon. This opens up a whole new aspect to hand drawn design. Imagine, being able to sketch out a logo and add colors or textures with just a tap and stroke of a pen. Along with having the ability to grab and re-arrange certain aspects of the design, using just the touch capability.

From a developers view, Surface can offer many features that can make life easier. Security is a big issue that developers look at. What if, you could have a customer login using their signature? This also presents problems, forgery is possible. What if, you own a business, and you require employees to use a special card to login to their account on the site?

Client interaction can be addressed with Surface as well. A client walks in and you can throw together a rough sketch or render of what they want. Exchange contact information via placing your phones on the surface. Let’s say another meeting with the client; you are presenting a mock up of their new web site. The client says they don’t like a feature on the site; you can grab that part of the page and remove it. This would make a satisfied client to see what they want before final copy comes around.

Let’s talk e-commerce. You have made a site that has a downloadable software package. It requires you to pay for this package. Place your credit card on the Surface and pay for the software easy. This also presents the same security problems as above. Ways to work around this is to have a PIN number for the card per site. It would act as a unique password for that site and your card.

Conclusion

As technology is ever advancing, web design and how we design sites changes too. Though Surface isn’t ready for the main-stream public, the exciting possibility that we may be able to do to design is something to hope for. Progressing how we build the web will shape the web for a brighter and more flexible future. What do you think about Surface, how can you think of using it?

The very first and probably most important thing to do is separate the content from presentation. That is, XHTML from CSS. This not only makes the site load faster, it also makes it much easier to update the styles for every page linked to the style sheet, instead of having to through every page to update the same style.

A close second to the separating content and presentation is keeping your file structure organized. Having a directory specified for CSS that will contain all the CSS files you will use and the same for JavaScripts and images as well. This makes it easier to find things when you are looking for a certain file.

Naming IDs and classes with names that identify the content that will be in that element is a very good practice. This will help you when you go back through the code to change something or to modify the style of that element. Setting an images alt tag with a suitable and short, yet to the point message that will allow screen readers tell the user what the image is, and if the image file is improperly linked it will show as a place holder (in certain browsers).

I find a very important tool for long term code, is to use comments for everything. Comment a piece of CSS if it all refers to the entire page, or a certain section of the web site. Comment a portion of XHTML if there are several pieces like it in the document, to guarantee you know which piece you are dealing with.

If you should have an element inside of another element it is best to indent the next row down, such as
<div id=”first_box”>

<ul>This is second

<li>this is the third in the line</li>

</ul>

</div>

This shows the best way to deal with organizing the way things are nested. Open the next nested element tabbed over once, and close it out in the same manner.

In conclusion it is a good idea to make the most of the techniques I have offered. From commenting and naming every section of code, to organizing files and structure. I have found that over the years, this has been a very effective way to operate. Though this may not be the right way for you, I hope you can take from this post and apply it to your practice.

I am in the final stages of designing the new Division Overlay web site. Every day adds a little more to the design, and I feel it’s just about ready for you. After the design is done, it should only be a day or two for the code to be done. After the coding is done, starts the task of adding the content and testing the site with WordPress.

I am putting a bunch of new things on the site, and on the server. This will allow for more use out of Division Overlay. I hope to have the site up and live by the end of the month.

Thank you for your time, and patience.

Logo design/ Branding

This, in my eyes is the single most important part of designing a professional website. The logo defines the company. It must be recognizable and flexible to be placed in letter heads, business cards, emails, and websites.

David Airey Has a notable article about logo design. The four critical points in logo design are:

1. It must be describable
2. It must be memorable
3. It must be effective without color
4. It must be scalable i.e. effective when just an inch in size

Here are some recognizable logos.

Here are the same logos in gray scale.

Are they still instantly recognizable?

Navigation design and implementation

The Navigation is the next most important aspect of a professional design. The navigation menu has to be clean, visible and easy to find and click.

This familiar from Smashing Magazine navigation that illustrates the page you are presently viewing adequately.

Here is a more ordinary navigation menu from Think Vitamin that is more of a safe design.

If utilized correctly the navigation should emerge a major focus to your website. Use easily legible fonts and differing colors for the text, than you have for the navigation background.

Colors

Yet another big part of a professional design is the color scheme. The wrong colors and combinations will make the site look very unprofessional. The lighter spectrum of color combinations is more professional than the darker schemes. Although you can combine dark colors with light color schemes.

Paring a dark background with a light foreground is a good example of combining light and dark.

CSS3.info has good light colored scheme executed in an accurate approach.

Colourlovers uses the dark color combinations with the light colors in a perfect method.

Content display

The main content of the website is the main focus of any webpage, or it should be. The way this content is displayed can be done very wrong, resulting in an unprofessional look.

The sweet spot for displaying content and ads alike is about 70-30. 70% should be made for content and about 30%should be left aside for ads and other content.

Like CSS3.info

This seems to be the magic number for displaying the most important content of the website. There are wrong ways to keep focus on the important content though. Putting a bright background behind any light or thin text is an enormous mistake. Spacing the lines to far apart as well is bad for readability.

Footer

At last the footer, the bottom of the page, the end of the content. This is where a good deal of information can go, such as copyright notice and feed links. Who designed the site, who owns the site? The footer, however, can be overdone or even underdone.

Deziner Folio has a nice footer, very clean with links to social networks and ranking services as well as a link to the top of the page. They also have put in a photo stream in the footer.

Colourlovers footer is a bit more different, they have recent forum discussions, recent blog posts and an about us section. They also display copyright info, RSS feed, and a bottom navigation.

Conclusion

In conclusion having a proper logo, navigation, colors, content display and footer you can determine a successful design of a professional website that people that visit will enjoy to visit.

I hope this post has helped you with any decisions on designing for a professional website.