The week is coming to an end and that means it is time for us to look back on the week that passed, the best design news, resources and other goodies. This week we look at 30 Stunning User Interface examples, how you can provide unique value to your clients, 9 pitfalls of of web hosting and how to avoid them, furthermore we take a look at how you can make your website more tablet friendly as well as great ways to use the website footer.

30 Stunning User Interface Examples

User interface is extremely important for any type of application because without an intuitive design, the user will probably try to find an alternative to that app. The success of web applications and websites depends in how effective the user interface design is. Designing a good user interface however is a very challenging task. According to Apple, a great application has the focus on content. Simply, it must be realistic and must take full advantage of device capabilities to enable enhanced interaction. A user interface that is unattractive, convoluted, or illogical can make even a great application seem like a chore to use, so when you design the UI, you must have in mind how your users think, act and work. In this article you can see 30 gorgeous examples of user interface design for various types of applications.

6 Easy Ways to Make Your Website Tablet Friendly

There are nearly 70 million tablet users in the U.S. alone, a figure that has doubled from the year before. This means that nearly 30% of the country’s Internet users are browsing on a tablet device. Tablet traffic to e-commerce sites grew by 348% from 2011 to 2012, overtaking smartphone traffic for the first time. With the tablet market as young as it is, its footprint is only going to expand. This trend sends a strong message: If you haven’t already, now is the time to prioritize your website’s design considerations for tablet functionality. Ignoring this could negatively impact your website’s overall conversion rate, return visits, sales and more.

21 Inspiring Examples of Illustrated Elements in Web Design

For our last web design inspiration list of 2012 we decided to gather examples of beautiful illustrated elements in web design. We believe that illustrated elements can give a nice touch and personality to a design. From subtle illustrated details to complete colorful sketched pages, the key is finding the right amount to use for each project. So today we have several different approaches on how to incorporate illustrated elements in a website. Enjoy!

The device-agnostic approach to responsive design

Techniques, technology and terminology change constantly in web design, and keeping up with them is crucial to your success in online design and development. Device-agnostic and responsive design are two of the current hot terms being bandied around in technology circles, and often in the same sentence. With the increasing use of a wide variety of internet-enabled mobile devices, web designers and developers are encouraged to keep work responsive; adapting content and design elements to the limitations of whichever device is being used. However, labelling responsive design as a technique using the device agnostic approach is a tricky business. What exactly is the device-agnostic approach, and is it even necessary to identify it as an approach to responsive design?

3 Ways Designers Can Provide Unique Value To Clients

If you’ve ever purchased organic food from a grocery store or farmer’s market, you know that it can be, well, pricey. Some people report as much as a 300% increase in their grocery bill when they buy organic versions of their regular groceries. And is it worth it? Staunch fans of organic living claim that it is.

38 Modern List Styles in Website Designs

I want to use this showcase as a peek into modern list styles and design trends. Web designers can be found all around the world who have been studying the creating the newest market trends. These designers are the molders and shapers of our future design community. It is exciting to see how these ideas take shape and form into larger archetypes over time.

9 Web Hosting Pitfalls and How to Avoid Them

If you’re ready to move off Blogge and onto a web hosting service, you’ve probably got a lot of other things on your plate as well. The world of web hosting can be complex and confusing, but we’re looking out for you.  We know you want a simple solution tailored to your needs, and with great support services. We all do. But great web hosting is really different for every client. We’ve done the research and found nine scenarios that are either red flags, or should be avoided altogether.

16 great examples of website footer design

When starting any website project, it’s natural to want to concentrate your design efforts on the homepage and the header. As a result, the footer often becomes an afterthought – relegated to a poorly designed dumping ground for copyright information, legal disclaimers and spammy SEO links. But it shouldn’t be this way.

Workless: A Clean & Classy HTML5, CSS3 Framework

Workless is a clean & classy HTML5, CSS3 framework that helps you to get your project up and running as fast as possible and helps prevent repetitive tasks. It standardizes CSS, improves usability and interaction, sets base typography to help vertical rhythm and readability and adds helper classes to style elements easily. You can either start with the base setup, or drop the files and assets into your current project and simply reference the CSS and Javascript files in your source. Once you’ve done this you can then begin adding your own application specific CSS.

Creating WordPress Themes That Sell – 5 Guidelines You Should Know

Considering the fact that WordPress is the most popular Content Management System out there and serves many users, it’s no wonder that developers feel encouraged and motivated to create themes for WordPress. After all, the gigantic size of the WordPress’ user base simply means that themes created for WordPress are likely to be used by many people, thereby giving developers good returns for their hard work.

The post Weekly News Roundup – 4 January 2013 appeared first on Design Reviver.

Our old friend De Stewart, aka Colonel De asked us to help him with his latest project, a gourmet herb and spice shop located in historic Findlay Market in the Over-the-Rhine historic district of Cincinnati. We jumped at the chance and are proud to show off our latest brand.

De is known for his likeness and especially the mustache, so that became equity we could build on for his identity. We wanted to show that professional chefs and  home cooks alike appreciate what De offers. So we tried to design something “Professional but Approachable.”

This new logo and graphic system will be translated through all the touch points – everything from packaging to store interiors; from website to branded merchandise. Stay tuned for all the latest from the Colonel.

RELATED LINKS | PRINT

White Design Studio designed a website with an animation at the beginning that takes the broad concepts that the value of this energy risk management company is built on and renders them in a very simple animation.

We also developed a platform that allows the user to keep the site fresh and maximize the search engine traffic. And we have made it easy for the customer to make updates to their own content.

An identity system has to be able to be more and do more than ever before. It must be strong graphically. It must be symbolically resonant. It must have a life in motion and in 3 dimensions. And the best ones are pedagogical props for telling the brand story. The identity we designed for a new energy risk management business, we believe fulfills all these requirements.

We also think that an identity must first attract before it can inform. So, first it must be beautiful. The way that it informs can be literal or resonant with the value of the business. We developed the name and helped research the it while we auditioned marks with the various name choices. We also developed a collateral system for print, web and one-on-one presentations to allow the customer to tailor its message to different markets and different customers within those markets.

Envy Salon came to us with a clean sheet of paper and asked us to help design a new salon here in Cincinnati, Ohio. We developed the name “Envy” with input from the client. We wanted something a little fun, a little forward, and something that got to the heart of why you might spend time and money on your image.

It was important to us that everything the client sees or touches in the salon reflects the same fun and forward personality. We designed an identity system, collateral and web site to compliment the name and the range of products and services the salon was to offer. We tried to keep it clean and fresh and look like an attractive national brand while retaining some local charm.

Whether you are testing themes submitted to your service or your own work, we always find ourselves searching for quick ways to browser test and or validate our work. Sometimes we may end up using a genre of tools to get what we wanted and most of the time we develop a set of favorite methods and tools to achieve it.

Here we cover 10 different ways to validate and browser test your website to add to your list of methods.

HTML and CSS Validation Tools

W3C HTML and CSS Validation

The W3C set of validation tools happens to be the most popular source to check your code for validation. You can paste code snippets, link to your code, and upload your code to check validation. If you have errors within your code, it returns a nice detailed report for each error highlighting the exact character or set of characters that are invalid. A great tool to use even if you use others that are available out there.

Integrated Development Environment Validation

Many integrated development environments and other editors offer built-in code validators right off the fly. While some of these editors may require you to select a button to view whether your code is valid or not, others usually do it right off the bat as you type out the code. Therefore, it helps you catch the errors as you go along to finish your website completely validated without having to go back and fix validity errors.

Web Developer Toolbar

This is a Firefox only toolbar; however, because it is so feature-filled, it is worth a mention. The Web Developer toolbar is a great in-browser testing tool containing a plethora of tools for testing your website including resolution tests. However, it also includes a great HTML and CSS validators that works on the fly. If you do not select to view details on validations, you will just be shown two icons that represent whether the code is valid or not.

The toolbar additionally tests other elements than HTML and CSS, so if you need to perform testing on other things within your website, it is a great tool to quickly and easily do so.

HTML Validator

HTML Validator is another Firefox add on that runs in the background seamlessly. A simple yet affective tool displays whether the HTML to your website is valid, invalid, or consists of warnings.

When doing so, it displays different icons as well as the number of errors and or warnings, and by clicking on these icons, it opens up a nice pane showing you the code snippets that are invalid or contain warnings, as well as details on the errors as well as about the warnings. A great tool for in-browser testing and editing.

Browser Testing Tools

Installing Older Browser Versions

A really common method to browser testing your website is to install older versions of a plethora of browsers such as Internet Explorer, Firefox, Opera, Safari, and others. The softwares’ websites usually offer older downloads which is a great way to obtain your copies of older versions.

Adobe BrowserLab

If you are not too keen on the idea of installing multiple pieces of the same software but of different versions to browser test your website, you can give Adobe BrowserLab a try. Adobe BrowserLab is a multi-tabbed browser testing software allowing you to test your website in multiple browsers all from one pane or window.

Additionally, if you need to test your website in the same browsers but from different operating systems, Adobe BrowserLab simulates different operating systems for you, so you do not hassle through switching between them to perform the required testing.

Overall, Adobe BrowserLab is a great piece of software for any designer needing to test their work across many platforms and setups.

Integrated Development Environment Browser Testing

Most of our favorite editors have built in tools for browser testing our projects and websites we are creating and or developing. While it may not be too extent with different versions of the same browsers, they do let you connect you installations of different browsers into the single environment for quick, on the fly testing.

Browser Shots

Browser Shots has to be the greatest and easiest way to get around to browser testing your website in a genre of browsers. What it does is you provide a URL to the website you would like to browser test, select the browsers and their versions you would like to test your site in from their long list under different operating systems, and hit submit.

They will then return screenshots of how your website looks like per browser selected per operating system. While it might not be an easy task to perform while you are still modifying your website, it is a great method to obtain a mass visualization of how your website looks across a plethora of browsers quickly.

IETester

If you are always worried about how your website looks like in different versions of Internet Explorer like the rest of us, then IETester is definitely something to consider. IETester is a single interface to test your website from version 5.5 of Internet Explorer to their latest version. It holds a nice Office 2007 design to it as well as a tabbed interface to easily flip through testing panes.

IE Tab 2

IE Tab is a Firefox add on that implements, as its name describes, an Internet Explorer viewing pane designed for cross-browser testing within your Firefox browser. It is a great quick tool to easily test your websites in Internet Explorer on the fly with a click of a button without the hassle of leaving or changing windows between Firefox and Internet Explorer.

To conclude, while there may be a plethora of other tools out there to validate your code and perform browser testing, we covered ten popular methods and tools that will hopefully get you thinking and started on making your own laundry list of browser testing tools as well as HTML and CSS validation tools.

There are many websites of the same genres, but we all choose one out of them all. Whether be it the design, the layout, or the service that hooked us onto it, we all know they all offer similar content. So if you are designing and developing a site in the same genre as many others, how should you design it and what key elements should you include?

Additionally, what really sets these content providers apart from each other? In order to demonstrate what really sets content providers apart, we dive right into news content providers and technology content providers such as ABC, CNN, BBC, Engadget, and others.

Design is a major aspect of running a successful service. Having a disorganized design can destroy your user base, thus, it is critical to assure your design decisions are for the better and what users can benefit from. When you first setup a service of this magnitude, you want to look at what makes up your competitors design and why it keeps users coming back. This gives you a general idea of how users who frequent such sites like their content organized and displayed, which is a great start.

CNN

Look at CNN as an example of design organization. Its layout really sets itself apart from the others as it really emphasizes on two very important news pieces at first site. As you get lower into the page, the news titles begin to get smaller from very important to least important. This is definitely a key element in organization and to keeping your visitors frequenting your site.

The site’s header is also very clean and organized, allowing you to easily identify what topic you are currently on, and what other major topics they cover. If these major topics were not displayed in the header or navigation bit and were rather hidden in a small sidebar, users will be less inclined to locate and frequent them.

BBC

BBC’s design is quite different compared to the others. It does have the general navigation in the header and a large news headline, however, what really sets it apart from the others is its category grouping and drag and drop functionality.

Its categories are separately grouped allowing you to easily find and read what you came for straight away. With its drag, drop, and group deleting functionalities, you can easily organize the page with your most important news categories on top, or to be able to remove the sections you really do not care for like the business section or sports section. For users, these features definitely allow them to feel like they designed the website, which increases the possibility of your site being their homepage.

MSNBC

As soon as you visit msnbc, your eyes immediately catch onto the top headlines instead of catching onto the logo and header navigation, this is definitely what users want to see. Below the header are the usual news headlines and other news articles that are generic between many other content providers of the same genre.

Therefore, the only element to its design that sets the site apart from others is the unique top headlines bar that comes before anything else. As a designer, this proves that users will favor different content providers over others for selective design elements and organization methods.

ABC

ABC is another major content provider aimed towards the general audience. Its design is very lightweight to suit everyone alike. The unique thing that really separates this site apart from the others is that its layout is built by its content, which is a definite plus for those who do not want to see all sorts of design elements instead of content.

Yahoo!

Yahoo is definitely top on this list as a content provider. Not only does it offer a set of services, it also serves as a news portal. Its unique design is really, what makes it feel how a true homepage should be. It is feature-filled with color customization, drag and drop containers, and a completely customizable sidebar where you can add all your favorite sites and gadgets.

Despite all these additional goodies, it definitely catches your eye on the latest news from political, to tech, to personal, and to a whole set of genres by its intriguing news headline slider. As a designer, many of its site elements are perfectly placed in great locations, and it definitely offers what users want in a design and layout.

Engadget

As a tech blog, Engadget really nails it with its design and layout. It separates itself from others by keeping its design simple and content based. Right below the header, it places a banner of its most interesting review, and below that comes its navigation bit.

This is great for users, as they always want to see what made it to the tech headlines immediately. Other than that main highlight, its content is displayed on the page in importance order, starting with its top stories than its latest posts. A key feature with its latest posts bit is the ability to easily flip through between latest reviews, feature posts, and all news. It is definitely a great way for users to directly browse through for what they came for, making it a must key element for your designs under this genre.

Gizmodo

Gizmodo, another tech blog, has a simple yet unique design and layout to set itself apart from others. Before the main header, several articles, reviews, or interviews are displayed, it is a great way to view what is happening straight away without rummaging through the rest of the site. The simple design and the items before the header is all what Gizmodo has to keep its design and layout set apart from others, it is simple, but it goes along way.

TechCrunch

Techcrunch’s design is very well organized and well laid out. Its navigation is uniquely set above all content with a sub-navigation below the logo. What really makes Techcrunch’s design stand out is its simple layout. It holds a great lightweight slider for its popular news pieces, and then its latest postings.

Users always love to share great reads, thus, Techcrunch really pointed out its social networking tools by providing them on the homepage for each posting as well as within each posting. This really gets users connected with their friends and favorite readings having them frequent often, which makes it another key element to your design.

Neowin

Neowin’s design is very sleek and intuitive compared to other tech blogs. Its navigation is well compact and blends in well, keeping the focus on the content. Its postings are really compacted on the homepage and easy to browse through what are most important to you. Another great element to the website’s features is the Social Activity box in the sidebar, keeping their users connected with Facebook while reading great postings.

CNET

CNET’s design is unique and intuitive, and sets itself apart the most from others by far. The header is very simple and contains all you need, a search bar and the navigation. Its content is well organized and displayed. However, what really makes it stand out is the CNET user bar that sticks to the bottom of your browser wherever you navigate on the CNET website.

It contains a list of your saved reviews and products. The CNET user bar also contains a TechTracker, which sends out reminders to you about outdated software and what needs updating, a definite great tool.

To Conclude

As you know, content is also a major aspect to why users choose a content provider over others. However, design and features are also main elements to the experience.

It is always a great idea to look at your major competitors and see what they have done to keep their users coming back, which gives you a general idea of what your users would be looking for too. Taking the best of what users want and putting it together can create the perfect design and user experience your viewers are looking for.