Products are divided into categories and each category is displayed in two areas, the horizontal menu at the top and a vertical-collapsible menu to the right. Each category links to its own individual page, e.g. prods/audio for Audio products. When you click through to a category page the category bar remains to the left, with another “product filter” bar that appears below it.

On the category page for audio, here, there is a product comparison box and a paging component. Notice that the pages aren’t individual pages but javascripty/ajaxy items. Each product however has its own dedicated permalink. Isn’t it equally important to link to pages? Or is that not that important due to the nature of the data?

If you go to another website, Take 2 (my favourite online retailer for DVD’s and books), you will notice that if you click through to electronics (which is a category much like the Hi Fi Corporation example) you get to a page with sub categories to the left, which when clicked on (e.g. Mp3 Players) produces a paged result page. The difference from the Hi Fi Corporation example is that the pages are not ajaxy and you could probably access an individual page with a link – whereas the Hi Fi Corporation example you couldn’t. I’m not saying its a bad thing, just stating the difference. How would you design a product pager? Make it URL accessible? If you take a look at this Amazon.com page you will see that the paging is ajaxy. The Amazon.com page I just linked to is also bound by category, software architecture, as was the Take 2 and Hi Fi Corporation example. Would it be wrong to surmise that categories are permalinks and the products/items on them are page-able and that the individual pages are not permalinks? I can understand why a page within a category would not make sense as a permalink – simply because the data might change and move around. If 20 new books on software architecture were added today that would affect the pages. You could also argue that a page could give you the top 10 new items which might make sense in a MVC architecture where you could apply action filters.

What would the ideal product navigation design be? Well the ideal product navigation design would take the functional aspects into consideration and produce an effective solution.

Parts of the design I have been working on seems to have been using scrollable areas a lot and personally I see that as a fatal design flaw for two major reasons:

• You are forcing design onto the natural flow of information on a web page. Surely the design should work with the flow and nature of a website and not against it. Content is the most important asset on your website and should ideally have a natural flow to it. Personally if you are using too many scrollable areas, you should re-look your design.
• Not many websites use scrollable areas. Its ok to be different, not indifferent.

In case you are wondering what I mean by scrollable areas, it refers to applying the height property to an area and setting the overflow: auto. The effect is that you have a scrollable area. I cannot find many sites that use this technique actually.

Africhic was the winner of the Africa Fashion Awards Retailer of the Year 2010, a worthy honour as Africhic.com does far more for aspirant young African designers than flog their fashion on the Internet. Rather it gives South African fashion designers and increasingly, designers from the rest of the continent a platform to showcase their work, philosophy and passion for African design to a global market.
Quirk eMarketing and Africhic are offering students in the creative fields an opportunity to showcase their own take on African creativity by redesigning the look and feel of the Africhic website. Fashion legend, Robyn Cooke will be on the panel of judges. Robyn is a long time player in the local fashion scene and is respected as a stylist, as the editor of Styleguide Cape Town and as Fashion Editor for O Magazine.

Submissions close 30 September 2010 and the winner will be announced shortly thereafter and will see their artwork come to life on the new Africhic website, as well as R5000 in online credit for their shopping pleasure on Africhic.com.The winner will also be able to pursue a career in the digital creative arts, kick started by a coveted internship at Quirk eMarketing. 

Quirk has a passion for creativity in Africa and is promoting this competition with Africhic by offering the winner a Web design internship. The Quirk internship programme is a year’s paid apprenticeship under the watch of some of the best minds in marketing and technology in South Africa. Quirk is a leading digital agency with branches in London, Cape Town and Johannesburg, and Quirk’s interns have the unrivalled opportunity to glean the latest knowledge in the new media and digital fields, and to contribute their minds and talents to the development and implementation of exciting digital campaigns for clients such as DStv, Distell, Sun International and SA Tourism.

The Ethical Fashion Movement
Fashionistas of the world are currently spending in the region of US$1trilion every year on clothes, while ethical fashion is a growing trend with 27 percent of British consumers surveyed saying they are willing to pay a premium for fashion, footwear and accessories produced in a socially and environmentally sustainable way.

Clothing and textiles represent seven percent of the world’s exports, and in light of the current demand for sustainable sourcing, innovation in skills, recycling, and organic fabrics, all practices that African designers have been promoting for years, there is a bright opportunity for African fashion businesses to successfully compete in the international market for fashion.

“Quirk instantly took a liking to Africhic because of the evident pride the website takes in African innovation, a passion Quirk shares,” says Emma Carpenter, Creative Director at Quirk eMarketing.

“Africhic’s advocacy on behalf of local, aspirant talent and promotion of ethical fashion are values Quirk can stand by. The skin design competition we are supporting should work to further strengthen the image of South Africa as a source of creative talent, including digital talent, and to make people aware of the wealth of creativity Africa has to offer,” says Carpenter.

To Enter:
Submissions should reflect high fashion with a global appeal, while remaining true to the spirit of Africa, both urban and ethnic. The winning submission will add a new and fresh layer of meaning to outdated and over-used notions of African fashion and culture. Think Shack chic, modern versions of Africa and let the creative juices flow. The deliverables on this project are in the brief.

About Africhic:
Africhic.com is an online luxury fashion retailer for African designer fashion. It boasts a virtual catwalk on which local designers Suzaan Heyns, Undacova, Stiaan Louw, Lunar, Michelle Ludek, Kenyan designer, Lalesso and others showcase their talent, giving fashionistas all over the world the chance to buy unique designer fashion that is 100 percent African and 100 percent ethically sourced. Our vision and goal is to increase our stable of designers to 50 by the end 2010 and to advance the local industry and African fashion more generally through increased exposure and access to these products.

What the Quirk?
Quirk eMarketing is strategy-led full service digital agency with branches in London, Cape Town and Johannesburg. Quirk was born in March 1999 with the sole purpose of providing innovative digital services to the global business community. Known for being smart and creative, we have a passion for digital and are constantly updating our skills and services in the belief that enough is never enough. Using our unique knowledge and abilities, we apply the fusion of marketing and technology for the benefit of your business. Today, Quirk is an ever-growing agency with a loyal client base that includes brands like Capitec Bank, DStv, MWEB, Distell, Sun International, The Financial Times and Warner Bros.

• A top level
• A second level
• A third level

The navigation system will at all times make the user aware of where they are in the website, which can be achieved with a breadcrumb navigation system. Each navigation item will display its own associated content. Second level navigation items will have top level navigation item parents and third level navigation items will have second level navigation item parents. The navigation system will also act as a source for creating the site map structure. If a visitor clicks on any item in the top navigation area then content associated with that item will be displayed and the active top level navigation item will show its active. The second level navigation items that are displayed will be associated with the top level item. If a visitor clicks any of the second level navigation items the one that is clicked will become active and content associated with the second level navigation item will be displayed and the second level navigation item that is clicked will show that is active. If the second level navigation item has third level navigation items associated with it then those items will be displayed. If a visitor clicks on the third level navigation item then that item becomes active and content for it will be displayed and that third level item shows that it is active.

The next step is to create an object-oriented design from this structure. Using an object-oriented approach would allow for easy re-use throughout. So lets say we create a class called “section” and give it the following fields:

• ParentSectionField – This will indicate if there is a parent item
• SectionField – This will indicate what the current section is
• SectionHierarchy – This will indicate where in the navigation hierarchy the section item belongs.

The other issue that is a concern for me is content management, and understanding why it is important. Content management is important because it alleviates the need to mess with the code in your website. If your website has a decent content management system you will have a consistent look and feel throughout the website and you will be able to change that look and feel with a few clicks. WordPress is a perfect example of just that. WordPress allows you to easily change themes by uploading it to a directory and by changing it in your admin panel. WordPress is a clear example of design being a layer on top of the underlying function. Content management systems are ideally defined as a layer of functionality or business logic with another layer of presentation logic on top of that. Content management systems are also characterised by its development frameworks. Development frameworks can be seen as large collections of functionality assembled into one component. ASP.NET is an example of a framework technology, because it provides a whole host of features and functionality that you do not have to re-develop to make use of. The ASP.NET Roles and Membership functionality comes to mind, and is not too difficult to implement and administer without having to write much code. The advantage of this is that these features take advantage of the framework features across the whole website. The Roles and Membership feature in ASP.NET is an example of this, because you could easily manage more than one website’s user base from a central administrator control panel. You would not have to re-code the model for each website.

So are there other sites that use Silverlight? And if so, what is the quality thereof. I found a site called Nibbles Tutorials which is done entirely with Silverlight. They also have tutorials and samples that you can look at. I found a few more examples on this blog. This site uses Silverlight in a way that allows you to page through books, which is not that new. This site shows a jeep of some kind that you can rotate. Another site allows you to create a valentine’s day card. A museum also used Silverlight and the Deep Zoom effect. Vertigo are the guys who developed the Hardrock Cafe Memorabilia website. They have some Silverlight content as well including a slideshow presentation. Pyramid fashion also use Silverlight.

1. David Ives – Developer and Platform Strategy Group for Microsoft in South Africa – Microsoft
2. Brad Abrams – Group Program Manager for the UI Framework and Services Team – Microsoft
3. Michael Koester – Designer Marketing Manager for Middle East and Africa and Central and Eastern Europe – Microsoft
4. Julian Harris – Conchango
5. David Pugh-Jones – Microsoft

The event was split into two tracks, a developer track and a designer track, but it generally focussed on Silverlight, and more specifically on two software packages, Visual Studio 2008 and Expression Studio, and even more specifically it introduced XAML as a common way for these packages to share content between them. XAML, Extensible Application Markup Language is an XML-like language that defines graphic elements in a human readable form that can be used in vector-imaging programs as well as Visual Studio 2008. This gives designers the flexibility to design interfaces without having to worry about programmers not being able to replicate their designs in a programming environment. Julian Harris demonstrated that you can export files from Adobe Illustrator into XAML format and import that XAML into Visual Studio 2008. XAML is also used in the Expression Studio range of products which includes amongst other two interesting products:

• Expression Blend
• Expression Design

Expression Blend is, almost like Adobe’s Flash Studio, which is an IDE that allows you to create WPF (Windows Presentation Foundation) and Silverlight applications. WPF is a technology that allows developers (and designers) to create applications that give users a better user experience (UX). Contemporary windows applications generally use square (often mundane) windows, whereas WPF applications allow designers to implement creative graphics into the interface. Rounded corners and transparent backgrounds for instance are used, and because Expression Blend can read and understand XAML, none of a designer’s creative flair is lost. The developer no longer has any excuses to develop interfaces that do not exactly meet the designer’s design.

1. JavaScript
2. CSS and Images

What are the benefits of both or either method? ASP.NET Ajax provides a rounded corner control that is extremely easy to implement on an ASP.NET website. What if you do not use ASP.NET? Well then you can use Nifty Corners to add rounded corners to your website.

After searching Google for articles on rounded corners, I came across an article on 456 Berea Street that explains how to use Javascript and CSS to achieve the rounded corner effect. Strangely enough they don’t seem to use that effect immediately on their own website. How important is it to use rounded corners on a website?

CSS Balanced Columns
This is another technique worth knowing. Faux columns without using images? Now thats interesting. Balance your CSS Columns with JavaScript