Mums recently finished the shoot and retouch of around 100 packshots for Schnoor. To make a realistic reflection, we used a piece of glass.

We love WordPress – nothing less… The blogging platform has rapidly developed into the preferred in it’s category worldwide! The flexibility of WP makes developers capable of developing great content management systems (CMS) with WP, which have been a great influence on it’s popularity! Another thing that have made WP so popular is the handling of, and the big library of, plug-ins. A plug-in is a small kind of add-on to the default WP installation / theme. And with more than 5.500 plug-ins, the flexibility is endless…

All around the web you can find top 10s, top 20s, top 50s etc., of the best WP plug-ins. But you’ve never seen a list like this one. The Mums list of WordPress plug-ins you should know about! Hang on…

01_Scissors

A powerful tool which makes you capable of cropping, resizing, rotating, watermark, etc. images right within the upload module. No more Photoshopping for an our to create content for your blog-posts. Do it all in the WordPress admin panel.

Link: http://wordpress.org/extend/plugins/scissors/

02_TinyMCE Advanced

This plug-in adds several improvements to the write panel. Highly customizable!

Link: http://wordpress.org/extend/plugins/tinymce-advanced/

03_Advanced Excerpt

While we’re at it, remember this one. I really find this one a must-have! Among other things, this plug-in allows HTML markup within the excerpt. Nice..

Link: http://wordpress.org/extend/plugins/advanced-excerpt/

04_Custom Post Template

Another, in my mind, must-have! Gives you the ability to work with different post templates. Just like different templates for pages, this opens up for the use of different post templates. Really handy if yo post both “text-based” posts, video-posts, gallery-posts, etc.

Link: http://wordpress.org/extend/plugins/custom-post-template/

05_More Fields

If you use custom fields, this the plug-in you’ve dreamt of! Instead of pasting code / URLs into custom fields, this plug-in makes you capable of using file-lists (drop-down), nice text areas, WYSIWYG boxes, etc., instead of default custom fields.

Link: http://wordpress.org/extend/plugins/more-fields/

06_WP CSS

Looking to speed up you blog? This is one of the solutions… These two plug-in will strip your CSS and JS docs naked and compress them into one CSS file and one JS file… With the capability to cache everything, it can really make a difference on your page loads. Off course depending on how many kbs of CSS and JS you have…

Link: http://wordpress.org/extend/plugins/wp-css/

07_WP JS

Same functionality as WP CSS, just with Your JS docs! Smooth huh…?

Link: http://wordpress.org/extend/plugins/wp-js/screenshots/

08_Contact Form 7

For a long time I preferred cForms (http://www.deliciousdays.com/cforms-plugin) because I thought their admin was a lot easier to use… Now I’m completely opposite… Contact Form 7 is flexible, easy to use, easy to skin, simple, and just nice!

Use it…

Link: http://wordpress.org/extend/plugins/contact-form-7/

09_Google XML Sitemaps

If SEO is important to you – and I’m sure it is – this is a killer plugin! The plugin creates a Google XML-Sitemap of your WordPress blog. It supports all of the WordPress generated pages as well as custom ones. Every time you edit or create a post, your sitemap is updated and all major search engines that support the sitemap protocol, like ASK.com, Google, MSN Search and YAHOO, are notified about the update.

Link: http://wordpress.org/extend/plugins/google-sitemap-generator/

10_NextGEN Gallery

Though I know that almost every WordPress user know this plug-in, I had to list is here… The plug-in gives you a powerful gallery in itself. But with a little PHP / HTML /JS knowledge, you can use this plug-in for complex AJAX galleries. The sliding gallery in our project-pages is powered by this plug-in. The possibilities are many…

Link: http://wordpress.org/extend/plugins/nextgen-gallery/

Do you know other WP plug-ins which you think I or people should know about, feel free to comment on this post!

As a designer we’ve all tried it. The client who wants a simple site, but don’t have any content, text, pictures, no identity really, no nothing. So there you stand, with a client who expects you to do magic with nothing. To invent something brilliant. I always find these kind of projects the hardest though it’s like creative freedom. Often the most simple design is the hardest to accomplish, because simple design will not work unless there is some kind of central idea. It could be a special navigation, big picture backgrounds, some simple AJAX functionality, or just something that won’t leave the user back with the feeling of a unfinished or boring site.

The “less is more” idea really requires some talent.

Recently I had one of those projects, and thought, why not share the process? Maybe one or two could use my thoughts for something.

Identity

Do the client have some kind of existing identity? Logo, corporate colors, fonts, whatever… Something you should be aware of before you start the design process.

In my case, there were only a logo and a outdated web-design. Nothing else. In a situation like that, personally I like to make some guide-lines for myself. Meaning, I spend some time finding typography which would fit this client. I think about colors, compositions and style. Generally thinking of a kind of profile for this design. What kind of business is this, what do we want to express? There’s a huge difference between corporate and fashion…

From the old site, we chose to keep;

01. The logo
02. The use of numbers and relatively big typography
03. The architecture with the centered ribbon-like content-container which, as in the old design, should be 100% width of the browser

Trends

Take a look at the trends. Read some magazines or use an hour or two surfing the Internet, check your RSS feed for new stuff to get your creativity to flow… For this project I found a lot of inspiration in the Computer Arts Projects issues about “Design Trends in 2009″, “The Art of Web Design”, and off course Smashing Magazine‘s article about “Web Design Trends for 2009“

Kind of quick I found what I was going for. A web-design heavily based on typography and some kind of letterpress-use, spiced up with the use of colorful, full screen background-images. I wanted to keep it clean and “flat”.

I wanted to let the beautiful Helvetica dominate the content-area. My inspiration were;

I love when small details is made with typography. Like ending a line or a paragraph with a “/”-sign, a “+”-sign or a “_”-sign

Credits;

01. 50 years of Helvetica
02. Thank fuck for Helvetica

Kind

You have to make up which kind of business you are designing for. In this case it was 0% corporate and 100% lifestyle. In my opinion that means less text and more visual appealing content.

Big pictures

I wanted to base this web-design on big pictures. So I went online and bought some dummy content at iStock. From that I could begin designing something to show my client. My first mock-ups looked like this:

Pictures for the presentation are bought at iStock.

Typography

Find suitable typography is just as important as the whole webdesign. Again you should take a look at the business. In this case I was designing for a business in the fashion industry, which made me go with a sans-serif font.

Actually I never had any doubt. From the beginning I was kind of sure of what kind of typography I was going to use. Helvetica is the perfect font for this kind of use, and at the same time it fits the business well. The other thing I thought of, was that the typography would be an integrated and central thing in the design, why it should be a font capable of that use. Furthermore there’s a ton of different weights in the Helvetica family…

Navigation

Even though you’re a designer, some things you don’t have to invent. Meaning, something central as the navigation of a website, isn’t supposed to leave people go “what the hell?!”. It have to be intuative and easy to use the site. Or else people will leave the site…

I made this navigation very simple, but still with the “letterpress  / mask”-effect.

The idea

Because of the simple design and the fact that this site never was meant to carry a lot of content, I wanted to make it special in another way. Because of the fullscreen slideshow in the background, the site is very easy to give a make-over. A photoshoot, 10 new images, and you have the impression of a new site, because of the central use of the images.

I wanted to make the site useful but at the same time, I thought it would make the site memorable if the user had the oppoturnity to just watch the slideshow. So with jQuery I made the whole content div fade when the mouse isn’t around the div (the fade functionality is disabled in wonderful IE because of it’s lack of png-transparency handling)

Conclusion

The client “bought” the idea and the photoshoot. Powered by WordPress, the site is maintained by the client herself, and we’re hosting the site as well.

Below you find some screens from the final site…

Links

- Our Theia case
– Visit Theia.dk

Grab the RSS feed of these inspirational sites

- Best Web Gallery
– CSS Remix
– Design You Trust
– Website Design Awards
– Smashing Magazine

Update

We removed the preloader functionality on our site, because external sources such as flickr and twitter sometimes made the preload go for 5-8 seconds. But if your site isn’t pulling data form external servers, go ahead!

____

Preloading entire pages has always been something belonging to Flash sites, but recently I found a solution with the excellent jQuery! Take a look here, and achieve a preloader functionality as on mumsstudio.com.

Demo

Example

Background

We want to have a div which is covering the whole site, and disappears when all content is loaded. The preloader requires the jQuery library – you can see the code in the source which can be downloaded at the end of this post.

HTML

The markup is very straightforward. Right after your place something like;

<div id="preloader"></div>

A simple div…

CSS

The CSS is more up to you. You can change color and the preloader graphic (a simple animated gif). In this example I go with this code;

div#preloader {
 position: fixed;
 z-index: 999;
 width: 100%;
 height: 100%;
 background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
 }

Javascript

$(window).load(function(){
 $('#preloader').fadeOut('slow',function(){$(this).remove();});
 });

Simply, when window (all content) is loaded, fade out the div with id preloader and remove it.

Easy and smooth!

Links & downloads

Note: There is a file embedded within this post, please visit this post to download the file.
Easy ajax preloaders
Example