Pushing Pixels

Try again

Kirill Grouchnikov — Thu, 09 Sep 2010 17:49:47 +0000

No, Tweetdeck, this is not how i expect to compose a new tweet from the widget. And yes, i know it’s a beta :)

Design, uninterrupted #67

Kirill Grouchnikov — Thu, 09 Sep 2010 03:17:04 +0000

Today’s post highlights the design of Zitrusfrisch.de. A muted monochromatic theme with small splashes of red icons to mark the new entries directs the attention to the main element – a 3*3 grid of elegantly styled highlights of portfolio works. The rest of the information is either hidden in an expanding “More” section in the header or neatly arranged in a small footer section that lists the contact info and provides a row of themed social icons. Moving the mouse over the portfolio thumbnails smoothly transitions to a full-color version, and clicking on the thumbnail shows a modal lightbox window with more details on the specific work and an animating slideshow of additional screenshots.

There is a slight usability problem in expanding the main info section (with the “Mehr” button in the header). Once the section is fully expanded, it can be closed with a small “X” button. However, the location of this button is not in the same spot as the “Mehr” button, requiring additional effort to move the mouse and acquiring a much smaller target to close the expanded section. On a more positive side, note how the thinner right column in this section balances out the wider left column due to the headshot, and how the tilt of the left shoulder directs the attention towards the center axis of the page.

Design, uninterrupted #44 Today’s post highlights the design of think.dj by Deepak Thomas. An unorthodox single page design...
Design, uninterrupted #49 Today’s post highlights the design of KeanRichmond.com. The site header uses a simple noise texture...
Design, uninterrupted #34 Today’s post highlights the design of JosephPayton.com. Set in various shades of steel blue, the...

Design, uninterrupted #66

Kirill Grouchnikov — Wed, 08 Sep 2010 03:48:19 +0000

Today’s post highlights the design of TheDesignCubicle.com by Brian Hoff (whose personal site was featured in this series a few weeks ago). A popular white / black / brick red color palette gets two additional colors – yellow for header, sidebar and footer highlights / rollovers, and light blue for main body hyperlinks. While the design uses consistent hyperlink and rollover colors in each section, there is a negative element when the visitor decides what is a link – four different colors are used for hyperlinks (white, yellow, light blue and black).

The main content is framed by two thing black strips on top and bottom, and two thicker brick red strips on the side. Note the simple patterned gutter strips running along the sides, as well as the muted pinstripe textures extending from the sides of the main header and footer section – creating subtle separation of the main content area. The center column is divided in four parts, with subtle linear grayscale gradients to separate between them. Clean typography, precise line spacing and smaller fonts on secondary elements (metadata, social links, categories) create a pleasant reading experience even giving the large amounts of text paragraphs.

Design, uninterrupted #40 Today’s post highlights the design of BradColbow.com, home of the popular web comic “The Brads“....
Design, uninterrupted #62 Today’s post highlights the design of DesignDisease.com. A rich pastel color scheme, a wide array...
Design, uninterrupted #46 Today’s post highlights the design of MilesDowsett.com. A somber color palette of beige, olive, dark...

Drinking From The Firehose – Design Inspiration August 2010

Kirill Grouchnikov — Fri, 03 Sep 2010 18:27:22 +0000

Image by bookgrl

Every month this series is tracking the latest design trends and collecting the best examples of modern web designs. Here is the list for August 2010 with over 1800 links from 55 aggregator posts:

Effective Use Of Blog Sidebar Section – Inspiration And Tips from 1stwebdesigner
25 Nature Related Web Designs to Inspire You from Web Design Ledger
Web Design Inspiration: 40 Green Themed Websites from Naldz Graphics
Showcase Of Delicious Typography In Web Design from webexpedition18
Showcase of Fresh Texture-Based Web Designs from Noupe
Beautiful & Creative Single-Page Portfolio Websites from hongkiat.com
35 Purple Web Designs to Inspire You from Web Design Ledger
50 Fresh Portfolio and Blog Design Interfaces for Inspiration from AEXT.NET
The Art of Distinction in Web Design from Six Revisions
Showcase Of Delicious Coffee Websites from Smashing Magazine
Web Design Inspiration: 44 Eye-Catching Slideshows from Naldz Graphics
Interesting Ways to Display Featured Content and Products from PSDFan
Superb Examples of Textured Web Designs from Modny73
20 Must See Examples of Signin & Signup Pages from Modny73
30 Mind Blowing Red Color Website Designs from Modny73
30 Lively Examples of Single Page Websites from Modny73
10 Inspiring Red Websites from Union Room
34 Creative and Inspiring Examples Of Vertical Navigation in Web Design from DesignBeep
30+ Awesome Online Shoes Stores: Best Practices and Showcase from 1stwebdesigner
Most Attractive (39) Corporate Website Designs Of Top Brands from SmashingApps
90+ Brilliant Fresh WordPress Site Designs for Design Inspiration from instantShift
58 Really Cool and Inspirational Single Page Websites from DesignBeep
35 Beautiful DIV/CSS Web Designs For Your Inspiration from DJDESIGNERLAB
20 Most Attractive and Appealing Free WordPress Themes from DJDESIGNERLAB
30 Inspiring iPhone Application Websites from Web Design Ledger
25 Flash Portfolios for Your Inspiration from Vandelay Website Design
43 Impressive and Fully Creative Hand Drawn Websites from DesignBeep
58 Really Cool and Inspirational Single Page Websites from DesignBeep
Spectacular Web Designs With Unique Layouts – 33 Examples from Design your way
90+ Brilliant Fresh WordPress Site Designs for Design Inspiration from instantShift
25 Examples of Web Designs using Water Theme from Modny73
30 Examples of Clean, Simple & Minimalist Website Designs from Modny73
82 Fresh Examples of Single Page Website for Design Inspiration from Themeflash
Mastering Typography in Web Design with Inspirations & Tools from Onextrapixel
Head Up in the Clouds: Web Design that Uses Sky Elements from DesignM.ag
46 Captivating Examples of Extremely Colorful Web Designs from 1stwebdesigner
50 Wicked Websites featuring Wooden Textures from 1stwebdesigner
55 Excellent Examples of Websites Using HTML5 from Web Design Ledger
30 Cool & Creative Hand Drawn Website Designs from Modny73
12 Websites with Gorgeous Typography from Union Room
A stunning collection of website headers from Latest Design News
15 Beautiful Church Website Designs from DJDESIGNERLAB
A Showcase of Single Page Websites from Webdesigner Depot
Corporate Website Design: Creative and Beautiful Solutions from Smashing Magazine
A Showcase of Various Websites with Texture Web Design from You the Designer
Web Design Inspiration: A Showcase of Astounding Brown Websites from Naldz Graphics
30 Nice & Beautiful Looking Portfolio Designs from Modny73
40 Slick Single Page Website Designs from PSDFan
Quality Athletic Websites from DesignM.ag
Get Inspired: Beautiful Examples of Textures in Web Design from 1stwebdesigner
Website Design: 40 Beautiful Examples from designrfix.com
Craftsmanship in Designing Websites from Six Revisions
45 Inspiring Design Agency Websites from Web Design Ledger
Color Theory in Web Design : Blue Color Scheme from Themeflash
A Detailed Look into Popular Styles in Web Design from Onextrapixel

Drinking From The Firehose – Design Inspiration July 2010 Image by julieboddy Every month this series is tracking the latest design trends and collecting...
Drinking From The Firehose – Design Inspiration June 2010 Image by Foto Rita[Allstar maniac] Every month this series is tracking the latest design trends...
Drinking From The Firehose – Design Inspiration April 2010 Image by Here’s Kate Every month this series is tracking the latest design trends and...

Design, uninterrupted #65

Kirill Grouchnikov — Thu, 02 Sep 2010 00:30:38 +0000

Today’s post highlights the design of SweetSallies.com. With a soothing background palette of teal and light aquamarine, and splashes of olive brown for the texts, it uses a repeating floral pattern to create a friendly and playful vibe. The main page content is laid out in a narrow two-column grid that is framed to look like a real-life menu (with drop shadows elevating it above the background).

A lot of attention has been spent to fit all the essential information into a relatively small grid. The menu sections in the right column are interactive. Clicking on day names smoothly expands the relevant subsection, and moving the mouse over each menu entry (cupcakes and coffee) fades in a slightly translucent overlay with more information – all using the same teal color found in the header section.

The playful flowery theme is reinforced with multiple elements – woven chains in the header, vignettes around the main logo, hand-written fonts used on the logo, navigation menu elements and horizontal separators between the left-column information sections. Overall a very inviting and warm impression.

Design, uninterrupted #28 Today’s post highlights the design of BlackRabb.it. A single page design with a strong grid...
Design, uninterrupted #11 Today’s post highlights the design of TheHouseMedia.com. A dark and slightly textured background is offset...
Design, uninterrupted #62 Today’s post highlights the design of DesignDisease.com. A rich pastel color scheme, a wide array...

Peaceful

Kirill Grouchnikov — Wed, 01 Sep 2010 04:08:25 +0000

My son and daughter taking a walk in the forest

Design, uninterrupted #64

Kirill Grouchnikov — Wed, 01 Sep 2010 00:39:39 +0000

Today’s post highlights the design of FoundationSix.com. There are two main things that i like about the site – the color palette and the lighting effects. An austere color selection of muted teal, desaturated brick brown and light grayish yellow is masterfully reinforced in all the visual elements. Various shades of teal are used for both the grainy background and the texts in the top half of the site framing the attractive three-dimensional portfolio that occupies the center part. To improve the legibility of navigation links the design uses both all-caps and darker drop shadows (in the same teal hue). Move the mouse over the navigation links to see the inverse inset effect that uses darker hue with lighter drop shadows. Brick brown is only used sparingly in the top part – for the main logo which has a nice rollover effect and adds a little depth by displaying a blurred drop shadow below the navigation bar separator line.

This is a recurring theme throughout the design – using drop shadows, radial gradients and other effects to add perspective and depth without overwhelming the visuals. Note the radial gradient behind the main tagline (“Beauty * Brains”), the perspective tilt of the side thumbnails in the center portfolio piece, the double soft drop shadows cast by the thumbnails (hinting at not one but two light sources), and slight vertical gradient in the bottom part of the site. Instead of being distracting, all of the effects gently guide the eye towards the center that highlights the existing work done by the agency.

Finally, note how the highlight brick brown from the main logo and footer section highlights is used in the left and right thumbnail. While the center thumbnail uses the same teal hue, extending the radial highlight into the footer, it is flanked by perfectly balanced bursts of brown which are then further offset (towards the left and right edge) by the double soft shadows.

Design, uninterrupted #51 Today’s post highlights the design of EnlivenLabs.com. Set on the backdrop of dark olive denim...
Design, uninterrupted #48 Today’s post highlights the design of KoviDesign.sk by Jan Kovacs. Set on the backdrop of...
Design, uninterrupted #13 Today’s post highlights the design of SarahLongnecker.com done by FortySeven Media. Sepia and washed blue...

Design, uninterrupted #63

Kirill Grouchnikov — Thu, 26 Aug 2010 00:26:10 +0000

Today’s post highlights the design of MarkJardine.com. Mark is the designer for Tapbots, and the site design borrows heavily from the colors, textures, lighting and geometrical elements from the Tapbots applications (such as Convertbot). Set in a cold monochromatic palette that mixes in saturated steel blue, it uses a simple two-column grid with a separator gutter panel that uses a number of lighting effects to add extra dimensionality to the layout. The main content is using a strict monochromatic palette, adding noise texture to break large areas of white space, subtle drop shadows around the folded corners of embedded images and slightly curved callout contours around the entry texts. Note the marker icons in the separator gutter panels that differentiate between various content types (links, images, video clips, quotes etc).

Design, uninterrupted #51 Today’s post highlights the design of EnlivenLabs.com. Set on the backdrop of dark olive denim...
Design, uninterrupted #64 Today’s post highlights the design of FoundationSix.com. There are two main things that i like...
Design, uninterrupted #47 Today’s post highlights the design of Kyee.co.uk. A single page design with a clean palette...

Design, uninterrupted #62

Kirill Grouchnikov — Tue, 24 Aug 2010 00:09:24 +0000

Today’s post highlights the design of DesignDisease.com. A rich pastel color scheme, a wide array of geometrical patterns, a string two-column grid and consistent use of rollover animations make it a memorable experience.

My favorite part is the usage of the color palette for transitioning between different sections on the main page. The color palette consists of three primary and two secondary colors. Pastel yellow, light blue and brownish gray are used for solid background fills, as well as for section headers and texts. Brick orange and dark purple are used in a few places for the subsection headers. The main page has four sections: the header, the latest project, the main section and the footer. Each section has its own combination of the primary colors for background and foreground, with an intricate bleeding of colors at the seams between the sections.

While other designs feature either an immediate or a smooth color transition between sections with different background, the designers opted out to use semi-random patterns of extruding rectangular blocks that borrow and mix the background colors from both sections at the seams. Color mixing is done in both saturation and value, creating a jagged yet pleasing visual effect along the transition seams. In addition, note how the transition from the header to the latest project uses all five palette colors, with heavy emphasis on orange and purple hues.

The main page features a strong two-column grid. Note how the content in each section is divided in two columns, with perfect inter-section alignment further emphasized by guider line segments and small vertical rectangles along the left edge of the right column. One can even see a “phantom” third column in between the two, containing stylized themed icons corresponding to the subsection headers in the rightmost column.

Finally, the animations. If you move the mouse over the navigation menu, you will see a fading sequence in which the main element (under the mouse) becomes more saturated, while all the other elements gradually fade out. The same effect is applied on other sections – move the mouse over the thumbnail strips in the main section, and over the link lists in the right column. The same effect is applied consistently throughout the site – for example on “With love” and “Portfolio” pages. The only thing i would change would be to make the transition to use saturated colors a gradual process instead of an immediate switch.

Design, uninterrupted #43 Today’s post highlights the design of CreativeSoapbox.com. With earthen brown and light beige as primary...
Design, uninterrupted #44 Today’s post highlights the design of think.dj by Deepak Thomas. An unorthodox single page design...
Design, uninterrupted #17 Today’s post highlights the design of CarolRivello.com. The site features intricate hand-drawn illustrations in the...

Design, uninterrupted #61

Kirill Grouchnikov — Sat, 21 Aug 2010 00:33:23 +0000

Today’s post highlights the design of DouglasMenezes.com. While at first it seems a hastily thrown together bunch of disjointed geometrical elements, it reveals a surprisingly consistent visual exploration. There are three key elements pervasive throughout the design – a color scheme, overlapping diagonal elements and freeform paths.

The color palette consists of two parts. First, it defines four colors used for diagonal elements – desaturated teal, bright pink, light pink and light ochre. The second group of colors – ochre, white and black is used for the background, texts and freeform paths. Link segments bridge between the two groups by borrowing both pinks for the foreground / rollover.

The vast majority of diagonal elements have the same 45 degree slant. Even a seemingly random patch of oversized layers in the top-right corner follows this rule. The same slants are used in the background highlights of section titles and small two-stripe icons next to some of the links (which, surprisingly, are implemented in Flash). Thin black freeform paths weaving in and out of the diagonal elements add a small and welcome degree of visual chaos to the picture. There are a few very small visual elements that break the four major orientation axes (horizontal, vertical and two diagonals). One of them is a thin pink strip of social network icons in the top-left corner, and a couple more can be found in the footer.

Strongly oriented diagonal elements are an emerging trend, and will appear in some of the next installments of Design, Uninterrupted.

Design, uninterrupted #7 Today’s post highlights the design of MattBrett.com. The brown color gamma is fully explored in...
Design, uninterrupted #19 Today’s post highlights the design of JeffSarmiento.com. Set in earthen brown colors, it uses splashes...
Design, uninterrupted #51 Today’s post highlights the design of EnlivenLabs.com. Set on the backdrop of dark olive denim...