- June 25th, 2008
- 88 Comments
Three weeks ago we have announced the Style Switchers Design Contest1 where we’ve presented some ideas for style switchers design and encouraged our readers to create a style switcher for their own web-sites. One of the participants was to be awarded with an Apple Cinema 20 Flat Panel Display. Over 60 designers participated and — as in all of our earlier contests — the results are indeed pretty smashing. Now it’s time to review some of the best designs and, of course, announce the winner.
This contest has proved one thing: there are a number of possibilities for creative use of style switchers in your designs. They don’t have to be boring and can combine functionality with a beautiful and engaging design. Style switchers are back now; and we are glad that so many designers have participated in our contest learning how to use them and apply them to their designs.
The winner of the contest is Florian Pichler, the designer of the iamBlog3‘s style switcher. Congratulations, Florian, we are happy to smash you with an Apple Cinema 20 Flat Panel Display! We’ll contact you via e-mail over the next 24 hours.
And now let’s take a look at 60 excellent examples of style switcher designs created by the participants of our contest. Please notice that only those designers have participated in the contest who followed exactly the rules we’ve published in our announcement post.
Iamblog.de4 has put a lot of effort in designing an advanced style switcher. Hit the button “Hintergrund ändern” in the upper left of the page to open up the styleswitcher and choose a background you like. Previews, backgrounds and the switcher itself are loaded with Ajax, the list of available backgrounds is generated dynamically so every writer of the blog can easily add their own background. Currently 10 different styles are available. The Ajaxified style-switcher can be dragged across the site layout.
Sometimes style switchers can also be extremely creative. Rogie King8 has designed a sliding foliage-o-meter. Visitors can select the intensity of the foliage in the design (from sparse to dense). The leaves appear not only in the header, but also in navigation options, bullets and headings. Beautiful design, excellent style switcher.
Nigel O Toole11 offers an advanced and dynamic style switcher. At one, the presentation of items in Nigel’s portfolio can be adapted to user’s needs. Apart from that the background image of the site can be changed as well. The style switcher itself has two levels: the first level takes care of the structure. To access the second level you need to click on the visual at the right.
On Engage interactive15 you can change the theme via the button in the top right — there are 4 to choose from. All themes are completely different. Each one changes the site holder and also a few bits in the portfolio. Graphics are replaced as well.
Smallstone27 allows its visitors to “swap out the shelf” — exchange the header, visuals and links. The style switcher is placed right under the header and is also designed in a unique and professional way.
Kulturbanause31 has a quite unusual blog design with two artistic themes — Daylight and Sunset. As the designer says, you can “play god” with the themes. The style switcher is placed in the sidebar. When the theme is switched both graphics and visuals are changed.
Luke Larsen38 allows visitors to switch between the blue sky view and the goldfish tank view. The site layout is quite wide: when the style is switched, a number of design elements such as background and used images change as well. In the blue sky view dove is used, in the fish tank view a golden fish. The style switcher is placed in the navigation at the top of the page. The site didn’t have the text “Smashing Magazine” which is why it hasn’t been considered when selecting the winner.
Planetopija41 enables users to change the color of the header illustration. The style switcher itself is nicely designed (see the image below, the switcher is hidden behind “colour your world, oboji svoj svijet“).
Westin Melbourne Hotel
Since Olidax49 has a space theme, it allows its visitors to change the theme using a, well, space switcher. You can switch the styles while choosing a planet (you can find it on top of the right column). Earth, Saturn and Mars themes are currently available.
Lee Munroe53 has a style switcher that changes depending on the time of day. Visitors can also pick their desired style if they prefer. The style switcher is placed at the upper right corner of the content area. The shadows in the footer change with the changed theme as well.
Thomas J Bradley
Thomas J. Bradley73 has a style switcher which is controlled by the Flash banner at the top of the page. When you click on the pink star you will be presented with a slider to glide through the different styles for the site. Each of the styles correspond to a time of day, and are displayed during that time period. As designer says, he wanted to have a fun hidden aspect so he provided this easter egg to slide through all the time periods / styles. 5 styles are available. However, the style switcher is not really easy to find.
Pegd82‘s style switcher is very minimalistic; it uses transparent png’s and background-color to save on loading different logos for each selected color. When the style is changed logo color and link color are changed. The style switcher is placed in the sidebar and is represented by colorful rectangles.
This switcher allows its visitors to change the width of the layout to fit an 800×600 or 1024×768 screen. It also has a font-increase functionality that also changes the size of the home and print icons on the side. The style switcher is placed in the sidebar. The icons are simple and easy to understand.
Ledger pad97 has a sticky style switcher which has a fixed position at the right corner at the bottom of the page and remains there even when the page is being scrolled. Blue and black-white-styles are available.
On 2ndzenith.com99 three style themes re hidden behind the “Customize” button. When the button is clicked, the theme picker is sliding. With a changed style links, background and text colors are changed.
Da Scritch109 has a black toolbar in the header of the page with font-size switcher (”dézoomer” and “zoomer”) and dark/light-switcher (”éclairer”). The visitors can also activate/deactivate fancy animations (”sans anim” and “déplier”).
Color and background variations
Liverpool Youth Service
Ryan Harris’s styleswitcher is a little bit too complex: to activate the theme switcher users need to click on “change background” link: after that the theme of the design can be selected.
Web Gallery Plus
Your site is valid
Your Web Pro Template Gallery
How about a site that has fifty style sheets to choose from? YourWebPro147 offers 50 color schemes (authoritative, dependable, enchanting, energetic and unique) — the changes affect both the layout and the color of the links. Hint: energetic color schemes not only look energetic. Don’t try this at home.
DinPattern151 uses a style switcher to display the tiled pattern to the user when the “preview” link is clicked below any pattern. It simply changes the body class to display the correct pattern tile.
We express sincere gratitude to all participants for a number of creative, beautiful and truly smashing style switchers. We hope to see you next time!
- 1 http://www.smashingmagazine.com/2008/06/05/style-switchers-are-back-ideas-examples-and-a-contest/
- 2 http://www.smashingmagazine.com/images/styleswitcher/apple.jpg
- 3 http://iamblog.de/
- 4 http://iamblog.de/
- 5 http://iamblog.de/
- 6 http://iamblog.de/
- 7 http://iamblog.de/
- 8 http://www.komodomedia.com/
- 9 http://www.komodomedia.com/
- 10 http://www.komodomedia.com/
- 11 http://www.purestructure.com/
- 12 http://www.purestructure.com/
- 13 http://www.purestructure.com/
- 14 http://www.purestructure.com/
- 15 http://www.engageinteractive.co.uk/
- 16 http://www.engageinteractive.co.uk/
- 17 http://www.engageinteractive.co.uk/
- 18 http://www.engageinteractive.co.uk/
- 19 http://blog.gnomdesign.de
- 20 http://blog.gnomdesign.de
- 21 http://blog.gnomdesign.de
- 22 http://blog.gnomdesign.de
- 23 http://www.schillmania.com
- 24 http://www.schillmania.com
- 25 http://www.schillmania.com
- 26 http://www.schillmania.com
- 27 http://www.smallstone.com
- 28 http://www.smallstone.com
- 29 http://www.smallstone.com
- 30 http://www.smallstone.com
- 31 http://www.kulturbanause.de/
- 32 http://www.kulturbanause.de/
- 33 http://www.kulturbanause.de/
- 34 http://www.kulturbanause.de/
- 35 http://www.nofrks.com/
- 36 http://www.nofrks.com/
- 37 http://www.nofrks.com/
- 38 http://lukelarsen.com/
- 39 http://lukelarsen.com/
- 40 http://lukelarsen.com/
- 41 http://www.planetopija.hr/
- 42 http://www.planetopija.hr/
- 43 http://www.planetopija.hr/
- 44 http://www.planetopija.hr/
- 45 http://www.westin.com.au/melbourne/
- 46 http://www.westin.com.au/melbourne/
- 47 http://www.westin.com.au/melbourne/
- 48 http://www.westin.com.au/melbourne/
- 49 http://www.olidax.com
- 50 http://www.olidax.com
- 51 http://www.olidax.com
- 52 http://www.olidax.com
- 53 http://www.leemunroe.com/
- 54 http://www.leemunroe.com/
- 55 http://www.leemunroe.com/
- 56 http://www.leemunroe.com/
- 57 http://samgerdt.com
- 58 http://samgerdt.com
- 59 http://samgerdt.com/
- 60 http://samgerdt.com
- 61 http://www.diegovalobra.com/
- 62 http://www.diegovalobra.com/
- 63 http://www.diegovalobra.com/
- 64 http://www.diegovalobra.com/
- 65 http://www.maikelneris.com.br/
- 66 http://www.maikelneris.com.br/
- 67 http://www.maikelneris.com.br/
- 68 http://www.maikelneris.com.br/
- 69 http://www.johnscott.se/
- 70 http://www.johnscott.se/
- 71 http://www.johnscott.se/
- 72 http://www.johnscott.se/
- 73 http://thomasjbradley.ca/
- 74 http://thomasjbradley.ca/
- 75 http://gbot.info/
- 76 http://gbot.info/
- 77 http://gbot.info/
- 78 http://gbot.info/
- 79 http://sitesquared.com/
- 80 http://sitesquared.com/
- 81 http://sitesquared.com/
- 82 http://pegd.org/
- 83 http://pegd.org/
- 84 http://peterbucher.ch/
- 85 http://peterbucher.ch/
- 86 http://www.timbixmedia.de/
- 87 http://www.timbixmedia.de/
- 88 http://www.quilor.com/
- 89 http://www.quilor.com/
- 90 http://www.websitesforaccountants.net/choosing_web_designer.php
- 91 http://www.viatrax.net/index.php
- 92 http://www.viatrax.net/index.php
- 93 http://www.luciavega-design.com/
- 94 http://www.luciavega-design.com/
- 95 http://minimal.ca/
- 96 http://minimal.ca/
- 97 http://ledgerpad.ath.cx
- 98 http://ledgerpad.ath.cx
- 99 http://www.2ndzenith.com/
- 100 http://www.2ndzenith.com/
- 101 http://photoblog.flanisoft.at
- 102 http://photoblog.flanisoft.at
- 103 http://www.jimmyweb.net/
- 104 http://www.jimmyweb.net/
- 105 http://www.vmp-finanz.de/
- 106 http://www.vmp-finanz.de/
- 107 http://www.weiqi.nl/blog/
- 108 http://www.weiqi.nl/blog/
- 109 http://dascritch.net/
- 110 http://dascritch.net/
- 111 http://www.freeneedle.com/
- 112 http://www.freeneedle.com/
- 113 http://msdevstudio.com/blog/
- 114 http://msdevstudio.com/blog/
- 115 http://www.ganato.com/
- 116 http://www.spaksu.com/
- 117 http://www.firex-bg.com/new/
- 118 http://www.cnowdesigns.com/
- 119 http://code900.net
- 120 http://chris.taulb.org/
- 121 http://chris.taulb.org/
- 122 http://visual28.com/
- 123 http://visual28.com/
- 124 http://soyrex.com/
- 125 http://soyrex.com/
- 126 http://soyrex.com/
- 127 http://lys.org.uk
- 128 http://lys.org.uk
- 129 http://chimou.com/
- 130 http://www.saltsolutions.com/
- 131 http://webgalleryplusplus.com/
- 132 http://www.anni80.info/
- 133 http://90seven.com/
- 134 http://90seven.com/
- 135 http://www.thecardpac.com/
- 136 http://www.thecardpac.com/
- 137 http://www.now-streaming.com/default.aspx
- 138 http://www.now-streaming.com/default.aspx
- 139 http://engel.uk.to/
- 140 http://engel.uk.to/
- 141 http://www.codesignville.com/
- 142 http://www.codesignville.com/
- 143 http://www.duechiacchiere.it/
- 144 http://www.duechiacchiere.it/
- 145 http://www.yoursiteisvalid.com/
- 146 http://www.yoursiteisvalid.com/
- 147 http://www.yourwebpro.com.au/templates/
- 148 http://www.yourwebpro.com.au/templates/
- 149 http://www.yutheme.cn/website/
- 150 http://www.yutheme.cn/website/
- 151 http://www.dinpattern.com/index.php
- 152 http://www.dinpattern.com/index.php