Take a quick look Design and I’ll explain a bit about what’s under the hood of this one.

Homepage of the fani.am fan accommodation site

I really enjoyed designing this one and also trying out a few CSS3 features like rounded corners & Text Shadows. IE6 users, there’s a special treat for you as well.

Custom Fields

The most hectic part of this site by far was the wordpress wrangling which takes place in the background. Using loads of WordPress custom fields, some for data and some for associating certain post types like matches, with accommodations and with the teams playing the matches, we were able to weave separate categories of posts into an intuitive mixture of information. Custom field have been managed entirely by the flutter plugin’s write panels, which helped make this site extremely easy for novice user to populate with content.

Fan i am Team Facts sidebar widget

Conditional Statements

Using WordPress conditional statements, as well as some conditional Custom field statements we were able to easily pull the correct set of posts for each team, venue or accommodation. The sidebar also gets populated with related widgets displaying content for each type of page you arrive on.

Associated Matches, accommodations & attractions

Dealing with images

I was a little disappointed about the current state of the built-in WordPress gallery system. You’re still not able to easily pull individual images based on their order in the gallery and can only really pull an entire gallery. The attached image plugin helped pull the first gallery image which was great. Flutter’s image management and upload functionality was ok but could do with the auto generation of thumbs & other sizes which the built in WordPress image uploading performs. Flutter’s image crop & resize functionality just doesn’t work at the moment, though the rest of it’s functionality, mainly write panels played a hige role in this website’s configuration.

This site relies heavily on plugins for various features, which is one of the great things about WordPress. I know some geeky developers who swear they never use plugins, and that’s fine with me, though I or one love the fact that so much freely available functionality is just lying around ready to take advantage of.

Plugins I’ve used & abused Include:

• Flutter – custom write panels
• Live Coundown Timer – counting down time to the Kickoff
• My Favourite Posts – allows user to add their favourite accommodations to a sidebar bucket
• Send to a Friend
• Tweet News – Footer feed of tweets about FIFA
• Google News – feed of news about the world cup from google
• Twitter Widget Pro – Worked better than Twitter Tools
• IE PNG fix – no need to fiddle with code
• Sidebar Login – check the login panel top right
• Cforms II – contact & booking forms
• DISQUS – Advanced commenting system
• WP Table Reloaded – Check the Match Schedule (quick & easy manageable tables)

So far it’s been a really great project and Phase 2 promises to include some even more exciting social media additions. What do you think of this one?

Having designed the Jayz Corporate Identity a while back, and then styling his previous site, it was a welcome experience taking it another step further with this latest re-brand. This re-design focused much more on personal branding, something which I think I need to pay a little more attention to myself, but which Jayz does really well.

So what do you think of the Jayz new look?

Look & Feel

I suppose explaining where I’m going with this desert scene might help for starters. The nomad concept has been with me for some time, though not in this form. As you may know, I’m no city slicker. I’m also very much set on remaining as independent as possible, something the Bedouin values extremely highly. I’m a traveler at heart. So this is partly where the desert scene comes in.

Saving Space with some Ajax/Design Patterns

Regarding the layout and general interface, there’s a few space saving design patterns I want to build into the homepage, which include using some jquery tabs, a slider and an accordion to fit everything into a smaller space. My current design is way too long and lacks a few features above the fold. I don’t want to loose anything but feel I need to tuck lots of excess away in a more logical manner.

Integrating Social

I definitely need to integrate my social links into the interface much higher up the page, as well as include a twitter feed, what would we do without twitter. I like the idea of a user generated feed or post wall but am uncertain how this might impact the space on the homepage.

Showing my Portfolio work

Something I have failed hopelessly at s keeping an up to date portfolio area. I don;t even have a latest work feature on my current site so this is a must have i think. Of course it needs to be coded in such a way that it’s easy to maintain as well me always being pressed for time.

Quick Contact & Chat widget

I’d also like to include a few quick ways of getting in touch, like a mini form as well as skype me & gtalk widgets which allow people to chat with me directly when I’m online, which is like all the time.

My Blog area will remain pretty much the same in terms of it’s location and general functionality, but of course in needs some space saving neatening up. I also need to get a featured post sorted. I’ve been toying with the idea of having 3 main areas of featured posts, and running titles of these in the header area somewhere but haven’t fully embraced this idea yet.

Menu with Subtext

I really love the idea of menu links with sub text explaining the links in more detail so these are almost definitley going to be part of my next menu. I also need to rework the way I display my pages, what stays, what goes and what needs to be added. Lots of information-architecture work lies ahead, and the dreaded writing!

Header Message

My header will have to have a brief explanation of where you are and who i am, some kind of elevator pitch style slogan. I’m considering having a few messages, one for first timers and a few others for returning visitors. I like the way yoast.com addresses the visitor based on where they have come from.

What do you think? Want to earn your own design/redesign?

I’m thinking of turning this into some kind of competition, asking for feedback and awarding the best advice a design of their own. What you you think? Would you be interested in participating in something like that?

www.strictlyhalaal.com

The first of them, a site which hasn’t launched yet but is pretty much completed is www.strictlyhalaal.com, which serves as a listing/directory site for “halaal” certified businesses.

Strictlyhalaal.com uses a few great free plugins:

• GD Star Rating allows for users to give each listing a rating.
• Collapsing Categories Plugin created that cool expandable category list on the homepage
• Ad Minister allows you to created widgetized ad spaces to add dynamic ads or content

Next up is Learningcurve.co.za

Learning Curve is a dedicated education technology supplier, representing premium brands such as Adobe, Apple, Dell, Autodesk and Toonboom. This was the first time I have setup an e-commerce website using WordPress and proved to be quite a challenge to begin with but also turned out to be a really valuable learning experience, no pun intended.

To power the e-commerce side fo things I used the wp-ecommerce plugin, which is a really powerful yet free plugin system allowing you to turn your WordPress site into an online store in a few clicks. Customizing the online store’s appearance was a bit of a mission for starters but it’s worth learning the ins & outs of this plugin, developed by the boys at www.instinct.co.nz.

I can’t unfortunately divulge the sales figures for the first 2 months, but lets just say I was more than pleasantly surprised. It’s great to see your work directly benefiting your client’s bottom line, especially immediately after it’s implementation.

Last but not least is Duomarketing.co.za

This is the first time I make use of a Woo Theme to develop a client site. I’m very impressed with what the guys at WooThemes are up to, and even more so when I took a little lookie under the hood of one of their themes. The theme options part is really well done, some of the code still boggles my mind a bit, but it allows the user to easily switch stylesheets for a change of colour and style.

The widgetized areas on the homepage works out quite well also allowing you to add pages into certain block of the homepage layout. The cost of the premium theme definitely adds value to the mix as it allows the client to aquire some really great features for a fraction of the cost of cutom development.

I whipped up a this quick design and zipped it through to him a little later. Since then Nathan has been quietly busy getting his ducks in a row with what has now launched as www.elevatethemes.com, a freemium theme project.

The design I sent Nathan has formed the basis for what was released as the first elevate theme called Skye News. Nathan has significantly simplified the design, but has packed some really great features into the coding of this new release which can be demo’ed here.

I think what I’m going to attempt is to download this baby and try to style it to look a little closer to my original design which I will then send to Nathan to add to elevate themes as a Skye News alternative.

Go check out elevate themes yourself and if you’re a bit of a theme design why not chip and and send some designs of your own or offer to code up someone else’s design?

Check out www.elevatethemes.com and gime a shout if you like the theme and need some theme customization.