Showcase

Interface Design: Slide is the New Hover

2010-06-24T23:48:00.066+02:00

While creating the interface prototype for a portfolio page, I came across some interesting feedback and observed, through informal user testing, a couple of usability assumptions that seem to be common today.

The details are not the details. They make the design. --Charles Eames

The Return of the Gradient

With everybody being spoiled by slick User Interfaces (UI) and the return of gradients and finally working transparencies (through CSS3) most sites are due for the bling.

In the ever expanding universe of touchscreen devices, slide is the new hover.

Of course, a hover effect doesn't make sense on touchscreens, it just doesn't work. What we can do, however, is create hover effects for mouse and trackpad and ignore it on touchscreens. Therefore, no functions beside visual effects can be implemented, e.g. showing information via elaborate tooltips is out of question.

Eye-candy or not, a UI works with and caters to expectations, instilled & refined by the likes of Apple, etc.

Informal research indicates a demand for slick...

A better looking UI is a deeper experienced UI which is a more efficient UI -- which leads to an astonishing and almost counter-intuitive conclusion: Function is derived, in part, from form.

The cleaner the interface, the more code you have in the source.

In interface design, a passion for every pixel is crucial.

The best usability testers are our extremely web-savvy children & our not-so savvy parent's generation. Not to generalize, I know there are exceptions in both camps.

Example 1: A quick redesign

I started and beautified the LYROIS entry page with some CSS3 & a gallery.

This is how you arrive --

A huge mouseover animates the logo and prepares the way for the game with the shapes. The gallery is recognizable as a scrollable through the use of the navigational arrows. Text shadows are delicately used to enhance legibility and contrast and a white-to-transparent gradient creates a visual foundation for the gallery. This is an example of an "adapted" look, not intended to be "trendy", but used to meet visual expectations.

The overlay creates focus and removes distractions --

By clicking on a gallery item, an overlay is made visible, containing not just a bigger image but moreso, a short project description and a link to the project page. I want the overlay to add value & information, mere zooming might be disappointing. The use of a white shadow surrounding the overlay is intended to further push the underlying elements in the background thus visually masking distracting elements. (Note: This is concept work and I am aware of the right arrow and the generic close button.)

The goal is to build an integrated UI though, not just parts. On the other hand, developing in public is always fun & I can roll out what I got, with ongoing feedback. Without thousands of visitors per day, I can afford to.

Example 2: Cleaning up

Starting the page --

The intention is to remove multiple blocks of text, an attempt in visual minimalism, rectangular fields for three functional areas; the navigation × sidebar, the gallery, and the content of the page. The main target of the minimalism is the sidebar, with lots of text and distractions -- we're here for the imagery, right? The 5-item navigation contains the whole traditional sidebar with clear titles. You get to see what you click on, as opposed to sorting out the skimmed fragments. The gallery section is subdued and kind of veiled behind a semi-transparency, again, a feature to remove distractions and visual competition. The background gradient, while picking up the contemporary style, acts as a subtle visual indicator of page-length: The brighter the background, the closer you are to rock-bottom.

The top right mini-gallery is built with all CSS3, no JavaScript, and no image-swapping. The JQTools catch the click and enable the overlay. This gallery is not scrollable, it is made up of 12 items which are simply clipped to the width of the browser window. The reason for this decision: Incorporating the arrows or some navigational element would lead to clutter, also, explaining a non-obvious action -- like using keyboard-arrows -- is the opposite of what we're after here.

A closeup of the accordion tabs --

The tabs are enhanced with CSS3-gradients to create the old button-effect. There are no images here, and I wouldn't have used an image-based gradient -- but doing it this way is fast and flexible and the iPad and other slick touchscreens practically demand gray gradients (What sounds like a rant is none. The gradients are simply beautiful.). The hover state on mouseover flips the gradient. Please note the text-shadow and the way it is flipped as well when hovered.

The opened accordion and a hover state --

Here we got the accordion slid open, showing its contents, under theis pane, by the way, a customized stack of BixBe sales widgets. The content of the page is visible with the tabs open, it wouldn't make for a simpler site with the content hidden by the tabs, this is an example of two levels of content living peacefully side-by-side. No competition here. Note the state of the opened, active tab, which stays in the mouseover state while the pointer is already away and hovering above the gallery, revealing the now fully opaque picture of the second item.

The whole page with overlay active --

As shown in Example 1, the overlay contains a short project description and a link to the project page. Again, the use of the white shadow surrounding the overlay is intended to hide distracting elements. One last word regarding the gray-scale gradients: A gradient is elaborate by itself, the use of color, especially near full-color pictures is most often too much. Eye-candy, taken literally, is a distraction by itself.

See it live at Lyrois.

Tools & Techniques

Used items from the very reliable JQuery Tools --

The skin is made with a bunch of very heavy and somewhat advanced CSS3.

Please note that CSS3 gradients & shadows don't show in Firefox (FF) prior to 3.6 -- at a visitor share of less than 10% I don't hack for Internet Explorer (IE) anymore.

Depending on the browser it either looks beautiful or it degrades gracefully. This means that FF prior to 3.6 and IE get no gradients but solid colors and mostly no shadows. You don't even need pixel-based gradient backgrounds when CSS3 does even that.

Resources

CSS3 tutorials and showcases

Optimization

Best Practices for Speeding Up Your Web Site

User Interface Design

UXMyths: Debunking user experience misconceptions
Top 10 UX Myths: Myth #3: People Know What They Like
"Menu Mind Games": William Poundstone Dissects the Marketing Tricks Built Into Balthazar's Menu
Hick's law states that the time it takes to make a decision increases with the number and complexity of choices. And as the decision time increases, the user experience suffers.

Glorious Logo Commissions

2009-11-26T17:46:00.004+01:00

Finding a visualization for a name, an idea, or a concept, creating logotypes, signets, or whatever you like to call them, always opens the opportunity to explore new paths because, you know, the Lyrois vectors are frozen.

This is where and why I am formally offering to accept commissions for logos created in my now-signature styles.

Old-school logo geometries and clear, strong shapes, papercutting, exploring whitespace and silhouettes... everything in highly accurately drawn vectors -- if this sounds appealing to you, we'll have great times and glorious shapes to create.

The trick is to determine the symbols, find an appropriate representation for each one, hide them within a powerful shape, and forget about them for the legend to be forged.

Commissions start at € 2,000 and end with your and my satisfaction and vectors delivered.

Many versions are created, documented, and preserved; this is where passion, blood, sweat, and tears come into play --

Below is a selection of recent projects with links to backstories and making-ofs --

Logo: Windson

Imagine a Norseman; son of strong winds, also, a son of the sea. Badass with style and an edge, literally or not. Powerful, mean & nice, steely, but not too polished.

The Windson legend is elaborately packaged, visually legible if you want to, with every detail meaningful, yet powerful on its own, as an impressive shape. The result is essentially a combination of the symbols for Wind and Son. The metal effect is part of the deal, but there is nothing more pure than the papercutting style. I make every detail count, or eliminate it altogether. Talk about hyperinfusion of meaning -- in other words, you cannot over-interpret this logo.

Logo: Lightning and Meteors

The Lightning and Meteors sign for Alexander Becker Consulting is a non-typographical symbol, capturing and expressing vision and impact in an abstract business realm. The symbols were preselected: lightning and shooting stars, these are the tools and the means, while earth and space are the targets, so to speak.

Ambigram: The Dynasty

A rotational ambigram, we want the graphic to look and read identical when turned upside down. This means, each letter has to contain the rotated version of its counterpart -- and vice versa.

Logo: 30pro

From top-left with the ingredients highlighted clockwise. 3-0-p-r-o ... this is what we got and what we wanted to make into the final shape. While you don't need to see all the letters, they do define the whole thing in true form-follows-meaning style.

Logo: Stars'Spring 2007

The Stars'Spring sky disk. A seal with an aggressive outer ring, an onion theory, some mythology, and lots of force-de-frappe.

Still interested? Contact me and we'll make it happen.

Maybe you're looking for free logotype and design work? Read this, please.

Logo: Windson

2009-11-17T17:55:00.002+01:00

The backstory of the latest logo commission. Start with the briefing --

Windson. Imagine a Norseman; son of strong winds, also, a son of the sea. Badass with style and an edge, literally or not. Powerful, mean & nice, steely, but not too polished.

Full Dress: The Money Shot

Making Of

Elements -- The Windson legend is elaborately packaged, visually legible if you want to, with every detail meaningful, yet powerful on its own, as an impressive shape. The shape is essentially a combination of the symbols for Wind and Son. The metal effect is part of the deal, but there is nothing more pure than the papercutting style. I make every detail count, or eliminate it altogether. Talk about hyperinfusion of meaning -- in other words, you cannot over-interpret this logo.

Wind -- Taken from meteorology, the symbol consists of the circle; indicating the sky, the shaft for the wind direction, and the barbs and pennants for the wind speed.

See the station model for interesting use of meaningful symbols.

Treatment -- The brief states "coming from the north," which determines the direction of the shaft. We want a powerful wind, a storm that is -- hence two pennants. Windson blows through clear skies, calling for a hollow circle -- as opposed to the Lightning and Meteors logo, which comes with thunderstorms.

Son -- We turn to heraldry, where the marks of cadency lend themselves to represent what we want. Being a first son, Windson carries a label of three points, a horizontal strip with three tags hanging down (Executed as an inverse shape).

Another symbol for son is the greek letter Upsilon, which shows in some intermediate versions of the logo.

The overall shape is that of a ship coming towards the viewer -- how else does a Norseman move? It adds stability and a sense of direction to the whole image. The zero-ground edges make the logo resembling a jewelized weapon, carrying the mean & nice theme.

Sketches

First draft --

Different blades and pennants, note the scimitar blade in the lower right, which is out of style here --

Globus cruciger flavors --

Even more sketches, see an oil rig and the Upsilon, also, note the sand drawings in the upper left --

Morphology

Three weeks, 50+ versions, lots of explorations.

More pictures

Logo: Lightning and Meteors

2009-06-09T16:10:00.004+02:00

The Lightning and Meteors sign for Alexander Becker Consulting is a non-typographical symbol, capturing and expressing vision and impact in an abstract business realm.

The symbols were preselected: lightning and shooting stars, these are the tools and the means, while earth and space are the targets, so to speak.

The Money Shot

The glorious definition of Kitsch --

The Legend

The ingredients clockwise, from top, right, bottom, to left; abstract and camera-ready.

Earth -- divisions of the circle, superimposed stars, the weather factor, astronomical symbols, and the introduction of the signature papercutting style.

Lightning and meteors -- getting the lightning down and the stars up, because how to impact is as important as where.

Patterns -- altered angles and directions represent different meanings, active, passive, forward, backward, grounded, or airborne, as well as modulated levels of intensity.

Research & Resources

Lightning

Weather Symbols

Meteors

Meteors are streaks of light formed when chunks of metallic or stony matter known as meteoroids enter the Earth's atmosphere at high speeds from space. Most meteoroids disintegrate before reaching Earth. Those that do strike our planet are called meteorites.

Coins

Astronomical Symbols on Ancient Coins

Genealogy

You may also want to take a look at the Stars'Spring sky disk, the direct ancestor of Lightning & Meteors.

Motivational Poster: The Rules of the Game

2009-06-02T05:21:00.001+02:00

A collateral from a recent, undisclosed consulting project, the rules of the game are a simple no-list, designed to illustrate the requirements of maximizing accountability and eliminating distractions to ensure the highest grade of professionalism in a tightly-knit team.

No Excuses, No Rationalizations
No Bragging, No Ego
No Talismans, No Coin Flipping, No Gambling
No Whining, No Slack, No Hesitation

Please note that the rules above are a means to improve accountability and professionalism within a team. It's a list of work ethics, not a prescription for private life.

On the other hand...

A PDF-file is available upon request.

Ambigram: The Dynasty

2008-11-11T11:11:00.002+01:00

The Dynasty; ambigram, created in 2008 for thedynasty.org.

An ambigram, also sometimes known as an inversion or flipscript, is a graphical figure that spells out a word not only in its form as presented, but also in another direction or orientation. The text can also consist of a few words, and the text spelled out in the other direction or orientation is often the same, but can also be a different text. Douglas R. Hofstadter describes an ambigram as a calligraphic design that manages to squeeze two different readings into the selfsame set of curves.

What?

The goal is a rotational ambigram, we want the graphic to look and read identical when turned upside down. This means, each letter has to contain the rotated version of its counterpart -- and vice versa. The pairs are t and y; h and t; e and s; d and a; and the middle-letter twin y and n. We can chose from upper- as well as lowercase letters.

Playing around

The sketches identify potential ligatures and strategies to combine each letter-pair. After drawing the first half of the graphic, we copy and rotate it to see if it works upside down and thus completes the second half.

Putting it all together

The shapes are drawn geometrically, and the final ambigram emerges from the ligatures. The floral elements are added to reflect the tribal nature of The Dynasty, the skewing adds to the character of the drawing.

Readability

An ambigram may or may not be legible as a word, it is, in either case, a unique shape directly evolved from its components. In fact, it acts as a new letter, reflecting the sum of its parts and adding just a little bit more.

The Dynasty

The Dynasty represents an old tribe with mythical, even mythological foundations, itself a twisted symbol for an ancient legend.

30pro

2008-05-11T12:25:00.004+02:00

30pro. Constructed in 2008. From top-left with the ingredients highlighted clockwise --

3-0-p-r-o ... this is what we got and what we wanted to make into the final shape. While you don't need to see all the letters, they do define the whole thing in true form-follows-meaning style.

A perfect application for old-school logo geometrics and blocky, strong shapes.

More than 160 different versions were created over the course of nine months.

The last 43 versions are explorations of different paths (literally, check the picture) and various ideas and symbols with the remaining seven (printed in red) being considered back and forth. The cards are now bound in a flipbook producing amazing effects and providing inspiration over and over.

The final logotype incorporates iconic scissors symbolizing the business' roots in cutting plastic. A couple of symmetries expose themselves depending on how you turn it. Try 45 degrees clockwise, for example. Furthermore, the geometric nature enables the creation of diverse patterns which emerge via duplication and cloning.

The trick is to determine the symbols, hide them within the shape and forget about them for the legend to be forged.

What scissors?

Stars'Spring 2007

2008-04-21T10:47:00.009+02:00

The Stars'Spring sky disk. Created in 2007, with the objective being the visualization of "Stars'Spring", highly accurately drawn in Freehand.

Pics from the Shop

Encirclement changes the visual dynamic and tempers the intensity of the aggressive outer wheel.

Shaping the wheel of fire --

Peeling back the layers of the onion --

Tumbling through space --

Relatives

Any resemblance with the Nebra sky disk is accidental and wasn't discovered until after the design of the Stars'Spring sky disk was finished.

Descendants

Take a look at the promising descendant of Stars'Spring, it is called Lightning and Meteors and it is where we're going from here.

Alexander Becker: A Designer's Portfolio

2008-04-20T23:06:00.001+02:00

Showcase. Showing old and new, best of and most recent projects and stuff that deserves the mention.

Showcase

Interface Design: Slide is the New Hover

The Return of the Gradient

Example 1: A quick redesign

Example 2: Cleaning up

Tools & Techniques

Resources

Glorious Logo Commissions

Logo: Windson

Logo: Lightning and Meteors

Ambigram: The Dynasty

Logo: 30pro

Logo: Stars'Spring 2007

Logo: Windson

Full Dress: The Money Shot

Making Of

Sketches

Morphology

More pictures

See also

Logo: Lightning and Meteors

The Money Shot

The Legend

Research & Resources

Lightning

Weather Symbols

Meteors

Coins

Genealogy

Motivational Poster: The Rules of the Game

Ambigram: The Dynasty

What?

Playing around

Putting it all together

Readability

The Dynasty

30pro

Stars'Spring 2007

Pics from the Shop

Relatives

Descendants

Alexander Becker: A Designer's Portfolio