CMS Website Design – How to choose the right Content Management System?

Content Management Systems have become one the internet’s most powerful web developer tools since PHP.In a market where websites need to be built faster and easier, many developers are turning to Open Source CMS to get the job done. Unfortunately there are now thousands of CMS’s floating around the web and finding the right one has become somewhat of an ordeal.This article will discuss how developers can find the right CMS for any occasion and will give a review of some of the best CMS’s I have discovered, as well as recommendations on which CMS to avoid like the plague.

Latest Web Design Trends in 2010

Purists will say that great design is timeless. Yes, in an ideal world, we should ignore trends. Pragmatically speaking, though, there is a lot of value in monitoring and incorporating design trends, especially with regard to websites. Let’s face it: the web changes at a rapid pace. Unlike in other media, design trends on the web are not just driven by aesthetics.

Technology is changing that can drastically alter the capabilities of the medium.

In 2010, we’re seeing designers continuing to push the boundaries of web design, setting the following clear trends…

Print Design

Print design has always been a source of inspiration for the web. Web design has been around long enougah now to cultivate a strong core of designers who have never worked in print. As a result, we are seeing more inspiration drawn from print, as these designers look beyond the web.

Serif Fonts

One of the most important issues of typography is legibility. Print designers have always favored serif fonts because the edges improve visibility and make letterforms easier to recognize.Sans-serif fonts have generally been considered easier to read on the screen. But with more users browsing at high resolution and the improvements in font-smoothing technology, serif fonts have become very legible for body text.

Big Headings

Print designers have been using big headings to grab attention for ages. Print material has had to be high impact if it was expected to be read at all. If you saw a dull brochure sitting on a desk, would you bother to pick it up? Probably not.

This trend started in 2009 and has only grown in popularity. Large headings have been proven to grab attention and communicate clearly.

Multi-Column Layouts

Designers have to work within the constraints of their medium. Unlike the web, print offers no option for scrolling, being bound as it is by the dimensions of the paper. Using several columns allows you to fit more content in the same space.

Now, with increased screen resolutions and the advent of grid layouts, more designers are adapting this method to the web to make websites easier to use and to fit in more content.

Big Lead Image

A picture is worth a thousand words. While it may be a while before a photograph has the same impact on the web as it does in print (which has much higher resolution), the adoption of broadband access has made big photographs more feasible.

We are seeing more websites use large, high-impact images to draw users in and create an immersive experience.

Diagrams and Infographics

Print designers have been using graphics to convey complex information for years. This is seen most commonly in magazines and annual reports.

Graphics can communicate complex relationships and ratios in a way that is too difficult to do with plain text. Infographics tend to have a simple yet visually rich appearance, and more designers are adopting infographics or mimicking the style in their designs.

Simplicity

Antoine de Saint-Exupery once said, “Perfection is achieved not when there is nothing more to add but when there is nothing left to take away.” The advantages of simplicity in design are many.

Hick’s Law tells us that the time required to make a decision increases with every option. Additionally, the signal-to-noise theory tells us that anything that doesn’t add to the message or function of a website (the signal) gets in the way and makes the design less effective (the noise).

Simple designs are easier to use and understand, and they allow for greater clarity in communicating messages.

Minimalist and Grid Design

Minimalism is powerful yet difficult to master. It contains nothing but the essentials. Everything else is removed, resulting in maximum impact of the elements that are present.

Minimalist designs require a strong grid system to be effective. Naturally, they will have plenty of white space, and so without that grid, a minimalist design would feel disconnected and sloppy. The grid gives it organization and structure.

One-Page Layouts

There are several ways to simplify. A one-page layout exhibits two of these ways: hiding and removing.

Effective one-page layouts hide any elements that are not a priority. If a user wants to see one of those elements, they can click to uncover it. This is much more effective than leaving everything visible, which would make the page complicated and overwhelming.

Likewise, the principle behind one-page layouts makes additional pages unnecessary. With the availability of powerful JavaScript libraries and faster connections, many websites now have little need for several pages. Designers can easily fit information on one page, without bothering the user with a hierarchy.

Massive White Space

In the early days of web design, we didn’t have much screen real estate to work with, and so we didn’t show much white space. If you’ve ever tried to design a website for a 640×480 resolution, you’ll know exactly what I’m talking about.

Now that we have higher resolutions and the ability to hide and reveal elements with JavaScript, harnessing white space is much easier.

White space is critical to good design. It gives the eye a place to rest. It naturally improves the quality of a design. And it shows which elements are related to each other by way of proximity.

Typographic Layouts

Whereas we used to be confined to a few select “web-safe fonts” with very little control over how they were displayed, we now have a wide range of tools to enrich our typography.

Web designers have long enjoyed using type as a subtle tool to communicate messages. With increasing control and capabilities, we’re seeing more designers focus on typography as the primary design element.

CSS3 Techniques

Not sure you can take advantage of CSS3 yet? Think again. Web pioneers such as Andy Clarke and Jeremy Keith have long preached about “progressive enhancement” in web design.

Progressive enhancement is about designing websites so that they are usable on older browsers, while being “enhanced” for users who commit to the latest technology.

Designing in this camp lets you take advantage of CSS3 properties such as rounded corners, border backgrounds and text and box shadows. Users on modern browsers will see the nicer version, and those on older technology (cough ¦ IE6 ¦ cough) will see the basic version.

CSS3 Animation

Animation on the web has gone through many stages. Initially, we could only animate with GIF image files. Then, we were pretty much limited to Flash. Now, we can select from Flash, Silverlight, GIF, JavaScript and even CSS3. Subtle animation can be memorable, and CSS3 makes it lightweight and easy.

Rounded Corners

The Web 2.0 style of 2005 and 2006 made rounded corners popular, to the point of being annoying. At the time, creating them was difficult. There was no set way to create truly rounded corners. Instead they were simulated with CSS, JavaScript hacks and image files.

CSS3 now allows us to generate rounded corners directly in the browser, making them not only easier to create but also much more efficient, because the user doesn’t have to download additional images or JavaScript files.

Designers are increasingly taking advantage of this new browser capability in 2010.

Box and Text Shadows

Using shadows to create a sense of depth has been done (and sometimes overdone) since the earliest days of the web. But it was not always practical. To add shadows to text, you had to use images, which increased loading time and made maintenance more difficult. Box shadows required several images and CSS tricks like “sliding doors.”

CSS3 has highly customizable shadow capabilities, which allow for a wide range of creative effects, including not only drop shadows but inner shadows, too. Creative designers have already been using these CSS3 effects to simulate both embossed and imprinted effects.

RGBa and Opacity

For years, working with opacity and transparency on the web was near impossible. You had three choices: simulate transparency using flat images, deal with PNG’s cross-browser incompatibilities, or struggle with CSS’ basic transparency selectors and filters.

CSS3 gives designers much better consistency and freedom in using opacity with the RGBa property. While you can take advantage of transparency in countless ways, one area that it has helped particularly is with complex backgrounds overlaid with semi-transparent colors. Previously, this effect was impractical or impossible to create without resorting to complex PNG images.

Mobile-Compatible Design

The mobile web has given millions of users the ability to check their bank account while waiting in line, look up the latest scores on the subway and update their Twitter status while driving. (Which one of these is a dangerous habit?) And the mobile web continues to grow rapidly.

We have gotten to the point that every company has to consider whether their website will be used on the go, and if so how. Innovative companies have already invested heavily in useful and user-friendly mobile versions of their websites.

Creativity

The explosive growth in use of social media is proof that people want to connect and share things they are passionate about.

In the design field, we have seen large growth in the sharing and browsing of other people’s work. As designers, we are now bombarded by everyone else’s creativity. Not only does this raise the standard of quality of design, but it encourages ideas to be shared, which contributes to a culture of creativity and innovation.

Clean Illustrations

If you’re like me, you grew up watching Disney movies, admiring all the effort that went into creating each frame of animation. We are well past the days when illustration was done in ink and markers, and this evolution in tools has led to some very creative approaches to design.

Many designers are learning that smooth, clean, crisp illustrations create a distinctive feel that can’t be replicated by photography or simple clip art. The result is a wide range of professionally illustrated designs that are engaging and inviting.

Textured Backgrounds

Textured backgrounds are nothing new on the web. But this technique has seen an interesting variation in the last few months. I refer to it as “micro-textures”which are subtle, barely noticeable textures in the background.

Thumbnails

You may be saying, “Thumbnails have been around since the dawn of the web. How is this a trend?” True, they have always been used, but only very simply. You would have a thumbnail that you could click on to get a bigger image. It did the job but was boring.

In the last few months, designers have started asking, “How can we make thumbnails more exciting?” This has led to an upswing in thumbnails that are both clever and usable.

Watercolor

As the web evolves, we are seeing more designers being inspired by a variety of sources and media. No surprise that the fine arts are among these sources.

One of the styles that has emerged is the simulation of watercolors. The soft elegant look of this style is distinct and calming.

Handwriting

Handwritten and script fonts are abused the most. For this reason, many designers steer clear of both types either out of disgust or because of a fear of looking amateurish. But lately, many designers have found that, when used properly, the handwritten style conveys a sense of craft and planning. Used in the right context, it is a powerful way to communicate.

Social Media

With people spending more time on Facebook than Google now, no wonder designers are looking for innovative ways to integrate social media on their websites.

Some designers have gone so far as to publish their content on social media networks and then use their websites to aggregate it.

It is safe to say that as 2010 progresses, we will see more designers find creative ways to integrate social media onto their websites in order to better engage users.

Fixed Elements

Now that browsers better support the position: fixed element, we are seeing cleverer uses of it.

There are plenty of situations in which a fixed element (such as persistent navigation) could serve the owner’s business objectives and make the website more usable.

Fixed elements are memorable and enhance the user experience. They have countless creative uses, and we will continue to see designers take advantage of them.

This guest post is a collaboration between the good folks at Web Hosting Search and designer and developer Ross Johnson. Check out Web Hosting Search for proper web hosting and 3point7designs for more web design awesomeness by Ross

Which of these trends do you follow most? What are some other emerging trends?

Taken from WDD

Beautiful Restaurant and Pub Websites

One of the challenging parts of web design is to provide exactly what your client needs. Some of them look to advertise a product. Others offer some kind of service, while the rest want a website for general information about their organization. Recently, I had to design for a local restaurant. Restaurant owners are quite the hybrid of all the clientele types I mentioned because they: 1) want a website to advertise their products *usually in a menu form, 2) promote their services and friendly staff and 3) show the world about their fine establishment.

As I was searching the net for good restaurant websites, I stumbled upon these 16 sites which had all the elements that my client needed. In addition, some of these websites look so good – that it would inspire many of you designers out there. Note that I included my work in the list (its my blog – I can do whatever I want).

The importance of mood boards!

It has happened to everyone. You spend countless hours producing a beautiful, pixel-perfect comp only to have it rejected by the client because it isn’t what they were envisioning in their mind’s eye. It’s the dreaded “I’ll know it when I see it” curse.

You get sent back to the drawing board, your ego and the budget take a hit, and everyone is frustrated by the process. After this happens a few times you realize that getting the client involved earlier in the process can make a huge difference in the outcome of your design presentations.

Building Large Scale Sites with Wordpress

Best Practices for 6 Common User Interface Elements by WDD

The appearance and usability of certain interface elements and functionality are crucial to the success any websites in today’s market.

Studies have demonstrated that even a split-second delay in thinking on the user’s part will weaken their perception and interest in a website and ultimately lower the website’s conversion rate.

In certain niches and industries, having UI elements that are not obvious in their use may be perfectly acceptable. The blogging and web development industry are perfect examples.

But when we design user interfaces for non-tech-savvy audiences—which is usually the case with client work—we have to ensure that certain UI elements do not stray too far from what users are accustomed to.

This article discusses some best practices and usability traits of six user interface elements and the conventions for each, so that developers can create user experiences that are both beautiful and simple.

Creative and Artistic Resumes! – by WDD

In these tough economic times, many designers find themselves applying for jobs and freelance gigs on a regular basis.
So, how can we stand out from the rest and grab the attention of a design agency when they’re usually bombarded with hundreds of applications?

The best way to do this is in the design of your resume. Assuming that you have the skills that they’re looking for, a striking and visually appealing resume will go a long way at getting you the creative job that you want.

In the worst case scenario, it will at least buy you a few seconds by catching the eye of a recruiter and may become the difference between getting hired or not.

In this article, we’ll take a look at 30 creative resumes that can inspire you to think outside the box when designing your own resume.

The Evolution of Apple (Long Post)

With the 25th anniversary of the first Macintosh computer coming up on January 24th, 2009, we’re taking a look back in time at the evolution of Apple products.

Most have been notable leaps forward, while some were famous flops. Whether or not their inventions were accepted by the marketplace, Apple has consistently put out products that raise the bar for the computer and telecommunications industry.

All-In-One Computers

Apple has sold “all-in-one” computers that have built-in monitors from its very early days. Although some models were classified as All-In-One, they had separate monitors packaged in the same box.

Apple II – 1977

1977 saw the invention of both the Apple II and the famous rainbow Apple logo. Steve Jobs added the colours to the logo to reflect the Apple II’s superior colour output. Colour graphics set the Apple II apart from its rivals on the market. Image: Wikipedia

Top 35 fashion website designs!

Appearance is crucial for obvious reasons in the fashion industry. With that in mind, many fashion e-commerce sites can be an excellent source of design inspiration.

Attractive design and photography can make the products more appealing to visitors and increase sales.
There are a lot of different design styles and approaches that are used by online fashion shops, but generally photography and product/model images play a large role.

Sometimes the design and layout is minimal, allowing for more empasis on the products. Others feature huge photos as the primary focal point of the page.

In this post we’ll feature 35 inspirational fashion website designs that represent a variety of styles that are sure to inspire you.

The truth behind the “Bing” hype.

In recent weeks, we’ve noticed a surge in clients calling us to ask questions like “what’s up with Bing?” Or, “are you optimizing for Bing?” Even “are you taking advantage of Bing?”

In other words, people want to know that their search engine optimization company is taking special steps to ensure adequate representation on the newly created, much hyped search engine. And to answer the first question, what’s up is MSN’s umpteenth attempt to create a search engine that garners a significant amount of market share from its more formidable rivals – namely Google and Yahoo!. Microsoft has not been shy to promote the new engine; the current advertising campaign is estimated to cost around $100 million.