Creative Cape Town communicates, supports and facilitates the development of the creative and knowledge economy in the Central City of Cape Town.

The WDC2014 Initiative is aimed at getting Cape Town voted as the “World Design Capital 2014″ as a recognition of the advances in use of design to enhance society. Seoul was voted the 2010 World Design Capital and Helsinki for 2012.

Also View some of the Case Studies posted on the official website to see how the vision outlined above is coming to life

• WDC2014 Case Studies

Visit the Following 2 Websites which are currently spear heading the initiative to find out more about the why and how of the project.

• www.creativecapetown.net
• www.capetown2014.co.za

Cape Town’s World Design Capital 2014 bid concept, “Live Design, Transform Life”, focuses strongly on socially responsive design. – www.capetown2014.co.za

Join the Facebook Page and become part of the effort to get Cape Town recognized on the World Design Stage

• www.facebook.com/pages/Cape-Town-for-World-design-Capital/348553012789

Grab your supporter’s badge and be part of the team

• Get the Badge

Now go out there and slap some design on The Mother City! And don’t forget to share!

Grab the Pencil & paper just to be sure

I didn’t want to end up diving in too soon with photoshop and ending up shooting myself in the foot by spending too much time on prepping a look and feel without a clear layout approval, so I quickly threw together a couple of sketches based on the elements the client requested.

First Draft Sketch

I made a quick pencil sketch with some important bits highlighted to outline my thinking on how I planned to approach the page layout followed by a phonecall to make sure I’m understanding what each element actually is and what it’s function/priority is. In cases like this one there’s no need to go the full digital wireframe and a well planned pencil sketch could very much suffice.

Finalised Wireframe Sketch

Using Pre-designed graphic elements to speed up the process

Based on the concept I knew I had to create a box for the competition they were running as their concept relied on the users guessing what’s inside the box. Soi a quick search on google for some freely available vector graphics gave me a few options to work with.

I also regularly collect web elements and graphic styles which provide photoshop layered documents when I need to throw together a quick UI in emergency situations like this one, so I tapped into that folder and threw together a few Photoshop layouts within an hour or 2.

No time to think, just whack it out now

I initially decided to just hunt down an existing free HTML template which had enough of the ingredients to bash into shape. I had to make some quick decisions about how we’d approach the design & build due to the limited timeframe, but also wanted to explore some newer un-chartered territory.

Draft 1 - Graph Paper bg

Draft 2 - Brownpaper bg

I’d been eyeing the CSS3 & HTML5 framework called Less which is now in version 3 of it’s development. With it one can quickly build HTML 5, cross browser web layouts which re-adjust themselves to the specific media or device resolution being used to view it. I also employed a few simple CSS3 techniques to give the design a little spice without needing to use too many complicated background graphics or image text. This included text-shadow, border radius and box shadows as well as background gradients.

Granted not all of these techniques are completely cross browser compatible, but at least with the text-shadow being the least supported feature, I could still have a decent enough looking design in lower end browsers without too many graphics needed.

The full width was really the main focus, so most of the design and styling considerations were applied to work better in this width.

Studentology Full Page Width

This is the main layout suitable for average computer screen resolutions

Once that was established, I had to use the maximum width for smaller more tablet like screens like the iPad for a slightly narrower layout. In this site, CSS media queries are used to switch the width and layout styles for certain elements so they realign and reorder themselves to fit into the new screen width. For example, most of the elements within the blue content area are 30% width and floating to arrange themselves next to each other, which will be switched to a different percentage for smaller screens.

Scripts, scripts and more scripts

To avoid needing additional pages I made use of a jquery fancybox script to allow the video and entry form to popup over the page. I also used Jquery solutions to save space with the competition steps, using a slider to show each step of the process, and for the twitter feed in the footer. JQUERY is your friend, as long as you don’t mix it with too many other Javascript libraries which leads to script conflicts.

iPad width

This is the main layout suitable for tablet screens like iPad

As you can see that some elements are now 50% of the full width of the layout while others are 100%, now changing the layout and order of the elements.

On another note, and even though CSS3 is completely capable of generating the effect I’ve used on the call to action buttons, I stuck to using graphics instead there as I didn’t want to run into too many degradation problems with the call to action items. At least for those elements it doesn’t matter what browser you’re using you’re pretty much going to get a nicely styled call to action without too many hours or device specific code.

Mobile Width

This layout configured to display for small screens like mobile phones

I ran into a few problems with older versions of Internet explorer as you would imagine, so ended up employing a javascript solution called If Oldie, which redirects the Internet Explorer viewer to a plain HTML version of the site which has a fixed width and makes use of XHTML instead of HTML5. I didn’t have enough time to troubleshoot the HTML5 shiv script which comes with the Less Framework and is meant to allow IE to recognize HTML5 tags, so that part didn’t work out as planned.

Even though due to time constraints I wasn’t able to craft everything to perfection I’ve learnt some really valuable lessons by tackling this project in the way that I did.

1. Use frameworks and existing tools instead of always building from scratch, it helps with rapid development.
2. Building device specific web pages is easy when you use the right tools.
3. When you run into problem, don’t waste too much time trouble shooting, change direction quickly.
4. Collect freely available web resources for emergencies, it’ll save your life when you need it most.
5. Use 1 Javascript library for all your needs to avoid script conflicts, JQUERY is your Friend!
6. 24 Hours is a ridiculous timeframe so never agree to design & code a page in that amount of time unless you’re gonna hack & smack.

This post basically outlines some of the decision making, tools and processes I employed to whack out a really quick but effective minisite which looks good, works across devices yet still employs some of the latest development tricks. It’s not perfect nor 100% bulletproof but it did the job in the time and budget available.

If I had a little extra time I think I could have implemented a much more HTML5 compliant solution which works across most browser using many of the fallback methods available at this well organised resource.

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?

Information Design to make your mouth Water

This is a masterpiece of information design

The Web Trend Map is a yearly publication by Information Architects Inc. (iA). It maps the 333 leading Web domains and the 111 most influential Internet people onto the Tokyo Metro map.

I can’t wait for this to be finalized so I can get hold of a printed copy for my office.

What the Map really means.

According to the creator’s of this map of juicy web goodness, countless hours of research was undertaken to assess to most effective, profitable and traffic generating websites and web gurus to put together a resource which is filled with the web’s most influential spaces and faces.

These web trends have been intelligently super-imposed over a map of the Tokyo Metro System, aligning those web venues which have similar characteristics to the actually Tokyo Metro spaces they virtually occupy. For example:

Google is placed in the busiest, most highly trafficked train station in the world: Shinjuku.

The width of an entities station represents it’s stability in the web space.

Trend Lines/Genres

Metro lines were established to group similar web entities. Upon investigation you’ll quickly realise what a mammoth task of information architecture this must have been. Further more, characteristics like the height of specific stations on the Virtual Map, represent the web entities success in terms of both traffic & revenue, which explains of course why Google towers above the rest. The use of various coloured lines and the position of certain stations at intersections of 1, 2 or 3 lines expresses which trend lines specific web entities actually cross or overlap.

Just a quick glance across the Trend Map reveals a wealth of information and insight into the current shape of the web sphere. I can see this map being presented in thousands of boardrooms and strategic sessions world-wide. It’s got that buzz appeal which the Orielly Web 2.0 Tag Cloud held at the beginning of the entrance of Web 2.0 into the mainstream. The many so called “social media gurus” out there are gonna eat this one up for breakfast lunch & supper.

This is very much still a work of art and feedback is being taken currently to make it as accurate, error free and apt as it can possibly be.

I’ve spent only a few minutes glancing at this web wonder and have already foreseen endless hours of my future dissappear in the journey this one is about to open for me. I’ll stop myself from using the cliche’s of beautiful, stunning, elegant to describe this one, even though these and more over used adjectives definitely apply in this case.

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’m still at wireframe stage but would appreciate some feedback from anyone out there with regards to the little mockup above and also how you think I should improve on my site based on the current design & layout.

So I need to know about:

Colour, Graphic Elements, Layout, Usability, Readability, Functionality and last but not least, Content, the area I think probably needs to most focus.

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.

I was tipped off by Vincent Maher and had a little discussion about what they’ve changed and why. It’s clear one of the main areas of focus was content as it should be in a news site. This news site seems to pack in loads more content and fits it all in comfortably.

Usability with a splash of Ajax

Being able to quickly access the type of content you’re looking for is important for a site of this size, and with a nice little ajax slide down you can click right through to just about any part of the site through a hidden menu.

Further down the page the sliding menu of top stories is quite effective though it could help being higher up on the page.

Tabs are used in the sidebar for the “Leader Platforms” and an even more interesting tabbed tag clouds section which allows you to browse popular tags by tag, people and places. It all makes for an adventurous journey through what’s happening in the world around us.

Personalisation is very much a part of it

The login panel is also revealed nice & smoothly through some quick & easy ajax, something I need to apply to a few areas of my own site when I have some time.

Signing up and logging in gives you access to some nifty features like printing multiple stories for research purposes, or following the history of a particular issue and checking out your last accessed story.

I’ve only spent about 20 odd minutes on the site, but can already see some heavy thought and research has gone into what features to add, how to add them and how to tie them all together.

Thinking about Semantics & reader history

I can’t wait for the newly planned feature of suggesting new content based on previous reader history. The site is making a serious move towards the new web in a very understated manner. No flashy frills but lots of power under the hood.

Aesthetics, Branding & User Interface

I initially felt the brand had been lost and that the design could do with a little neatening up, but it seems even this has been researched and considered. Many times designs that are too neat and orderly can become a little dead.

I do however feel that what has been established on Thought, Tech & the other “Leader” website’s has been lost a little on this one. I still feel there is a little room to tighten up the user interface, but it’s a work in motion and I’ve already made a few suggestions like increasing padding very slightly.

Extending in all directions

Something which the M&G online has focused heavily on is diversifying it’s offering. From one starting point the reader can venue off in so many directions depending on their interest and need at any given time. Beside’s the blogs and leader platforms, there are a wide range of offshoots which keeps interest going.

Looking for a job?

Not interested in reading?

Share your African story. Readers can share their own African experience and earn money as well in the African Voices Project.

All in all G&M online have created a space where diverse need are catered for in an intricately woven online space. I’d probably do a few things differently, but this has been a ,mammoth task and it’s always easier criticising from the sidelines.

So what do you think of the re-design?

Jacob of Just Creative Design wrote Why logo design does not cost $5.00 in which he mentions:

1. A logo is the very first impression people get of your company
2. A logo needs longevity
3. A logo needs to be original
4. A logo should look professional
5. A logo should reflect the time and thought gone in to designing it
6. A logo is the starting point of your whole corporate image

Many people don’t understand either the value a well designed logo can add to their Brand Image or the effort it takes to design a logo which will add that value.

Misconceptions part of the problem

It’s extremely frustrating dealing with clients who don’t appreciate the time, effort and consideration required to develop a logo which does justice to what they are trying to sell. Many people think the designer should go off on their own with a company name and re-appear with a brilliant perfectly suited design.

Briefing a designer is very much about setting constraints, boundaries for the creative process not to cross, which will make for a more targeted and relevant solution.

I have also found people do not want to engage with the design process and expect to see a final perfect design which solves all their problems with actually spending he time to convey to the designer what their business is all about.

My perspective on Logo Design

Logo design or any design for that matter has got nothing to do with guess work. It’s also got little to do with dreaming up great ideas out of nothing. It takes alot of thinking, researching, exploring, questioning and experience to bring together all the elements needed to realise a great looking and functioning logo.

So what do you think a Logo design Should Cost?

What have you paid or have you heard of others paying?

Post your comments below

Flow Interactive’s Phil Barrett spoke about ‘User Experience: What it is, Why you want it, and How to get it’

Design Research is something I’ve been doing a bit of reading on lately, an area I feel I need to drastically improve my skills in. Knowing how to design an experience which will be positive, user-friendly and memorable has to be done in collaboration with the end user.

People are exhausted

Starting off Phil reminded all of us of an essential truth which we find across the majority of media platforms, that being a huge shortage of attention. With the proliferation of different forms of media as well as the fact that technology has made it possible for just about anyone to publish content, we are increasingly finding we have less and less attention available for our little messages significant though they may be. Everyone is just exhausted.

The Attention Age

We are competing in an attention economy, where attention is a valuable commodity which individuals are even being paid for nowadays. Attention or rather, eyeballs are being purchased metaphorically speaking, making companies like Google as big as they are today.

It’s not only advertisers who are fighting for a piece of the attention pie. Anyone trying to convey any kind of message online is competing for that same attention. The traditional approach of shouting louder just does not have any sustainable effect.

Make them Love it

Phil went on to say that we should be investing in building it right the first time.

“Make is speak to the customer, Make it a pleasure to use and to make sure they find it …”

We need to be creating great experiences, whether it be the way the site looks or the words people read, from top to toe it needs to be scientifically constructed piece by piece.

Helping your visitor get to what they are looking for, or to get to where you want them to go quickly is important. Time is expensive, so the quicker you can get something done or get a message across the better.

Too little or too much?

In comparing a few real estate websites, Phil highlighted how too much choice as well as too little choice can be equally negative. The trick is to have enough options but not to overwhelm people, and to get them where they are going quickly. I hate it when I order take out of some kind and I have to answer 20 questions about the flavour, size, etc. Sometimes less is more, but then again, sometimes it can be too little. It’s a fine line.

Make it work first time

Building simple prototypes, even paper based ones are helpful. Getting feedback from a variety of user types can be the difference between a successful first launch or needing to go back to the drawing board.

The creation of personas in software and site testing can provide insights into how a user might make decisions when interacting with your site or application. Personas help when planning functional features and design and can save valuable time by spotting simple problems up front.

According to some facts presented by Phil Barret, a Forrest Survey revealed that improving usability overshoots all other tactics when it comes to profitability.

Many Huge Brands have built their success off the back of creating a superb user experience. Take Apple for example, most of what their products represent contain usability improvements over their competitors. the experience of listening to an iPod, using an iPhone or working on a macbook is what turns doubters into brand lovers in no time.

Test it when it counts – early on

One of the main messages coming out of the presentation was that the usability testing needs to happen at an early enough stage so it does not become too expensive. Many usability glitches discovered at the end stages of product development have cost companies huge amounts of money to fix. Investing in some testing and low cost prototyping early on saves future mishaps which ultimately have cost, time and Brand value implications.

The following article(by the UK Design Council) discusses user centred design in more detail and might prove useful in understanding some of the techniques employed.

The central premise of user-centred design is that the best-designed products and services result from understanding the needs of the people who will use them. User-centred designers engage actively with end-users to gather insights that drive design from the earliest stages of product and service development, right through the design process.