Visit Las Vegas

Visit Delaware

Travel Alaska

Colorado

Visit Florida

Go Hawaii

Visit Idaho

Tourism Thamel

Visit Jordan

Summer Tennessee

Tennessee Vacation

Discover Tennessee Trails and Byways

Discover Los Angeles

Downtown LA

Visit York

Visit Birmingham

Discover Hong Kong

New Zealand

Discover America

Enjoy England

Hiroshima Navigator

Visit Indiana

Portal Arkansas

Utah.gov

Ca.gov

City of Santa Clarita

City of Signal Hill

Ajuntament de Barcelona

Pamplona I Like It!

NYCGo.com – The Official Guide

Visit Catalina Island

San Francisco Travel

VermontVacation.com

My Switzerland

Notice the patterns they used that shadow the text. They’re usually best as diagonal lines. A screenshot of what we’re building is shown below:

Ready to get started? Let’s begin:

Step 1 – Create your pattern

Fire up Photoshop and create a new file. The dimensions are 3 pixels wide and 3 pixels tall:

Ctrl + Shift + N to create a new layer – leave it untitled and click okay. Zoom in to the document as close as you can (by pressing Ctrl and + at the same time). Hide the background layer by clicking the “eye” icon from the layers palette:

With the Layer 1 selected, grab the pencil tool – decrease the size to the smallest (1 pixel), set the color to black and click 3 times onto the layer (in a diagonal line). Not to worry about being perfect – it will snap into place:

Go to Edit > Define Pattern. You can name you pattern and close the file without saving. Your pattern should be saved in your options palette.

Step 2 – Set the Background

Create a new file in Photoshop – a good size is 800 pixels wide and 500 pixels height. Add a daub of color to the background layer – I chose #c8bcb2:

To amplify our text effects even more – I like to add some texture on top of our background layer. A new website called Tileables specializes in such textures. I grabbed the “Fabric” pack from the Tileables-Pack-04 collection – open the .psd file from the zip file and drag your desired texture into your file. Decrease the Opacity of this layer to about 20 percent:

Create another layer. Select the paint brush tool – set the pixel size to 600, color to #ffffff, and Opacity to 31 percent. Click on the center of your document.

Step 3 – Create your Text

Using the text tool – type in your title, set the font size to real big (I’m using New Clarendon Font type and its set to 176 pixels, and bold type)

Right click on the layer and duplicate it. Nudge the layer downwards and rasterize it (right click the layer > “Rasterize Type”).

Double click on the rasterized layer and this will bring up the layer style window. Click on the “Pattern Overlay” option and select the pattern that we’ve created from Step 1 (should be the very last swatch).

You should see our layer with our newly applied pattern. The problem is – the original white background bleeds through.

Double click on the layer again to bring up the styles. In “Blending Options” – make sure it’s on “Blend if Gray” and slide the first handle to the right all the way to the middle. This should take care of the white bleed:

By now you should be a master of duplicating layers. Duplicate the original text layer once more, rasterize and fill with #ffffff. Nudge this layer downwards just a couple of pixels. This will give it a more dramatic outline effect:

Step 4 – Embellishments

Ooh – I love that word! “E-M-BE-LL-ISHMENTS” – I like the way it rolls off the tongue. Anyway – our text is technically done. You can now add your own graphics or trimmings that would complement your new heading.

I accompanied mine with the word “flyer” – with an entire different font type, partnered with a horizontal line with an etched effect. Here’s how that’s done:

For the word “Flyer” I chose Nevis, and made it all capital letters. The font size is 36 pts, color is #000000.

Place the subtext directly in the center of the main heading:

Using the Line Tool, draw a line underneath the main heading (hold the shift key while drawing). Use a 2 pixel line with #000000 fill:

Duplicate that layer and change the fill to #ffffff; then nudge the layer a couple of pixels downwards.

Combine both line layers by selecting them, right click and hit “Merge Layers”. With the selection tool, change the feather to 2 pixels; select over the word “Flyer” with just enough padding – then hit delete:

Conclusion:

And that’s it! Take a look at the screenshot below for the final product. You can download what we’ve just created – but it will contain rasterized text layers. I did this because chances are – you won’t have the fonts that I used. Feel free to leave a comment below.

The Holy Grail

So I thought it was easy to have three columns, with both sidebars static widths; while the center column is the only one that expands according to the browser. Boy I was wrong – I couldn’t figure it out for the life of me! And through some serious searching I finally discovered “the Holy Grail” – from A List Apart. The funny thing is – I’m probably one of the last ones to find this “sacred” code. Thanks to Matthew Levine’s article – I achieved my layout.

Breadcrumbs, Buttons and CSS3

I started to implement my own breadcrumb function – but discovered Dimox’s solution – was far more complete. I needed a breadcrumb navigation that doesn’t require a plugin and Dimox did the job very well. Zurb’s Super Awesome buttons are what’s styling all the buttons in Maximus. You should notice the resemblance for each button – with only the base color that is different from one another.

Lastly, I’ve adopted quite a few CSS3 techniques from all over the net. From box shadows, text shadows and overlays – all contribute to the visual effects of Maximum.

Conclusion

I hope you find good use for Maximum. I did enjoy experimenting and discovering new ways of doing things. I imagine this type of theme would suit the serious content writers (ones who need all the real estate they can get). It may also be used for ecommerce, or “wiki” types of layouts – who knows. If you do decide to use it, don’t forget to leave your url in the comments section below! Happy Blogging!

Features

The layout itself is very modern. The page is housed in a beautiful etched container with very subtle textures. The large feature section showcases the “Apps” main message with large “call to action” buttons to get the viewers to instantly join.

There’s a blue ribbon separating the main section and the latest posts / sidebar. I imagined this to be an expanding area for categories and what not. Typically a little javascript should do this trick. The rest is pretty conventional, icons, typography, grid spacing and pixel perfect alignment.

The .psd file itself is grouped, layered and organized. Feel free to use – under creative commons license. I would like to know if this type of design still suit clients out there. If you feel it’s a bit “played out”, out dated – whatever, Please let me know in the comments section. Download the file from this link.

Leeds Universities Catholic Chaplaincy

This one came first for a reason. The beautiful background photography is simply stunning. Combined with awesome typography, transparent menus, and that excellent calendar in the sidebar – Leeds University is a real treat to the eye.

St. Thomas University

A more traditional form, St. Thomas University sports a nice wooden background, rounded corners and excellent containers within.

Christopher Newport University

If that large slideshow in the homepage doesn’t awe you… Also make sure you notice the crafty navigation menu and beautiful inner pages of Christopher Newport’s website.

Wofford College

Pay attention to the finer details of this website. Check the headings, the logo, borders and background elements – very well done.

Missouri State University

Not to focus so much on visuals, but Missouri State’s website has so much activity going on. That slideshow in the homepage is dynamically updated daily with user submitted photos!

Boston University

Boston University’s website is very simple yet elegant and clean. The site itself is minimalistic, which enhances the content photography all the more. Note that the thumbs in the homepage( beneath the large image) is a javascript slider. Also, Try clicking the “Not Varsity Sports” link and it leads to an even more amazing page.

University of Vermont

University of Vermont’s website is more traditional, yet effective design. Good sharp edges, sufficient spacing and fine typography.

Brown University

Ahh, Big, Bold and Brown. I love the feature area in the homepage especially the chosen fonts – bright yellow blends beautifully with brown. The background may be a bit overkill, but it works I guess.

Montgomery Country Community College

A large rotating image in the homepage spans snuggly across your screen. It’s quite conventional, but works really well. Good tabbed containers, color schema and of course – photography.

Lafayette College

This by far is my favorite from the list, the Lafayette website is filled with CSS 3 and javascript wonders that stuns developers like me. I especially like the switching content in the homepage – which drives the containers in the sidebar as well. Good job Lafayette!

Washington University St. Louis

Another favorite! That large background photo of the school grounds can be viewed with a short story once clicked. A link to the archived background photos can be seen as well (the photos are swapped weekly).  The rounded containers, excellent color schema, and effective font types all contribute to this awesome work of art.

Arizona State University

There is something about Arizona State’s website that is pleasing to the eye – but I can’t quite pinpoint. There may be some misaligned elements, line spacing issues – minor things.  But overall, it is still good work.

Lethbridge College

I like the blue / green combination – especially with the nature background which fades into white. The Lethbridge College is an example of a well crafted web design.

Eastern Kentucky University

Sporting large headings, slogans and photos is always eye candy for me. School colors are well represented, nice fades and textures – EKU has done a good job on their website.

Nazareth College

Simple and serene, sharp and clean – enough said.

Wayne State University – College of Education

Color scheme is well planned, good use of fonts and soft shadows and gradients. Wayne State is a thumbs-up.

University of Southern California

Another favorite:  I say this because if I was to build an esteemed University’s website – it would be along the lines of USC’s fabulous design.  Exceptional use of javascript scrollers, menus, and overall placement of content puts USC on top of my list.

Journalism & Tech Communication – Colorado State University

The Journalism page at Colorado State University gets the fundamentals of modern web design. Nice rotating slideshow in the center, bold headings, text treatment – the works.

Century College

Definitely out of the ordinary, Century College’s design pops out of the crowd. Overalpping containers, shadows, beautiful fonts – very modern, sleek and unorthodoxed. I like it.

Eastern Washington University

Vivid and Loud – Eastern Washington wants to be heard. Good execution of hand painted elements such as the background, welcome message, and icons. What I really liked is the footer of the pages (nice mini scrollers) – be sure to check it out.

West Virginia University

Nice representation of school colors, good thumbnails. Notice the rotating image in the homepage when refreshed.

Rochester Institute of Technology – Brick City Homecoming

Beautiful. You can’t miss the coordination of colors, the nice folded elements, extraordinary font treatment and text shadows. Mad props to the designer of RIT.

Penn Foster Career School

Subtle folds in some of the containers, very sophisticated, well executed. Penn Foster’s website is a symbol of prestige and high reputation. Masterfully designed.

Campbell University

Campbell’s website is quite an eye pleaser – especially to web designers like me. It is a classic left justified page – which you don’t see often enough of, large rotating background images, excellent use of negative space as well as nice overlapping containers. I love it.

Stanford Center for Professional Development

Another sleek display, be sure to hover over the thumbnails in the featured flash image – notice the blurring effect in the background. Nicely done.

Conclusion

There you have it, 25 of the most attractive college websites I can grab. What do you think of them? Do you know of one that is not included in this list? Please let me know your thoughts in the comments section below:

Be sure to check out the following websites for further college web design inspiration:

• Edustyle.net – an online gallery for campus web design. Users submit and showcase their sites to get reviewed. Note that most of the sites in my list are from this excellent resource
• 25 of the Best Websites for Educational Institutions – Vandelay web design is a very well known website for web round ups such as this
• Top 11 Best Designed University Websites – Another roundup about the same topic. Pretty good websites in this list as well

Walgreens

This one is first for a reason. Walgreens obviously have a very creative team behind their website: from the buttons, navigation, choice of fonts – they all simply tie together. Be sure to check out the product slider in the home page.

Wegmans

There’s something about this website that appeals to me. Maybe it’s the real time Twitter feed in the home page, or maybe it’s the massive drop down list in the main navigation.

Target

Target always had major headlines in regards to the beautiful branding of their store. The same goes for their website – simple, elegant and classic.

Whole Foods Markets

Nothing too fancy going on with the Whole Foods website. All elements are well intact, beautiful spacing, and well coordinated.

Fresh and Easy

You gotta love that mix of bright and dark greens. The Fresh and Easy website absolutely stayed true to their company colors. Be sure to notice the product review marquee in the header.

Hy-Vee

One of my favorites, the Hy-Vee website is clean, easy to navigate and has a very timeless design (much like Target).

H.E.B.

Another simple and elegant design, the HEB website is sleek and sharp with subtle hints of modernity.

Safeway

One web wonder: the Safeway website definitely ranks amongst my top picks. I love the play of colors – browns and dark reds, the mixture of different font sizes (from very large to super small), as well as professional use of icons throughout the pages.

Kroger

It is quite refreshing to see to see Kroger’s color scheme. I like the combination of blues and fades – gives the site that current and stylish feel.

Ahold

Though technically not a supermarket (more of a brand), Ahold has one of the more astonishing website I’ve seen to date. What I especially liked: the typography. Simply beautiful.

Win Dixie

May not be the most spectacular amongst this list, the Win Dixie website has the more traditional elements of a fundamental supermarket website.

Giant Eagle Market District

Definitely not ordinary – Giant Eagle Market District’s website has a style of its own.

Foodzie

You gotta fall in love with the Foodzie website. From their original color schema, watercolor backgrounds, custom icons and beautiful typography – this website screams “amazing“.

Lava Lake Lamb

The Lava Lake Lamb website itself is simple and straightforward – bringing out their amazing photography all the more.

Straub’s

The Straub’s website is very original – from the custom background to the classy fonts. Check out their introductory page with a dual slideshow of their content.

Frog Hollow Farm

Far from being fancy – the Frog Hollow Farm’s website is clean and minimal.

Save Mart Supermarkets

Even though the pages are riddled with content, Save Mart’s website is very organized. Here you will find coupons, locations, store specials, recipes – plenty of information that is presented wisely and logically.

Vallarta

Though the different backgrounds may use a little subtleness, the Vallarta website is quite welcoming. Photos of staff, their stores and products – you really get the true feeling of being inside their markets.

Trader Joe’s

Real out of the ordinary, the Trader Joes website is filled with handwritten elements, grungy splashes, and custom icons. Check out their fully animated flash header.

C-Town Supermarkets

Another brightly themed website: C-Town Supermarkets is quite a sight. I especially like the nice flash feature in the home page – including a product hover / slider in the bottom.

Conclusion

So what do you think? Notice the similarities? The differences? What do you think is an important factor in Supermarket websites: is it the store locator? Coupons? Specials? Also, notice that not all of them have the capability of online store – do you think this is even important?

I look forward to your comments. Please feel free to leave them below. Lastly, if you think I left out any sites – please let me know as well.

LittleBigPlanetoid

Awesome use of large backgrounds – especially in the header area; this website screams “I’m unique” in all angles.

Render Creative

Render creative specializes in high end websites. This is easy to tell from their superior placement of large images, use of muted colors as well as large fonts.

Sam Houston

The Sam Houston website displays good use of shades, silhouettes and matted elements. What I especially liked is the timeline that serves that historic purpose.

All K Pop

Talk about busy – All K Pop is a magazine styled website powered by EE.

GOP

Once again, excellent oversized header – with alternating backgrounds for the faces. Bright, bold color schema with wide open spacing between elements:

Think About It

The Think About It website features beautiful contrasting greens against whites, along with good use of transparencies.

Campaign Monitor

The popular email marketing software runs their home site in EE. Top notch design with superior web 2.0 elements.

Office of the Governor

Really? Office of the Governor is running EE: Another testimonial for the platform’s accountability.

Chapman University

Good utilization of transparencies and high contrasting colors.

Havilah Legal

Talk about blue, this law firm website is very sleek and professional. I like the conformity to the strict color schema.

Trevor Allen Photography

Impressive slideshow, fancy lifted page effect, creative backgrounds – this website is simply stunning.

I lounge

This is an example of how complex an ExpressionEngine website can become. Many facets such as blogs, reviews, polls, a store and plenty of ads fused into one.

Ruth Badger

The Ruth Badger website is a presentation of good web 2.0 elements including ribbons, diagonal backgrounds and clean typography.

Tweetsie Railroad

Fun and fantastic, Tweetsie’s design is anything but ordinary.

Paul Rand

Very simple, serene and personal, the Paul Rand website is proof of clean web marksmanship.

VK Magazine

Superior typography, good spacing and placement, beautiful icons – VK Magazine takes content organization in a whole new level.

Mock Elections

Beautiful vector graphics, combined with muted colors – Mock Elections is a good example of an artistic webpage. Be sure to check out their awesome navigation buttons.

Echo-Factory

A somewhat refreshing combination of dark orange shades and dirty backgrounds. Nice origami Twitter bird.

Conclusion

As you can see, with a little talent and ExpressionEngine – you can do a lot. The platform comes in three pricing categories (free, personal and commercial) which varies from included and excluded features amongst them. For more information – head over to ExpressionEngine’s website.

What about you? Do you have an ExpressionEngine website you want to showcase? Please leave a comment below!

Are you ready to get your hands dirty? Let’s start coding:

Convert the Feature into a jQuery Powered Slideshow:

Our feature section looks good as it is. Though it would be better if the large image on the right would change and cycle through other images. In other words, we need to convert it into a slideshow of our best work.

Adding the Script Files

First thing we need to do is download jQuery. jQuery will be powering all of the javascript we’re using for our page. Head on to http://jquery.com/, download and save it into our current directory.

Inside the head section of our HTML, insert our script tag:

<script src="jquery-1.3.2.min.js"></script>

Now all of jQuery’s magic is in our fingertips. Download the slideshow plugin from: http://jquery.malsup.com/cycle/. Right below our first script tag, insert directly below:

1
2
3
4
5
6
7
8

<script src="jquery.cycle.all.2.72.js"></script>
<script>
	$(document).ready(function(){
		//cycle plugin
		$('.slideshow').cycle({
			fx: 'fade' 
		});
</script>

Getting the images ready:

Now that our scripts are intact, let’s get our images and our stylesheet ready so the animation will take place. Open feature.png in Photoshop and create new guides as shown below. Make sure you cut right down to the pixel.

Cut out the center image and fill with solid color.

Save the file under the same name.

Create several images that will go inside the slideshow - all must have the same dimensions – in our case: 476 pixels and 349 pixels.

Insert the HMTL right below the feature div. Of course you will replace the image names with your images, along with the right path:

1
2
3
4
5
6
7

<div class="slideshow">
<img src="images/feature-1.jpg"/>
<img src="images/feature-2.jpg"/>
<img src="images/feature-3.jpg"/>
<img src="images/feature-4.jpg"/>
<img src="images/feature-5.jpg"/>		
</div>

Append this code inside your existing style.css file:

#feature .slideshow {float:right; position:relative; left:-24px; top:21px;}

This ensures that the slideshow will sit on top of the designated box in the feature div:

Preview index.html in your browser. By now you should see your new slideshow swapping your images in your feature section:

Next up: The expanding sections, and the “lightbox” effect.

Adding the “More” click events on the sections below the fold:

We have two sections below the fold that showcase what our work is all about. One is the useful “Testimonials” section – where visitors read what others are saying about our services. And of course, the “Previous Work” area – where you plug in screenshots of work that you’ve done. This may be websites, photographs, software; anything that can be screen captured you can apply.

The point is to only show a few of testimonials, and a few thumbnails of your previous work. When visitors click on the “More” buttons, the section expands to show the rest.

This approach is also best for people who have plenty of work, but only would like to show a little at first.

Insert the code below inside the $(document).ready function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$(".column:gt(2), #previous-work ul li:gt(3)").hide();		
		$("#testimonials").append("<div class='more'><a id='more-testimonials'>More Testimonials</a></div>");
		$("#previous-work").append("<div class='more'><a id='more-previous-work'>More Previous Work</a></div>");	
		$("a#more-testimonials").click(function(event){		
			if ($(".column:gt(2)").is(":hidden")){							
				$(".column:gt(2)").slideDown('slow');
				$("a#more-testimonials").text("Less Testimonials");				
			}else{
				$(".column:gt(2)").slideUp('slow');
				$("a#more-testimonials").text("More Testimonials");	
			}			
			event.preventDefault();					  	
		});
		$("a#more-previous-work").click(function(event){							
			if ($("#previous-work ul li:gt(3)").is(":hidden")){
				$("#previous-work ul li:gt(3)").slideDown('slow');
				$("a#more-previous-work").text("Less Previous Work");				
			}else{
				$("#previous-work ul li:gt(3)").slideUp('slow');
				$("a#more-previous-work").text("More Previous Work");
			}			
			event.preventDefault();	
		});

The above code first hides our testimonial DIVS (that are greater than 3) and our previous work list items (that are greater than 4). Then it alters the HTML of our buttons, as well as toggle our hidden sections to appear while sliding slowly.

Adding the light show effect for the Portfolio gallery:

For the portfolio thumbnails – it would really be nice to add a “lightbox” effect once the images are clicked. Lightbox provide a way for viewers to see the detailed image without physically leaving the page. For our portfolio – we’re using http://fancybox.net/

Download: http://fancybox.googlecode.com/files/jquery.fancybox-1.2.6.zip
Extract the files and copy the folder “fancybox” from the unzipped file and place in the root folder of our portfolio. Inside index.html, place the code in the head section:

1
2

<script type="text/javascript" src="./fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.2.6.css" media="screen" />

Inside our custom script tag, (right after the last “});”) insert the block of code:

1
2
3
4

$("a.zoom").fancybox({
			'zoomSpeedIn'	: 500,
			'zoomSpeedOut' : 500
	});

In our unordered list of thumbnails, insert this “class” and “rel” attributes for each anchor tag:

class="zoom" rel="group"

Refresh index.html in your browser and click a thumbnail. You should now see the effects of Fancy box from your portfolio:

Last step: The contact form.

Completing the Contact Form with PHP

Since HTML and javascript doesn’t support contents of a form to be sent through email, we need a little help from PHP to bring our contact form to life. We are now working with server side technology, so won’t be able to test our file without a web server. So in order to test our code, upload your file to your web host or run apache locally using WAMP or MAMP.

First thing we have to do is change the extension of index.html to .php. We will be working with the .php file from now on. You can discard the .html version – or keep it for archive.

Look for the form tag inside index.php; add a method and an action attribute:

<form id="contact-form" method="post" action="">

This enables our form to use the $_POST array and be processed by the same page. To test the contents of our post array, type the following code right above the form:

1
2

<pre>
<?php print_r($_POST) ?>

Now, add some stuff to the form fields, click “Submit” and see what our pre tags have spitted out:

Now we know what we need to work with as far as the contents of our post array. We can now remove the pre tags and continue to work on our code. Add the following code on the very top of the page (even before the !DOCTYPE declaration):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php
//see number 1
 if (array_key_exists('send', $_POST)){
		//see number 2
$to = 'youremail@mail.com'; //this is your email address
	$subject = 'From Your Contact Form';
	$name = $_POST['name'];
	$email = $_POST['email']; 
	$comments = $_POST['comments'];  
		//see number 3
$message = "Name: $name\n"; 
	$message .= "Email: $email\n";
	$message .= "Comments: $comments";
		//see number 4
	mail($to, $subject, $message);
}
?>

What the above code is doing:

Now it’s time to test the code. Enter your email address into the $to variable then upload index.php to your web server. Fill out the form fields and click “submit”. You should receive an email similar to below:

Now remember that this is a stripped down version of a contact form. You should seriously consider adding several things such as form validation and formatting the entries for safe and legitimate values. Also add error and success messages to let the user know what’s going on. (I won’t cover such things because as you can see – this tutorial has gone waaay too long).

Final Words

There you have it - a complete single page portfolio. We started all the way from scratch: Mocked up the concept in Photoshop, hand coded the HTML, while slicing the images and writing the CSS. We've added some jQuery magic as well as a little bit of PHP functionality. As you see - a lot of work does go into it (and that's just a single page!)

In closing, I hope that you may learn something from this 3 part series. I also would like to thank the script and plugin developers which I included in this tutorial. You can download the finished product from this link, and of course view the live demo from here.

I also suggest that you find a web hosting server that works well with HTML, PHP and jQuery. This will take care of all your hosting needs.

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).

http://thenoodlebox.net/

http://www.rubytuesday.com

http://www.twelve-restaurant.co.uk/

http://www.pizzaza.ca/

http://www.nuevo-aurich.de/

http://www.pomonavalleyminingco.com/

http://www.lapizarraproject.com/

http://www.villagerkent.com/

http://www.bertoldis.ca/

http://www.caferouge.co.uk/

http://jakesrh.net/

http://www.belgo-restaurants.co.uk/

http://www.giraffe.net/

http://www.sandiegobrewing.com/

http://www.hoddows-gastwerk.de/

http://www.strada.co.uk/

A number of leading designers have already dominated this WordPress premium themes market; quite notably: Woothemes, DIYThemes and StudioPress.

But amongst these big names you may have come across a more succinct, straightforward and classy premium theme designer – simply named “Elegant Themes“.

Who is Elegant Themes?

Elegant Themes is owned by a designer named Nick Roach. This means that all of the designs and code that is produced from Elegant Themes is from this mighty fellow. According to Nick:

I created this website to provide WordPress themes of quality and integrity. I craft my themes with a goal of simplicity and professionalism and strive to inject each design with a dose of modest elegance. I believe that your website is not just a tool, it is an integral part of your identity. My job is to respect each customer by providing attractive and userfriendly templates that will help you achieve your online goals.

What’s so special about Elegant Themes?

Quality over quantity. Elegant Themes is hardly a large collection – I mean, there’s only about 30 downloadable themes at the time of this writing. But note they are quite high quality. Check out some of them below:

Wooden

Very down to earth, classy and professionally done – this theme can transform your blog into a modern website wonder.

Lumin

Soothing to the eye with subtle textures and sharp, detailed accents – this theme is packed with visual amenities that scream WEB 2.0!

GrungeMag

Semi-magazine, semi-newspaper – beautiful textures, slider, thumbnails – simply stunning.

Evid

Create your own “Hulu” styled video website with this theme:

Deviant

The ultimate grunge look! Random page tears, crumpled paper, dirty textures – you want your blog to stand out from the crowd – this be the theme for you!

Like Nick said – “each design is injected with a dose of modest elegance”. With each theme you will find excellent color schema, superb use of typography, plenty of textures, just the right amount of Javascript, and above all – originality. The themes obviously took time to build.

You Can’t Beat 20 Bucks a Year!

I don’t think I can elaborate on this any further. $20 dollars a year gives you unlimited access to all of Elegant Themes. Whether you’re a blog owner, an entrepreneur, or even a web developer – you’ve already won by having this arsenal of elegant designs to beautify your websites; all for about the same price as a bucket of fried chicken. Head on over to Elegant Themes!

After choosing the theme you want to use, another important thing is to find cheap webhosting for your site.