thedesigner.co.za

What I’ve Learnt From Building a WordPress Theme

Adriaan — Tue, 29 Dec 2009 09:06:47 +0000

As I embarked on an epic adventure of designing a new WordPress theme for thedesigner.co.za I learnt a few things that I want to share with you. This is by no means a tutorial on how to create a WordPress theme, but rather a guide on what I found useful to do when using or designing a new WordPress theme.

When I started this blog I used a minimalistic theme which I downloaded from the WordPress theme gallery and without thinking much about the consequences started blogging, adding image headers and some formatting that I rather shouldn’t have.

Make your images dynamic:

I only realised that this was a problem once I started testing some different themes where I discovered that my header images, which had a curve to it, suddenly didn’t fit in with the theme anymore. The same thing happened with some of the content formatting I used. So my first tip is that you should make your images more dynamic and insert them into posts as basic images and let your WordPress theme add all the interesting elements via CSS.

Should I use a WordPress framework?

This was probably my biggest battle I had in my head as I scoured the web to find the ultimate WordPress framework. I downloaded the recommended ones that caught my eye and did a few tutorials on getting started with them, but every time I got to almost-the-end product of my site I wasn’t satisfied as the little voice in my head kept telling me that I can do this on my own – I am a fully capable web designer after all?. This kept happening until I got to the fourth framework where I decided that this is not the solution for me. Now don’t think I have something against WordPress frameworks as I have seen some amazing ones that are fully capable of kicking ass in terms of development, but as a web designer I felt empty using them for my own work.

Should I use an existing WordPress theme?

So after I finally trashed the frameworks I went on another hunt for an existing WordPress theme that I could tweak, mangle and disfigure to fit my needs, but that same little voice and emptiness kept lurking in the back of my head until I ultimately decided that this is not the way to go for me either – I am a fully capable web designer after all?

More on WordPress frameworks at http://codex.wordpress.org/Theme_Frameworks

Should I build my own WordPress theme from scratch?

Absolutely, this was the right choice for me…and the little voice faded and was replace with the excitement of going on a design development binge. I managed to find a number of good articles on the web on how to build a WordPress theme from scratch, but ended up using bits of advice from each as I couldn’t find just one that had all my unanswered questions.

Where to find good articles on building WordPress themes?

I was pleasantly surprised with some of the WordPress articles I found on Smashing Magazine which enabled me to conjure up the WordPress magic I was looking for.

I was having problems with multiple sidebars in my theme, because they kept on disappearing in the widget area once all the settings were saved. After reading and implementing my multiple sidebars as described by Smashing Magazine my widgets were finally behaving. The problem was that I didn’t include ID’s for my sidebars so be sure to give your sidebars their own ID’s.

Reference:

Point ‘6. Add Multiple Sidebars‘ from the article ‘10 Useful WordPress Coding Techniques‘

Next I needed to show a thumbnail next to a bit of content from my posts in the main index page and once again Smashing Magazine helped me out in this area. I combined two coding techniques by Smashing Magazine where I used TimThumb to automatically resize my thumbnail’s size and a function that looks for the first image in a post.

Reference:

Point ‘6. Automatically Retrieve The First Image From Posts On Your Home Page‘ from the article ‘10 Exceptional WordPress Hacks‘
Point ‘7. Resize Images On The Fly‘ from the article ‘10 Exceptional WordPress Hacks‘

Reference the Default and Kubrik WordPress theme:

Sometimes when I got stuck with a certain part of my WordPress theme I referenced the two stock themes that come packed with WordPress as I thought they are good examples of what I am trying to achieve. It also just helped checking to see if I had all the correct parts inside my theme.

What plugins worked for me?

It is always difficult finding that perfect plugin between the masses which can literally be like finding a needle in a haystack. I tried and tested so many plugins that I lost count, but after about a week of trial and error between the million plugins out there I settled and can recommend the following:

Author Image, by Denis de Bernardy
Adds authors images to your site, which individual users can configure in their profile. Your wp-content folder needs to be writable by the server.
Visit the plugin page at WordPress.org
Google Analyticator, by Ronald Heft
Adds the necessary JavaScript code to enable Google’s Analytics. After enabling this plugin visit the settings page and enter your Google Analytics’ UID and enable logging.
Visit the plugin page at WordPress.org
Google XML Sitemaps, by Arne Brachhold
This plugin will generate a special XML sitemap which will help search engines like Google, Yahoo, Bing and Ask.com to better index your blog.
Visit the plugin at WordPress.org
Limit Posts, by Alfonso Sánchez-Paus Díaz y Julián Simón de Castro
Limits the displayed text length on the index page entries and generates a link to a page to read the full content if its bigger than the selected maximum length.
Visit the plugin here
Shadowbox JS, by Matt Martz
A javascript media viewer similar to Lightbox and Thickbox. Supports all types of media, not just images.
Visit the plugin at WordPress.org
Twitter Widget Pro, by Aaron D. Campbell
A widget that properly handles twitter feeds, including @username, #hashtag, and link parsing. It can even display profile images for the users. Requires PHP5.
Visit the plugin at WordPress.org
WP-DB-Backup, by filosofo
WP-DB-Backup allows you easily to backup your core WordPress database tables. You may also backup other tables in the same database.
Visit the plugin at WordPress.org
WP-ContactForm, by Johannes Ries, Ryan Duff
WP Contact Form is a drop in form for users to contact you. It can be implemented on a page or a post.
Visit the plugin at WordPress.org
WP-PageNavi, by Lester ‘GaMerZ’ Chan
Adds a more advanced paging navigation to your WordPress blog.
Visit the plugin at WordPress.org
WP125, by redwall_hp
Easily manage 125×125 ads within your WordPress Dashboard.
Visit the plugin at WordPress.org

Now like I said, this is by no means a tutorial on how to create a WordPress theme from scratch, but hopefully this will help you out with your next WordPress project or give you a different view on how I created mine.

You also need to take into consideration that I am a web designer with good knowledge on xHTML, CSS and a limited – but workable – knowledge of php so I would not have accepted taking someone else’s work and tweaking it. Between Smashing Magazine and the WordPress Forums I was able to build up my own WordPress theme from scratch.

What do you do when you start a new WordPress theme?

Do you use a framework, existing theme or create one from scratch?

10. Auto-Resize Images Using TimThumb And WordPress Shortcodes

Rollip – Easy Online Photo Effects

Adriaan — Mon, 28 Dec 2009 10:04:21 +0000

Rollip is a new site that allows you to create interesting filter effects with your images. What’s great about the site is that it is VERY EASY to use and they have kept it nice and simple. Rollip offers 40 image effect filters that can be applied to images that you upload to the site.

Just log in and start creating photographic effects to your images. I had a lot of fun playing with some of the effects on Rollip and did I mention how addictive it is.

You do however need an account with credits to be able to use these filters, but I am giving away 15 free pro accounts. See below for details.

Here are some examples of what you can do with Rollip:

The first image on the left is the original and the rest of the images are Rollip filters…

Get a Free Rollip Account

To celebrate this new site I am giving away 15 pro licences with 30 credits each, on a first come basis.

Click here to get your free pro account now before they are all gone.

All I ask in return is to comment on this post and spread the word of my blog

Get one of 15 free pro accounts now.

Website: www.rollip.com

20 Website Designs On Photography For Inspiration

Adriaan — Fri, 04 Dec 2009 09:31:27 +0000

Photography is one of the most beautiful ways to express art, as well as design, – in a way that life gets captured in a single moment that can tell us a story. When looking at photography we become more aware of our ability to think creatively, much the same way we use our imagination to fill the gaps when reading a book, as we all see something different in a photograph.

To celebrate my interest in web, design and photography I have made a selection of good web design on photography websites. These sites feature rich textures, good use of colour and some of them have interesting layouts.

Arnaud COMPAGNE | Freelance Photographer

Beautiful textured scene and graphics used very creatively.

THREE23(DOT)NET | The Online Portfolio of Caleb Lummer

Simplistic, Layered by use of transparency.

Annabel Williams | Contemporary Photography Training

Vibrant and alive with colour and imagery.

Wolrd In My Lens | Travel Stock Photography by Piotr Kulczycki

Full of movement and photography with layers of transparency and texture.

Richard Arran | Landscape Photography

Vitrual scene that looks like you are standing in a gallery.

Jan Sochor | Photo Essays

Real basic grid, but the use of the photography turns this basic structure into a composition of sorts.

Ravengraphy | Raven Photography

This site also has a grid template, but with dark textures and gradients.

Dreamscaper | Online Playground of C.S.Ling

Great use of dreamy colours of fantasy sets the tone for this blog.

tdimitrov.com

Built up scene with imagery from the top view.

Stud!o OMEN tHIRTEEN

Filled with a colourful tone with the background.

Lara Jade | Photography

Flash based website, minimilistic and powerful.

JOHN WRIGHT

Flash website that has full screen photography.

Marios Tziortzis’ | Photoblog

Alive with great use of texture and colour.

berdber Studio | Photography + Design

Flash site with an almost underground tone to it.

Jamie Maldonado | Photography

Clean Blog with vibrant shapes of movement that creates texture.

Squire Creative | Photography

Good layout with textures all over and interesting use of colour.

Siete de Febrero

Interesting website layout with painted textures throughout.

Maurice Krijtenberg | Design & Photography

Effective use of a single photograph makes this an interesting site.

life in mono | a photograpic journal by kalon edser

What looks like an old photo album placed on a wooden background, great use of texture and colours.

Robert Dann | Photography

Good design layout with the use of straight lines and textured backgrounds.

Web Design – a look at my Design Process

Adriaan — Wed, 02 Dec 2009 08:43:29 +0000

It’s always interesting to hear how designers go about creating their designs, especially when it comes to web design as there are so many variables to consider when choosing the right design and deciding on what it is that you want to communicate through the design of a website.

I thought I’d share my experience of how I go about designing a website. The important thing to remember is that this is not a set formula and things don’t necessarily always happen in this order – I don’t think there really is a set formula on design nor should be one as design is an adaptive free flowing intuitive process. With that being said here are the important factors that help me in design (post brainstorming session).

Find Inspiration

Inspiration helps me spark those creative juices flowing in my brain and just gives me sense of knowing that I am about to embark on an adventure of creation. Inspiration also motivates me to design something of high quality which I can be proud of at the end of the trip.

Where I find – or what I use to find inspiration isn’t an important factor as much as the inspiration process itself. I usually find inspiration looking at something visually beautiful ranging from other websites, css galleries, photography, architecture or CG art to name a few. That is pretty much the reason why I started this blog as a space to explore inspiration as well as sharing that inspiration with other like-minded individuals.

Look at Competition

Looking at the competition of the same topic of the site which I am about to design is not about copying what they are doing, but merely a method of getting another angle on what can be done or has been done. This gives me a visual comparison to use when making decisions on what works and what doesn’t.

Looking at the competition is also a good way of quickly getting a sense of what the target audience is like, which is a point on its own. (below)

Target Audience

This is a very important factor I consider when diving into a design process as it influences me on my creative journey to know who I am creating this design for…not the client, but for the client’s clients. I find it very useful to put myself in the shoes of the target audience by asking myself what I want to see or do if I was a site user. This in turn goes hand in hand with the user experience.

Define Content

The content of a website plays a BIG role in what the layout is going to look like at the end of the design process and I make a point of it to get to grips with what – and where – the content should be placed throughout the website. From a top level this includes copy, imagery and navigational items and definitely steers the way in which I will represent this content through my layout process.

Decide on a Layout

Once I have defined the content I can easily start working on layouts to be used in the design of the website.

This is usually a fun exercise for me as I like to scribble on paper different ways of how the website could be segmented. These drawings are by no means anything to look at from an artistic point of view, but rather a quick glance to see what could work and what just doesn’t.

I like using rough sketches like these to bounce off the client, colleague or friend to see if they are on the same page as I am.

A crucial part of the layout process is the navigation which sets the tone for the website’s user experience and interface. I usually like to keep two or three options open of where I am going to place the navigation and look at this more in depth when going in to the user experience and interface.

Consider UX and UI

The user interface can determine the user experience on a website and I cannot emphasise enough how important user experience is as mentioned in a previous post of mine, I boldly adapt a quote from Adaptive Path “the experience is the product” to my own version of “the experience is the design“, because when I design a website I am in a mindset that my design is the product during the design process.

Putting myself into the target audience guides me through the UX and UI as this is where these two topics matter most. This is the part where I look at how the user experiences the website – how can my design help the user in experiencing the website.

Image Sourcing

I like spending a few hours looking for the perfect images that will compliment my design as well as the experience and this is another great time to get the inspiration flowing again.

Create 3 Mockups

Once I have gone through all the above the real magic happens…I put on a big smile and start carving and molding the creativeness into shape using my right-hand (Photoshop), which I cannot live without. This is where the action is and this is where I am at my happiest – in the process of design creation.

Spell check, spell check, spell check

I cannot tell you how important this step is in my design process.

Input and Opinions

After I have completed 2 mockups, before going on to a third mockup I like to get opinions and input from others and learn what they think about my designs. The reason I like doing this before going in to a third mockup is that it can – consciously – influence my decision of design in the final mockup.

Remember – as a designer you have to be able to take criticism from others on your work, but you also have to stay open minded. Not everyone has the same taste; beauty is in the eye of the beholder, so look at what the people around you are saying from a distance and decide what advice is relevant to your design. I will not necessarily go change the way the design looks if someone doesn’t like the colour I am using, but if someone raises a point of usability, UX, or something relevant to that effect then by all means change is necessary.

Finalise Design

So by this time I would have gone to the client a number of times (maybe three or four) to see what their input and feeling is on my designs. Once the client has given me feedback on the mockups I can finalise the final design (LOL – how many of you designers out there have named your final design? final.psd…final2.psd…finalfinal.psd…hehe)

The reaction is usually “Yes I like this one, but I like what you’ve done in this one and can we add this block used in the third one” – so my journey continues through the last stretch of combining elements from the different mockups to unveil the final design.

Design

After finalising the design, going back and forward with the client, I tweak and tweak the design (with more of those finalfinal2.psd, finalfinal3.psd ) until the final…final…final end result is ready…and I cannot help to admire the design I had created.

As a designer, I’m sure a lot of you will agree, I cannot help to get emotionally attached to my designs. This is not a bad thing as I know that even if I am emotionally attached to my design, I can just as easily scrap it and start from scratch if needed.

So there you have it – a glimpse into my process of how I go about designing a website.

Do you have an interesting way or technique to share on how you design? Please share by commenting…

Announcement: RSS feed has upgraded

Adriaan — Tue, 01 Dec 2009 07:50:21 +0000

This is a special announcement to all those of you who have already subscribed to thedesigner’s RSS feed.

Firstly, a BIG thank you to all of you who are tuned in. Your support is greatly appreciated.

The RSS feed has been upgraded for more flexibility and choice using feedburner. Please be so kind to updated you RSS feed by subscribing to the new RSS feed at http://feeds.feedburner.com/thedesignercoza

Keep watching this channel as more exciting things are coming your way!

Thx!
thedesigner

HDRcreme, an amazing HDR Photo Gallery

Adriaan — Tue, 01 Dec 2009 06:31:24 +0000

HDRcreme is the first website that features user uploaded HDR photos, almost like those CSS galleries, where you can comment and rate these HDR photos. You can browse the gallery, or search by tags – you can even browse by camera type. There are some truly amazing photos to be found here.

HDRcreme even features tutorials on how to go about creating HDR photos, covering techniques, hardware and software.

HDR, High Dynamic Range imaging: “…is a set of techniques that allow a greater dynamic range of luminances between the lightest and darkest areas of an image…” taken from Wikipedia

I love HDR photography as it makes the images look like surreal illustrations with a fantasy feel about them.

Here are some 20 HDR photos featured on HDRcreme:

Concierto para Neptuno

Abandonned

new York

LUXOR

Luxuries of Modern Living

The Nightlife of Shanghai

Red House

Upright Bass Scroll

Bluebell Railway Steam Engine at Sheffield Park

Textur.es – Community Driven Textures

Adriaan — Mon, 30 Nov 2009 06:32:05 +0000

If you are looking for textures to use on your next project, head over to http://textur.es/ to download some good quality textures.

Textur.es was created by Caleb from Lost and Taken and is run by a community of – and for – designers, photographers and anyone interested in textures. You can also contribute to this large texture library by submitting your own textures. The textures are released under the Attribution 2.0 Generic CC licence, unless otherwise stated, which means you can use them in your projects.

The navigation and gallery is very easy to use as you can either browse through the library or search for what you are looking for. You can also switch the gallery to display as a list from the default grid layout for larger previewing of the textures.

Note: There is a bug on the site when I was using Firefox. Saving the image I had to specify or rename the extensions to jpg.

Here are a some of the textures I found on there:

Make sure to visit http://textur.es/ to start getting some great textures.

CSS Sprites, What are they and a working example

Adriaan — Wed, 25 Nov 2009 13:40:53 +0000

So what are CSS Sprites?

CSS Sprites is a technique used on websites where you add all your graphics into one single image file, almost in a grid format, where you can use these graphics through CSS by defining the graphic’s position and dimension with the background-position property. What’s great about using CSS Sprites is that you call the sprite image once and it’s loaded into cache, rather than having multiple HTTP requests to all your images.

CSS Sprites were inspired by sprites which were used in video game graphics where all the game’s graphics were placed into a single image grid file. The use of CSS Sprites became very popular for preloading images on buttons with their roll over states instead of preloading them with JavaScript. Petr Stanicek’s “Fast Rollovers Without Preload” and Dave Shea’s “CSS Sprites: Image Slicing’s Kiss of Death” were some of the first articles to inspire this evolution in the way we use images with CSS today.

How do you use CSS Sprites?

All you need to use this technique is a little bit of CSS and your image sprite. In the example my button’s dimension is 207px wide by 88px high and I have equally spaced my states horizontally in my sprite so every buttons state is positioned 207px away from each other so that their borders touch. You can space yours as you like, but this just works better for me as I then know where to set the background-position in my CSS.

This is what the CSS looks like:

a.CSS-Sprite {
 cursor: pointer;
 width: 207px;
 height: 88px;
 border: none;
 display: block;
 text-indent: -999999em;
 background: url(images/css_sprite.jpg) no-repeat;
 background-position: 0 0;
}

a.CSS-Sprite:hover {
 background-position: -207px 0;
}

a.CSS-Sprite:active {
 background-position: -414px 0;
}

In the CSS above look at the dimensions and background-position I am setting up to use for the different button states.

The image below shows the sprite in full and where the button gets shown:

The image below is the actual sprite:

DEMO Simple button states:
I have made a simple example to show how you can use CSS Sprites on the three different states of a button – normal, hover and active.

View CSS Sprite Example

You can download the example from above here:
Download CSS Sprite Button Example

So why should you use CSS Sprites?

It is lightweight in size, specifically when optimising your images as gifs
You automatically have all your images preloaded
You only need to update one file when making changes
Only one HTTP request gets sent to get your images

Be careful though when using CSS Sprites:

Background image on hover doesn’t work in Opera 6
When a user has background images turned off in their browser settings, the images will not appear.

The Giants that use CSS Sprites:

Google
YouTube
Yahoo
AOL
Facebook

30 Hauntingly Beautiful Architectural Photographs to leave you breathless

Adriaan — Tue, 24 Nov 2009 07:48:20 +0000

Photography and Architecture are both great ways of finding inspiration and what better way than combining the two. These photographers have captured my imagination with their hauntingly beautiful captures of these architectural surroundings.

Photography lets us look at something through someone else’s eyes, where you might pass something by without noticing it, you can’t help looking at these masterpieces when seen through the world of photographers.

It is clear to me that my favourite photographer, when it comes to architecture, has to be Sven Fennema who’s photo’s I have featured first. You can also go to his website gallery where you can find more of these magnificient photographs.

All these photos were taken off of http://1x.com and are subject to the owners copyright. You can click on the photographers linked name to go to their profile and gallery on http://1x.com

Sven Fennema

Melanie Liebig

shigehiro

maurizio blasetti

xavi cardell

Rosalinde Philippin-Lipscomb

ris

Thomas Marquez

Ria de Heij

dougi

Mandy Schoch

Claudia Leverentz

Andrew Thatcher

José Luis Mieza

Calle Höglund

robbin reumer

Jeannette Oerlemans

adam dobrovits

Mindcage

Malcolm X

Franco Farina

10 Illustrative Website Inspirations with a dark tone

Adriaan — Mon, 23 Nov 2009 08:12:33 +0000

Illustration is a skill that requires a lot of creativity and discipline. I’m always inspired when I see the art work that some illustrators come up with which gives us a glimpse into their minds. I especially appreciate illustration that almost has a dark tone – bizarre side – to it as it really shows what creativity can become.

What better way to enjoy seeing illustration when it’s used on websites. Here is a selection of 10 illustration designed websites, with a dark and bizarre tone, that inspires me.