1. Pagani Huayra

The Pagani Huayra. Photo by Pagani.

It’s been in the making for quite some time (first concept was drawn by Pagani in 2003) but I have no doubt that the Pagani Huayra is going to be as timeless and successful as the Zonda was. It’s a clear example of where form follows function but it’s still perfectly proportioned and with the added drama of the active aerodynamics it’s just spectacular. As usual Pagani and his designers and craftsmen have a way of working with materials that not only highlights them but also shows the respect for them and even makes carbon-titanium seem like a natural material made for crafting by artisans (which I guess it is in a way). It’s a clear highlight of car design situated above and beyond all of the other supercars out there and I can’t wait to see one on the street.

2. Hautlence HL 2.0

The Hautlence HL2.2 in red gold. Photo by Hautlence.

The first prototypes of the Hautlence HL 2.0 was shown back in 2010 and glimpses of the movement even earlier than that but now the actual watch is finally released and it’s all we hoped for and more. The revolving mobile bridge is a new way of neutralizing the impact of gravity on the balance that’s just as beautiful and functional as the tourbillon. Chain-driven jumping hours and retro-grade minutes makes it easy to read the time and the overall aesthetics keeps pushing the visual language of Hautlence. It’s classy, innovative, bold and spectacular at the same time.

3. De Bethune DB28

De Bethune DB28 in titanium. Photo by De Bethune.

I’ve written about the DB28 before, it’s an absolute stunner of a watch that is so true to the original concept of a wristwatch that’s possible but still out of this world. The De Bethune DB28 has a movement at the bottom, a dial on top of the movement, hands showing the time on a circular track and it’s all enclosed in a cylindrical case. But still, it’s nothing like any other watch out there. The play with different textures, the revealing of the balance and the architecture of the movement is pure mechanical art, not to mention the three-dimensional moon-phase indicator.

4. Aston Martin V12 Zagato

The Aston Martin V12 Zagato on the Nürburgring. Photo by Aston Martin.

The Aston Martin V12 Zagato is a borderline case here, not because it isn’t beautiful or can perform but because it hasn’t exactly been shown in production form yet although the order books have been opened. Disregarding that it’s a perfect example of how the development of a sport car should be done, after initial design and adjustment of the V12 Vantage base car two prototypes were created. Both competed in one of the most grueling endurance races in the world (the Nürburgring 24 Hours, where they finished 5th and 6th in the SP8 class) but not before one of them had won the prototype class at the Villa d’Este Concorso d’Eleganza. Just like the Ford GT the V12 Zagato takes just enough inspiration from the past to create a new instant classic with suitable hardware to back up the looks.

5. Urwerk UR-110 Torpedo

The Urwerk UR-110 Torpedo. Photo by Urwerk.

The Urwerk UR-110 Torpedo is another evolution of the indicator system first seen on the Opus V that Felix Baumgartner created for Harry Winston in 2005 and then Urwerks UR-201 from 2007. While I don’t quite understand the numbering scheme the watch itself is not only practical and easy to read; only a small part of it has to protrude beneath the shirt to see both the hours and minutes in a very intuitive way. It’s also instantly recognizable as an Urwerk while at the same time different from all of their other timepieces. The combination of concept, function, usability and aesthetics is perfectly executed and pushing the envelope for all watches.

Just Outside the Top Five

The Voutilainen Vingt-8 is a beautiful example of a classic, proportional watch from a true artisan, I can’t really see any problems with it besides that it’s just not exciting enough to be placed higher in my list of the year. Max Büsser and Friends also released their first watch in the Legacy Machines-series. Every new piece from MB & F is something to look forward to and a whole new line of watches even more. With the LM1 they’ve accomplished the mission of creating a classic watch with the same level of three-dimensionalism of their other machines. I don’t believe that style should ever interfere with function or usability and I see quite a problem with the large balance wheel covering a big part of the dials. I would’ve liked it below the dials in a big cutout instead, it’s a bit too distracting and “hey, come look at me!” as it is now.

Every new Lamborghini is an event and a new generation of the 12 cylinder flagship is bound to be something specatular. However, the LP700-4 Aventador doesn’t quite sign well with me. There’s nothing wrong in taking inspiration from different sources when designing something but once the line from being inspired to creating a themed piece is crossed it’s not cool anymore. The Aventador is just a bit too much stealth fighter jet and not enough car. The interior in particular seems more like a film set than a place to drive, and that’s not a compliment when you’re the one who’s supposed to lead and other will take inspiration from.

Confederate also presented their most affordable motorcycle to date, the X132 Hellcat. While it’s cool and not quite like anything else out there I think it’s actually a bit too industrial in design and see the B120 Wraith as their highlight. Another bike that didn’t make the list  (because it’s a one-off custom) is the Olivi Motori Triumph “Weslake”. Just the right blend of old-school café racer-looks captured in a contemporary sportsbike with a really nice stance.

https://github.com/AndersZ/Lumebox

De Bethune DB28 in titanium. Photo by De Bethune.

The DB28 is a manual wound watch with 6 days of power reserve (through twin self-regulating barrels and indicated on the back) consisting of 276 parts displaying the time and moonphase, what’s special about the movement is the architecture and design of it that’s based in classic horology but really brings the game forward with some useful innovations. It’s decorated using a number of techniques to the highest of standards and features a unique moonphase which consists of a platinum and blued-steel sphere that revolves around its own axis. The moonphase is accurate to within one day every 122 years.

The watch has no dial in the traditional sense; it’s just a big opening showing the movement and the beating heart in the form of the balance. The balance wheel is a silicon disc with an outer ring of platinum; the silicon is extremely light which centers the weight around the perimeter for a better inertia to mass ratio. The lightness and hardness of the silicon also means that mechanical friction is reduced which improves the performance and eliminates the need for lubrication.

The contrast between the different finishes and the triangular, symmetric details in the dial opening is spectacular and I certainly appreciate how it looks high-tech and timeless at the same time due to the finishing and classic proportions. I’m not entirely convinced by the free-floating lugs, I think that they are a little disconnected to the overall design and makes it look a little awkward on small wrists (although they make it wearable for more people).

The most important part of the timepiece is that it’s still a classic watch but takes the architecture, materials, technology and finishing into the 21st century without resorting to gimmicks or “just because it’s possible”. Everything has a purpose and is there to improve the traditional way of doing it while still keeping to the roots, and that’s an important concept regarding mechanical watches in my opinion.

The DB28 is 42.6mm in diameter and costs around €80,000.

De Bethune DB28 close up. Photo by De Bethune.

With that said, head over to The Guide and read about my definition of Clean Web Development and let me know if I’ve messed up something.

[...] Separately, web standards, accessibility, on-page SEO and a mobile responsive web are important but together they are extremely powerful. What’s even better is that they’re part of the same positive spiral, by making one part better the other will benefit as well. The foundation for all of these disciplines is clean HTML, proper use of DOM elements and clearly structured content.[...]

In short, no. It’s still a mess from a design and user experience perspective, the front page weighs in at 2600kB and 183 requests, it has blocky fonts and while it works with JavaScript turned off it’s really a pain with NoScript and similar plugins since the requests are spread out over a number of external domains and there’s no way of knowing which is used for what. The way I see it it’s most of all a missed opportunity, with a full revamp and a move to a new platform they could have created a modern responsive website that really brings the game forward and pushes the envelope for news websites. Instead it’s just another newspaper website with a complete lack of vision and understanding of how the web works.

DN.se's first page on 2011-10-25

Design

The overall objective was to make the web edition more similar to the paper version of the newspaper and bring in more dynamic and adaptable content so that the first page is almost completely new from day to day. They first had thoughts about reducing the top navigation but after watching users in action which used it heavily they decided to let it remain largely intact. I see two main problems with this line of thinking, the web isn’t print and watching users makes you locked to existing solutions instead of being free to try completely new concepts.

Making a website that has a completely static and fixed layout, cluttered design and is anti-mobile (see below for more technical info) in 2011 is close to being a crime, the right way would have been to make something flexible, responsive and mobile first and try to reinvent newspapers on the web instead of walking further from the possibilities of the medium.

Just as before they let the  advertisements take the priority over the content which makes me wonder who the site is targeting since they just doesn’t seem to want to provide a good user experience.

The jagged and choppy edges of the headlines in Chrome on Windows 7.

The final nail in the design coffin is the use of web fonts, I’m sure someone thought it was a good idea to leverage modern web font technology to make the headings pop but someone needs to have a look on other platforms than Apple when implementing the solution. The letters just look horrible and choppy on my Windows 7 machine in both Chrome, IE9 and Firefox (although Firefox tries to smooth them) and I don’t think they resonate at all with the rest of the typography and design.

Page size and requests

As I said in the intro the front page weighs in at over 2600kB, 182 requests, 2751 DOM elements, 89 inline scripts and an overall YSlow score of 61, the Google developer tools has the stats at 334 requests, 3.59MB transferred and 5.68s of loading time on a desktop computer with a 100mbit fiber connection. Anyway we see it that means that the page is incredible heavy, slow, archaic and unsuitable for mobile use.

When visiting the site with a mobile device they push for a mobile app at the top of the screen but other than that no apparent optimizations are made which means that they not only choose not to see mobile devices as a part of the web but also not the web as a complement to their mobile apps. With the amount of quality content that DN daily creates they really have the opportunity to push the envelope and rise above all other newspapers (sort of like what Financial Times did with their web app). In order to do that they have to go back to the drawing board, think about what the web really means and how it works and then start from that, not look back at the paper edition and use that as a starting point.

So, while Microformats was first and are being backed by Google a much broader initiative was launched duing the summer of 2011 where not only Google but also Bing and Yahoo together developed a new format for microdata. It’s called Schema.org and serves as a universal HTML5 based solution to the same set of problems that’s being adressed with Microformats. So, which is best and should be used?

Microformats are defined by a hierarchy made from the class attribute of HTML-elements, it’s a beatiful solution using already existing markup which makes it elegant from a web developers perspective. The upside is that the HTML-code isn’t polluted and is kept clean, the downside is that it mixes content and data with styling. A simple recipe in the hRecipe microformat looks like this

<article>
    <h1 class="fn">Beef with Carrots and Onions</h1>
    <p class="summary">Carrots and onions goes really well together with grilled beef.</p>
    <ul>
        <li class="ingredient"><span class="value">250 g</span> <span class="type">beef</span></li>
        <li class="ingredient"><span class="value">One</span> <span span class="type">carrot</span></li>
        <li class="ingredient"><span class="value">One</span> <span span class="type">onion</span></li>
    </ul>
    <p class="instructions">Trim the onion and carrot, chop them finely and fry in a pan. Grill the beef for 2 minuted per side in a really hot cast iron skillet.</p>
</article>

Using HTML5 microdata and a schema.org Recipe instead we add itemscop to create an item and itemprop to define the property

<article itemscope itemtype="http://schema.org/Recipe">
     <h1 itemprop="name">Beef with Carrots and Onions</h1>
     <p itemprop="description">Carrots and onions goes really well together with grilled beef.</p>
     <ul>
          <li itemprop="ingredients">250 g beef</li>
          <li itemprop="ingredients">One carrot</li>
          <li itemprop="ingredients">One onion</li>
     </ul>
     <p itemprop="recipeInstructions">Trim the onion and carrot, chop them finely and fry in a pan. Grill the beef for 2 minuted per side in a really hot cast iron skillet.</p>
</article>

The code is actually much less verbose and easier to read even if the objective is to mix machine-readable labels to normal semantic HTML.

Microdata separates styling from content and is therefore the winner in my opinion. It doesn’t pollute the code as much as I first thought and since it has all the big search engines as backers it’s somewhat future proof as well, although there’s really no such thing with emerging web standards.

Hedonist by Art of Kinetik. Photo by Art of Kinetik.

With yachts the designers have a very special attribute that perhaps no other form of mechanical art has, and that is sheer scale. An item of this size is not bound to just have architectural lines, it can truly have an architectural impact. Wally is one example of a manufacturer that makes yachts like this but one builder that have flown under my radar until just recently is Art of Kinetik, based in Belgrad, Serbia who have been operational since 2007. Their quest is to create the ultimate balance of art and performance and by the looks of their vessels they are quite a good way towards achieving that goal.

They have one model which is of particular interest to me, not only because of the name (it’s called the Hedonist), but most of all because it’s such a beautiful example of how good things can turn out when there’s a clear philosophy behind the concept, the design interprets the concept in a new and timeless way and the execution is flawless.

The Hedonist is a 63 feet open cruiser which combines timeless materials (wood, leather, steel and stone) to modern technology and bold, contemporary design to create a luxury home on water. It has adequate performance for cruising (by the way of three 800bhp MAN engines and Rolls-Royce waterjets) in the same way that an AMG Mercedes has adequate performance for the Autobahn.

I find the design has just the right proportions to feel muscular, powerful and most of all clear to the purpose. There’s no race-inspired features or gimmicks, the stance and lines says it all while at the same time the materials and spaces welcomes you to a home.

Most of all I love the use of the materials and the wooden hull, in this case it’s not only a nod to traditional boat-building skills and techniques but also made relevant since the mass and damping reduces vibrations in the yacht compared to modern composite and metallic materials.

Like all big, cutom yachts I’m sure it’s very expensive. However, the exact price is not important since the ones who are in the market for vechicles like this can afford them and others need not apply, I’m just happy that they push the envelope. The only thing that they might reconsider is their naming schemes, Art of Kinetik, The Hedonist and The Mazokist is just a bit too much all at the same time.

• Focus on purpose and content
• Clear and logic page and content structure
• Linkable pages using pretty and unique URL’s
• User experience adapted to the users screen resolution and browser capabilities
• Clean, semantic and SEO-optimized HTML
• Separated logic and styling (CSS and JavaScript)
• Optimized page loading times through minimized file-sizes, compression and the number of http-requests

And then let’s find the defining characteristics of a good mobile web solution

• Focus on purpose and content
• Clear and logic page and content structure
• Linkable pages using pretty and unique URL’s
• User experience adapted to the users screen resolution and browser capabilities
• Clean, semantic and SEO-optimized HTML
• Separated logic and styling (CSS and JavaScript)
• Optimized page loading times through minimized file-sizes, compression and the number of http-requests

The characteristics are identical, I’ve marked two that really provides the base for a mobile web solution. The only difference between “desktop” web and mobile web is in the implementation and that’s no different from making a website compatible with Internet Explorer on netbooks versus Safari on the 27″ iMac. It’s still just about creating a good user experience across all supported platforms and using the possibilities of the target platform.

A developer who wants to create a mobile web site by adding stuff hasn’t grasped the most basic concepts of web, that it’s always about adjusting and adapting and not about adding stuff. The most obvious exampel right now is jQuery Mobile, it’s a fantastic framework for creating an app-like UI-experience but it still needs a solid web-based foundation to stand on. Mobile web is just web, anyone who says different just doesn’t have their basic web development skills figured out.

One of the defining differences between apps and websites is that an app works in a single screen with fixed control and information areas and scrolling content areas. A website is a scrolling document made up of distinct pages so unless we want to create a iPad optimized web app instead of a website we should stay away from fixing the header, navigation and similar elements to the screen and dynamically loading new content and instead focus on creating a snappy scrolling page-based website that uses the available screen space in an efficient way.

Text and Control Element Size

Event though the pixel density on the iPad is much higher than a normal computer screen which provides greater clarity for text it doesn’t compensate the size reduction on a website compressed to fit the 9.7″ screen. For a website designed for a maximum width of 980 pixels the difference is around 29% (132 pixels per inch for the iPad versus 94 for a 24″ 1920×1200 monitor) which equals going from ten to seven pixel characters, and that’s just too small to read comfortably. A good baseline for the text size is 12-13 pixels.

In iOS the smallest icons and bars containing buttons are 29×29 pixels, most are larger than that, and that’s for a reason. Our fingers have a certain imprint when tapping the screen and a user has to be able to easily target the desired element. Of equal importance to the area is the separation between buttons, links and similar. Large adjacent buttons might get by without any spacing at all but smaller elements need a certain margin to avoid missclicks and spillover.

Don’t Clutter the Screen

Since the screen of most tablets are small, often less than 10″ in diameter, and the pixel density is high it’s easy to be tempted to cram too much information, links and controls onto the screen to give direct access to everything to the visitor. This might seem like a good way of using the available resources in an efficient way. In reality it just makes everything confusing and hard to find.

The problem is the same as trying to get too many things stand out on a page, the result is that none will. The easiest way is just to keep everything large and clear, use sufficient whitespace to separate areas and streamline navigation and other secondary content. Think about the purpose for the particular page and focus on that, let everything else come second even if it limits the available options for continuing to other sections on the site for the visitor.

Fill the Content Area with Content

The iPads form factor is actually a bit awkward for text, it’s too wide both in landscape and in portrait mode which means that text lines spanning the entire width gets too long when using a normal body copy font size. The obvious solution is to limit the width of the main content area by using thick margins, which Apple does in the iBooks application for example, but that does leave some unused screen real estate. It might be tempting to use this vertical space for a side- or navigation bar but this space is usually too narrow and will make the page look cramped instead.

Since the content is usually the primary goal for a visitor to a page it should be prominent and high in the document, few things are more irritating than having to start the interaction by scrolling to see a sizeable portion of the content to evaluate if it’s interesting enough to invest in reading. This means that the top header and navigation should be minimized in height and other navigational elements and sidebars should be placed below the content. This shifts the focus to providing value for the visitor (the content) first and then provide options for finding other content on the site.

Adapt to the Screen Orientation

It’s very easy to flip a tablet, and by flipping it a totally new page layout is created. The theory is still the same though; focus on the content but now we have additional horizontal screen real estate to include sidebars and navigation. That’s the positive part, the negative is that vertical screen real estate is even more precious. Find the new possibilities as well as limitations and adapt.

So, when a new web project in initiated the first step is always to define the purpose of the website or application. The purpose can be as simple as

• to sell products of a certain type

or a bit more complex as in

• strategic brand building
• company and contact information
• be used as an integrated part in the sales process with existing customers
• initiate the first contact from potential customers

It really doesn’t matter how the goals are written, far more important is that they are clearly defined so that they can provide a clear overview in the next step and be used as a starting point. The easiest way is to write them in a list (as in the examples) to provide a clear separation between different goals. By defining the purpose the information architecture, content (information in an application and storyline in the case of a game) and user experience can be developed through a loop of ideation and conceptualization with the goal of producing a working prototype. In the case of a website this means using HTML and the real platform, usually a CMS such as WordPress or back-end framework.

Start with the purpose and then figure out the content, user experience and graphical design, not the other way around.