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.

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

Praxia Positions itself in the following manner.

“Our mission is to help our clients realise the full potential of their network, communications and computer hardware and software.”

Saeed of Praxia Technologies approached me, firstly to refresh his web presence and put something up there he could manage himself. This has become pretty much a standard request for web design projects as no-one wants to have to call up an html coder each time they want to update a page on their site.

As usual I recommended WordPress, due to it’s quick and simple framework and user friendliness, especially for Praxia’s simple CMS(Content Management System) needs. I found a template which suited their requirements and went about giving it a complete facelift. Praxia’s logo also needed a change and I was happy to oblige as logo design is one of my favourite areas of focus.

First Things first – Establish a new Brand

We started off with the logo design so we could base the site’s look & feel on the Brand and create a nice consistent looking online presence.

After exploring various directions as I usually do with logo design projects the client was split between 2 logo options and we had some back & forth discussion on the pros and cons of each direction.

We settled on the more practical option, the other being the 3 dimensional X element. The focus on the X stems from their original logo and was maintained to keep some kind of consistency going in the re-brand.

Next comes the site in WordPress

We decided to re-use the 3D X element with each component of the X representing a specific business unit as the client still liked the element and wanted to maintain it somehow.

Because Praxia is an IT Tech company focusing every element of a clients IT Tech needs they wanted to go with something which links well with the technology they use. A few stages of design drafts and the client was pretty happy with the look though felt something was missing, and with the inclusion of the brushed metal background we’d settled on a design which the client was very excited about.

To see the final coded result visit www.praxia.co.za. Let me know what you think.

What do the rest of you think of the logo?

Grab the badge below or paste the code into your sidebar to let others know you’ll be there and to encourage more to join us!

<a href=”http://wpcapetown.wordpress.com” title=”Wordpress Cape Town Meetup March 26 2008″><img src=”http://www.nomad-one.com/blog/wp-content/uploads/2008/03/wpmeetup-button.gif” alt=”Wordpress Meetup Cape Town March 26 2008″ border=”0″ /></a>

So where do I start with this re-design?

I went right back to the beginning and asked myself a few important questions which would get me moving in the right direction before getting too bogged down with design.

What is the most important aspect of my site?

• Portfolio
• Services
• Call to action
• Social Network Links

What do I need to do different Graphically? How do I set myself apart, keeping with my own personality & style?

• Colour & Texture
• Graphically Rich
• Typographic treatment

How can I structure my site’s content more efficiently?

• Tabbed Content
• Highlighting Key site content in a hierarchical fashion
• Creating Focal Points
• More clear Divisions between content boxes
• Creating Layers of interest

Put together a list (using freemind to create a mindmap) covering everything currently on my site, and then adding those things I think are missing.

Following the list are a few sketches taking into account my elements and their hierarchical importance. The sketches below are very rough and only serve as a base from which to start. I was never going to solve the layout of my site through sketches alone and think this could be a bit restrictive intended to serve as …

Sketching it up

Wireframes

Wire framing on screen was the next step. It just makes sense establishing some of the layout before getting too caught up with graphics early on. Even if you do decide to change things later, you would have saved yourself at least a few hours of graphically changing the layout in your design programme.

Once I was happy enough with the general structure of my page I could now start playing with the colours and textures I wanted to work into the interface.

Getting Graphic

  Now comes the fun part, and this is the part I love the most. To me this is more play than work in the beginning stages and I let myself go quite a bit here.

I start giving certain areas focus with colour and using some graphic elements.

In the early graphic stages I held onto a few older design elements from previous site designs but soon had to force myself to let go of these. Designing for yourself is the ultimate test of restraint and focus. I find I struggle to make even the smallest of decisions when designing anything for myself and I’m sure other designers out there can identify with me.

Going off on a graphical tangent

I realised early on in the Graphic development that colour was going to be a hard thing for me to deal with so I forced myself into throwing some colours around wildly.

 Once you get into the design phase things can start getting complicated if you don’t restrain yourself, and being a bit of an illustrator I tend to like exploring visually rich interfaces. This can be a good thing and a bad thing and sometimes pulling in the reigns is necessary to keep things clean and uncluttered.

While I still want to keep things as visually rich as possible I know I need to give certain elements and page areas more focus than others. Currently I’m fine tuning this mock-up and planning for a few styles in the content.

Typography

Being a fan of sans-serif fonts I’ve decided to challenge myself in that regard and see how I can make use of a nice serif in the headlines and key areas. So far I like what I’m seeing, but have a few more elements I’ve been neglecting and am not done with the simplification process. I prefer to simplify from a more detailed design than the other way around so I throw alot into my designs and whittle away at it until I feel I have the right mixture.

Getting it back on track

Once I had reached a comfortable enough point with respect to the graphics of the page I decided to do an assessment of how I had implemented my requirements and what needed to be changed.

Due to projects on the go and planning of other business areas this site will probably take a few more weeks before go live.

I’d like to know what you all think of my design and what criticism or feedback you might have.

I’ve highlighted a few areas I now need to work on tweaking which I will spend about a week on in between my mammoth task list so bear with me.

Some areas which I thought needed work were:

• Portfolio - Needs better highlighting and needs to display slide-shows or randomly generated screen.
• Services Highlight Box – I need to put a call to action or a little intro to my services somewhere above the fold with a similar priority to my portfolio.
• Hire me call to action – Maybe in combination with my services call to action something which says hire me.
• clear description of what this site is – not sure if the first time visitor will understand at a glance what this site is about.
• Typography - typography needs to be cleaner, better spaced and more organized in certain areas. I need to minimize font sizes and colours and keep font differences meaningful.
• Colour Balances – Still working on cutting down the amount of bright colours so key areas have more focus. Need to get the focal hierarchy just right.
• White Space – breathing room is a problem at the moment. elements need their own space to live and be clearly legible while not being interfered with.
• Alignment – certain elements need to be pulled back into the loose grid and others which break out of the grid need to maintain the balance.
• Usage of icons - I need to decide whether I will use icons or not, and if so which areas deserve icons.
• Textures need to be minimized and graphical elements simplified as far as possible.
• Style layer needs polishing – finally the edges and finer details need pixel polishing and this will be the last task.

Where I’m currently at:

One place online which I’ve recently been testing out for fun is the Sitepoint Design Contests. I was browsing the many contests and thought I’d give it a bash, just to see what I could do in a few minutes, and also to test the responses I might get. I have to say, most of the logo designs submitted in these contest are really shocking. Many times it seems the people who are requesting the designs are not very design literate either, which would probably explain their need or choice to use a solution like this. There are however quite a few really great designers spending their time crafting to top notch stuff on these design contests. This means not everyone is against this type of design work and someone has to be making some money off this type of service. You’ll have a laugh at some of the weird and wacky designs people try to get through these contest. I recommend visiting the Sitepoint Design Contests just for the fun of it, some crazy companies on there as well.

It was quite a fun exercise, working with limited briefs, not putting in too much time, no feedback, mostly working on these in the wee hours to get some creative juices flowing. Below are a few samples of some of the logo designs I developed which I thought I’d share with you. I’m holding thumbs that one of them might be chosen so I can boost my income a little. Let me know what you think.

ERGOWRITE – healthy stationery

Edmonton – Social Planning Council

WTHRU – where the heck are you (people finding software)

Domaining.org – domain registration service

I recently completed a little website design project for Arabella Hotels & Resorts. This mini-site is more of an entrance into their main websites for each specific resort and needed to give a brief showcase of each resorts. The best way to showcase places like resorts and spa’s online are pictures which reflect the atmosphere, spaces, relaxation so that would-be visitors can transport themselves into the space and take themselves on a little mental journey. People want to know where they’re going to be spending that valuable relaxation time and need to be transported in the atmosphere they’re looking for. This is true as well for advertising properties for sale whether it’s residential or commercial. Seeing something and getting a real sense of the space and the surroundings makes a world of a difference.

I coded this site using XHTML & CSS with as many web standards as possible but due to time constraints and scope changes I must admit there’s a few tables being used in the html. The nice thing about this page is that even though all images are in flash, all text loads very quickly and the SEO friendliness of the textual content is quit good, with a nice semantically correct hierarchy of content, ie. menus are lists and headers in their H1 & 2 tags. I did advise the client against placing all the venue visuals in flash as the initial loading prevents visitors seeing the venues as quickly as possible.

I quite enjoyed this little project as it gave me some time to craft some nice little interface goodness which I haven’t done for a while. The elegance and luxury of the venues comes through with the soft shiny gradient. I did find the curly font a little difficult to work with in this case as it makes the main headline a little illegible.

All in all though I’m happy and learnt a few little CSS tricks along the way. This project was developed through a new media agency in Cape Town(not telling who) but all the work was done by yours truly.

What do you think of this Design?