5 New CSS and HTML Web Templates

Oct 07
2010

One of the most sought after resources for a web designer are high quality and, preferably, free CSS/XHTML/HTML web templates. And this exactly what we have for you in today news round-up: 5 New High Quality CSS and HTML Templates.

Schizo Octopus Website Template

Schizo Octopus Website Template (XHTML+PSD's)

This template has a fixed layout one page portfolio template with two columns with the download containing the Photoshop Files, XHML/CSS Coded template and also includes documentation.
Free for personal or commercial use. No need to credit.
Schizo Octopus Website Template

CSS Heaven 2

CSS Heaven 2

CSS Heaven 2 is a free CSS Template suitable for small business websites and blogs.
This template is released under GPL License.
CSS Heaven 2

Euphoria

Euphoria

Euphoria has been licensed under a Creative Commons Attribution 3.0.
Euphoria

Template 6

Template 6

This template could be used as a corporate website & blog, it contains: Two template pages , valid HTML & CSS and all of the PSD files.
Template 6

SilverBlog

SilverBlog

SilverBlog is a minimal template suitable for blog designs that has been built with HTML5 and CSS.
It has been released under GNU GPL license.
SilverBlog

By Paul Andrew (Speckyboyand speckyboy@twitter).

Designing for a Responsive Web with Heuristic Methods

Aug 27
2010

As the web has developed so has the technology and range of platforms we can use to engage with it. As the range of screens increases, higher resolution displays are becoming the norm whilst at the same time both larger and smaller screens are becoming more widespread than ever before.

As designers we have a choice. Do we continue designing for the ’safe’ standard of 960px or do we expand our horizons and begin to think about flexible or even responsive web design. Sites that look different for different users depending upon their screen size are not a new thing, mobile sites have been around for years, but responsive design proposes something else entirely, designs which scale to anything from a iPhone right up to a 52″ high definition television screen.

3 Ways to Build a Responsive Site

Firstly, Fluid Layouts

Fluid layouts have been around for years and many of the first sites that populated the early web where such that they would expand to whatever size the browser could handle. These sites have the benefit of only requiring one design and set of code, however when a site can be displayed at any width there can never be any consistency as to how information is presented and often leads to messy sites.

A popular use of fluid width sites can be seen on many of the Yahoo! sites where there is a fixed width column bounded by a fluid area, populated with smaller boxes of content.

Secondly, Mobile & Desktop

By far the most popular method of accounting for vastly differing sizes in screens, and the user experiences associated with them, is the design of two websites. Often first created is the desktop version, after which a smaller, scaled down version is curated for mobile users. This approach achieves two objectives. Firstly it allows for only two designs to be created, minimizing the time taken to code whilst still optimizing the site for each of the two key categories. Secondly it provides the content creator with two, consistent and therefore predictable, formats in which the content will be displayed.

However this split-personality approach to web design can leave out many devices which either fall between the two, such as the iPad and netbooks, or are far larger than the standard desktop, HD Tv’s for example. This can lead to clients requesting an ‘iPad Version of the site’ or citing the need to ‘appify’ their site for ‘those fancy tablet things’.

Thirdly, Media Queries

Once of the most trumpeted developments in the new CSS3 spec is something called ‘media queries’, which allow us the option to specify certain ranges of sizes at which the page should change layout. The benefit of this approach is that the site only has to be designed once and from that each set can be created.

On the flip-side this requires a new way of thinking about content (and probably a fallback of mobile/desktop for older browsers as well), as a series of modules or sections, rather than as single elements.

Designing a Responsive Project

When building a responsive site there are many considerations, however by far the hardest is how to make your content flow, here are 5 tips for creating a responsive design.

1. Follow natural breaks such as <h2> and its friends

Heading are, or should be, used to break content into scannable chunks. That means that when looking where to break the content for a responsive design headings tags are a great place to start.

2. Images often tell their own story

On many sites images are only vaguely related to the content around them. It therefore often doesn’t matter whether the image is on the left of, above or below a paragraph of text, making images a great candidate for shifting in a responsive design.

3. Quotes, Code & Tables are contextual

Whilst similar to images these extra pieces of information are often far more directly related to the content than the images. It is often a good idea to group these with the explaining paragraphs, either before or after as a section on their own.

4. Don’t split up blog posts

Unless you write long blog posts it is often worth working your design around a blog post, product page or other central content. About Us or Staff pages, whilst nice are far less critical to the sites purpose but those pages that are the bread and butter of the site should be given priority when designing a responsive site.

5. Keep the navigation together

Navigation is the lifeline of the majority of your content, the single block that has become uniform across the web is a vital part of many users browsing habits and moving it to the bottom or getting rid of it all together can through many a user and make your site that bit harder to use.

Who is Responsive Design For?

Responsive design is about allowing content to fit with the users preferences, whether the user is browsing through an iPod or HD Tv, the website should present the best possible experience. There are some draw backs however to responsive design. Firstly, consider the guy using his HD Tv, whose viewing area is a huge 52″. Whilst at first this may sound like a brilliant idea, anyone who’s ever tried it knows that in actual fact poorly designed sites simply become unreadable.

Anyone considering designing for a responsive web should remember many of the basic lessons of UX design, line lengths that are readable, line heights that allow for easy moving between lines and letter spacing that helps the eye to flow between letters. These lessons become even more important in responsive web design as the option to abuse them becomes so much simpler to create.

Responsive Design is Here to Stay

Responsive design has both its benefits and pitfalls and anyone considering designing a responsive site would be well advised to read up on the basics of UX design first, remembering a few simple lessons will go a long way. As CSS3 becomes more widespread and sites begin implementing responsive designs it will be interesting to see how they are used by larger corporations and whether it is a technique that will indeed become widely adopted.

Layout design tutorials in Photoshop

Jun 24
2010

How To Create A Slick, Modern Website Mock-Up In Photoshop

Apr 03
2010

30 Websites with Lovely Layout and Typography

Jan 28
2010

35 Premium Photoshop Layout Tutorials for Web

Jan 08
2010

Adobe Photoshop is probably the most popular of image editing and enhancement applications. It not only helps us create quite amazing graphics, but it also lets us design beautiful layouts for our web design projects. If you’re mostly focused on the artistic side of designing a website, then finding comfort and new found ideas in Photoshop tutorials is a great way to get started. These guides will help you enhance your experience and master the art of Photoshoping layouts for web design.

Here is a collection of 35 Premium Photoshop Layout Tutorials for Web that teach you how to create your very own layouts. Enjoy!

Create a Sleek, High-End Web Design from Scratch

This tutorial will enable you with the tools to put together a high-end web design layout using clean and beautiful images, as well as well nested elements.

Photographer Design Layout

A simple Photoshop tutorial on how to create a nicely illustrated professional photographer web layout.

Website Gallery Layout Design

This tutorial will help you learn how to make a layout for a css website gallery utilizing Photoshop.

Design Studio Layout

Here you’ll be showed how to create a simple web design portfolio layout. You can also use this layout to create your very own wordpress theme.

Design a Premium Wordpress Blog with Photoshop

In this tutorial you will learn how to create a premium wordpress layout with a special area where you can feature products, apps, or downloads.

Corporate WordPress Style Layout

Create a dark, clean, and usable blog style layout tailored for your corporate needs. Using WordPress, you will also have a section for your blog, which is a great way to reach prospective clients.

Making the “Clean Grunge” Blog Design

With this tutorial you’ll be able to see how to make a clean/grungy layout.

Clean Website Layout

Learn how to create a clean and simple web layout using Photoshop.

Five Looks, One Layout

Learn the swift process of creating a diverse web layout that can embody various design themes.

Watercolored Background Web Portfolio Design

In this step by step tutorial you’ll be explained how to create a Watercolored Background Web Portfolio Design using two brush sets, a icon pack and some basic techniques.

Create a Clean and Colorful Web Layout

This tutorial shows you how to create a clean corporate layout in Photoshop.

Develop a Unique Colorful Site Layout

This tutorial will guide you through the process of designing a professional website with a funky colorful flair. The tutorial features some great colors, effects and layer styles in which you can use over and over for future projects.

Create a Nature Inspired Painted Background in Photoshop

We’ve all seen it, and we’ve dreamed of experiementing with backgrounds featuring nature. This tut lets you do just that, and more.

Design a Beautiful Website From Scratch

Throughout this tutorial, several tiny details and features will be pointed out, they will make your website design look beautiful.

Create a Company/Business Web Layout Using Photoshop

Create a light psd template well fit for a company website layout, business photoshop template, and a portfolio layout.

Create a Clean and Effective Product Layout

This tutorial will show you how to create a clean and effective product design in Photoshop. This template can also be easily converted into a portfolio layout if desired.

Create a Business PSD Layout in Less Than 10 Minutes

Here you’ll develop a crisp business layout in less than 10 minutes.

Create a Green/Eco-Friendly/Environmental Web Layout

You will create a green/eco-friendly/environmental web layout (photoshop template).

Design a Sleek and Modern Hosting Layout

This layout features dark elements with bright text and cool buttons. It’s got a slightly futuristic feeling to it as well.

Create a Nature Inspired WordPress Layout

In this Photoshop tutorial you will create a nature inspired WordPress layout with a number of features such as Free Social Media Icons, a Function Icon Set, and Nature photos.

Web Site Design Tutorial: Wellknown.as Case

This tutorial shows you how the author created the layout using Fireworks. But of course you can do the same thing in Photoshop, the commands will change a bit but the process is practically the same.

How to Create a Sleek and Textured Web Layout in Photoshop

In this Photoshop web design tutorial, you’ll learn how to create a full web page layout that combines the sleek and textured look-and-feel using a combination of beginning to intermediate Adobe Photoshop techniques.

How to Create an Illustrative Web Design in Photoshop

In this web design tutorial, you’ll learn how to create a professional web design with an illustrated “vector” header in Photoshop. You’ll see many techniques here including how to draw using the Pen Tool and a excellent type treatment using layer styles.

Design a Clean and Fresh Company Website in Photoshop

You will be shown how to create a clean and sort of serious web design for a company.

Create an Amazing Layout Using Textures

In this tutorial you will be shown how to create an amazing layout using a simple texture, and some layer styles.

Design an Attractive One-Page Portfolio in Photoshop

You will be designing a one-page portfolio in Photoshop. The portfolio will include some brief biographical information, some sample work, brief description of services, your latest tweets, links to social profiles, and a call to action.

Create a Professional Portfolio Design in 17 Easy Steps

This tutorial teaches you how to create a professional looking portfolio design using very basic techniques.

Design a Simple, Modern Web Template

In this tutorial we will create a beautiful modern web page design with great usability.

Create a Gritty Website Layout

In this tutorial you’ll learn how to create a clean website layout with a grunge background. You can use this layout for a Wordpress blog as well.

Create a Clean Modern Website Design in Photoshop

Build a complete website design mockup for a fictional design studio, starting with the creation of the initial layout then moving on to designing the individual page elements. The result is a modern, crisp and clean webpage layout ready for coding.

Create A Stylish Portfolio Layout

In this tutorial you will be shown how to painlessly create a stylish portfolio layout in Photoshop, and you will also be guided on how to add jQuery functionality.

Create a Web Design Company Layout in Photoshop

Here you will learn how to create a modern looking Photoshop design for your web design company.

Create a Promotional iPhone App Site

In this tutorial you will be creating an iPhone app promotional site by taking our previous Fireworks constructed wireframe and adding color, texture, images, and effects to polish off this design in Photoshop.

Shopping Cart Design Mockup

You’ll be mocking up a shopping cart design layout called shop smart with various useful elements and extra functions.

Design a Dark, Contrasted Layout in Photoshop

In this tutorial you will learn how to create a dark, contrasted layout in Photoshop. This technique makes the top of the layout stand out while the bottom has a dark, professional feel.

Converting Your PSD to HTML Resources

This tutorial guides you through the entire process of converting from Photoshop to completed HTML. You’re going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme.

Tutorial: Coding a Layout

This is a tutorial from Eratic Wisdom, it does a good job of looking at the process quickly. If you’re interested in going through a shorter tutorial on the subject rather than spending a large chuck of time on all the details, try this one.

Build a Sleek Portfolio Site from Scratch

Within this tutorial you will be taking a good look at PSD files and then learning how to build it with some nice clean HTML and CSS.

From PSD to CSS/HTML in Easy Steps

This is the first in our 4 part series on how to take a PSD file and convert it into a fully CSS based html page. These are the first in a series of tutorials in which we build a fully working Photography site, all in clean Xhtml and CSS.

How to Turn Your Designs Into Usable Web Interfaces

Part Digital Design offers a detailed tutorial for coding a site from a Photoshop file. This tutorial is very detailed, from slicing the interface to the coding.

Portfolio | Print | CareSource

Feb 13
2009

caresource-print

A Source of Information

After designing the environmental branding package and producing a revised palette of graphic equity for CareSource, White Design Studio composed the first pieces that act as exemplars for their printed material. We designed their business card, letterhead, envelopes and a brochure to announce their new location, and provided their team with an interactive brand guidelines document to use for future collateral.

RELATED LINKS | DETAILSINTERACTIVEENVIRONMENTSIDENTITY