ffffrozen - Adam Bezulski's blog

Last week I didn't have time to write a post about interesting web sites (due to moving house) so it is time for the 18th entry. There are only two websites but I found them quite interesting.

Mediatemprano

Portfolio of French guy Simon-Pierre Hennequin features nice usage of pattern. The right column, slightly wider than the left one (remains white), is decorated with background image of marble pattern (it looks like). It looks very smooth and doesn’t seem to be pushy. That concept is fitted across the whole web site but portfolio section looks the best - text on the left, thumbnail on the right.

There are also two other features that I like - nice fonts in headings (Cufon as a font embedding) and bubble with the date for blog posts.

Bart-Jan Verhof

Another portfolio and another web site from Netherlands. And it looks superb. There are two key elements why I put this web site. The first is the grungy layout. And it is not chaotic or messy - it is based on the grid and looks tastefully. The second element is the typography. Nice sans-serif, chunky headings are combined with serif, quite large body text. Font embedding technique comes from typekit.

The layout of the blog section is influenced by Josef Müller-Brockmann and that section is my favorite one. Also, portfolio section is worth visiting. Respect +10 for the Guy :)

This post is sponsored by full screen and tasty background images. Let's start with the tasty one.

La Papa Pizza

I love Italian food - this is one of the my favorite food. And I was quite pleased with the imagery of pizzas, breads, pastas and other meals. Those images are simply brilliant and presentation on the igneous background works well - specially for pizzas and breads (looks like everything was inside of the oven).

There is a nice implementation of the custom content scrolling - you can navigate by using the custom scrollbar or by clicking one of the items in the drop-down menu. Works smooth also with the mouse wheel.
Let's hope that the delivered product looks as good as pictured and tastes even better.

Axel Schoenert Architects Associes

It looks like full screen background images and slideshows are trendy and used a lot (or sometimes abused) but in this case that scenario makes sense, specially, if it is about the architecture.

Full screen background is also used on project details page with sliding panel containing description and images list. All it is nicely combined with half-transparent elements of the layout. And one more thing - this not a full Flash website.

AyerViernes

This is another example of the website that gives the impression of the being done in the Flash - full screen layout and sliding animated content. But it is HTML, CSS and JavaScript.

This web site uses single layout concept and I find few interesting things over there. The first thing that I noticed was the pattern applied to the images which makes them looking interesting.

The second thing is the usage of the AJAX. Despite the fact that this is single page layout, the content is loaded using AJAX calls once user clicks item from main or sub-navigation. Also, the URL in the address bar is updated, so user is able to bookmark page/section.

It's been a while since I wrote last post. At the end of the month I am moving out from my apartment so I am kept busy looking for new place. But in the meantime I also keep looking for interesting websites, so here they are...

Relogik

Relogik is the showcase of the product designer Damjan Stankovic and that web site follows the same principles used in his projects. It is simple and functional.

Obviously the most interesting part is the product details page that features high quality renderings in the header and description text alongside with images. What also looks nice is the pagination functionality placed at the top and at the bottom of the page. Some product concepts are really interesting and I wish I had some of them, specially USBee and Letout Outlet Wall Socket.

Cooper

The first impression of the page is that something might be broken. It is because the web site uses single page layout and combines horizontal and vertical scrolling. The main navigation (with fixed position) triggers horizontal scrolling while sub-navigation triggers vertical one (apart from blog which uses the classic approach).

It might be looking chaotic but users are able to switch to the standard browsing, which is good in terms of UX and usability.

Steinway & Sons

Known piano manufacturers have their web site recently redesigned by Jesse Bennett-Chamberlain that runs 31Three. The new website looks stunning and you can see a lot of attention to the details. Personally, I like the colour scheme and the typography (font embedding done using @font-face). Also, the drop-down menus look impressive with half-transparent border.

It's Tuesday and it is time for the Fourteenth Weekly Inspiration post. There won't be any other posts for a while. It is time for me to take some holidays.

Left-aligned and scalable background

Hire me Copenhagen

This is original approach to the personal portfolio, specially if someone wants to live and work in Copenhagen. Narrow layout moved to the left, exposes scalable picture of Copenhagen. Sub-pages including portfolio section look nice, also Guys is excellent in making the tea! How nice. Worth checking is CV in PDF - quite nice and graphical approach.

Richard Spierings

Portfolio of Dutch director also presents similar approach - narrow layout aligned to the left and scalable background image. Here, background image has special treatment with applied dither. For some reason the background image reminds me the scene from the first Matrix.

Extra behavior for main navigation

Bixal

There are two reason why I chose this website. The first one is the colours palette with colorful background image that has fixed position. The second reason is the main navigation that is binded to the carousel on the landing page. This is nice example how main navigation can be attached to the other than "click" events.

Perspective and grid

Neiman Group

Funny aituation about that website - I've had bookmarked this website long while ago, but for some reason I have never presented it. That situation changed the background image (which is swapped on different occasions). I really like cold and pure elements of architecture. That shot of the concrete gives nice impression of perspective and that's the reason it was brought to my attention (again ;)).

The main navigation and footer indicate the usage of the grid which gets is obvious on the sub-pages and even more on the page that presents the people behind the agency (on contact page as well).

As usual, for the last couple of days I've been looking for the website that could bring in some inspiration. Coincidentally collected website present clean, simple and sometimes minimal approach. All pleasant to the eye and simple to use.

Content matters

Plusmoins

White background, black text and blue headings combined into nice grid layout (see the CSS) which is consistent across the whole website. That combination reminds me delicious website (just my impression). The only one fanciest element is the content slider on the landing page.

Atlantic Southeast Airlines

Another website that is content oriented. Grid based layout combines red, gray and black content on the white background for the contrast. The whole package is well designed. Good looking headings use Cufon as font embedding technique.

Waner & Szakall

The website of that law office really stands out compared to other website within that industry. Single page website gives all the necessary information in a clear and pleasant way. Narrow layout works nice with images and typography solutions.

Show me your work

Chance Graham

The first thing what caught my eye was the colour scheme. For some reason I like the combination of dark/dirty yellow with black and shades of gray. This portfolio website is not rich in the content as the previous one, but Work section is quite descriptive. The interesting solution is the navigation placed above the screen grabs that allows jump between images. Simplicity works.

Hans Albu Sanmiguel

What we have here is very clean, simple and yet creative approach. There are few elements that attracted my attention. First - the animation of the birds - quite neat and also not disturbing flash animation. Second - the main and sub navigation breakdown. Both are aligned vertically. Content pages with nice, original imagery and fancy headings look really well. Headings also use Cufon as a font embedding technique.

For me the most interesting section is the portfolio which can be filtered using third level navigation. That section nicely combines AJAX, scroll-to functionality and images carousel (done with MooTools). Sehr gut.

jQuery madness

This is the coolest website before launch checklist I have ever seen. I has predefined fields with iPhone-like check box, you can disable field if not applicable (N/A) and add a comment. What also is nice, that some extra fields can be added if necessary. Fancy input fields use CSS3 properties like border-radius and box-shadow (this is webkit actually). Animated background is based also on CSS (webkit again). CTRL+D ;)

In today's post you will find nice background images, massive dropdowns and corporate website that doesn't look like corporate one.

Full size image background

Inspired by Iceland

All we have heard about Iceland recently mostly because of volcano and flight disruptions. Anyway, I think that Iceland is a very interesting country and that website seems to prove that. The imagery used as a background across the main and sub sections is stunning. Other interesting features are the half-transparent navigation elements stacked at the top and the bottom of the pages.

MNJ Groupe

Here the simple layout is combined with full background images. The quality of the pictures is not as good as in the example above but still works quite well.

Project details pages are equipped with accordion and image gallery based on the AJAX. What I like is the way how URLs in the gallery pagination are handled - once hyperlink is clicked, the address bar in the browsers gets the update. This is very handy for bookmarking.

Grids and chunky drop-downs

Pool Inquinamento

Very nice usage and indication of the grid (the background image). Actually two of them (almost). There is a vertical grid that divides layout into columns and there is attempt to use the horizontal one. If line height of text elements was adjusted accordingly, text would nicely meet horizontal lines in the background, but despite that site makes good impression. Regarding the text - website uses @font-face as a font embedding technique.

What I also like is the navigation with massive dropdown menus fitted into the grid lines. Clever.

Anne Frank Museum

Well designed - that was my first impression that still lasts. Colours, fonts layout combined together very well. Main navigation is equipped with massive dropdowns enhanced with images.

The most interesting section is the history of Anne Frank where you can find timeline based on the JS content slider. This has been done really well.

Corporate world

AOL Corp

AOL corporate website follows recent AOL logo revamp. Let's forget the logo and take a look at that website - it doesn’t look like a typical boring section. That creative approach including colours, layout and fonts gives the positive impression and you don't have a feeling that you are dealing with corporate giant.

Fonts like DIN or Helvetica are embedded using @font-face. +1 AOL

 Last week browsing for some inspiration I bookmarked some nice websites. Here they are.

Pixels got bigger

Trikoder

The first thing that I noticed was background with big pixels/tiles. Also interesting is the fade in/fade out effect once those tiles are hovered. That effect is also populated across the whole website.

On the home page there is another interesting functionality for "Selected Work" pane. Previous/next arrow click, triggers the page background change (enlarged screen-grab of the selected project). Overall impression is really good as the website uses non-standard/out of the box layout.

WebMynd

Another website with "enlarged pixels" in the background but this time with quite simple layout. Header is fixed-positioned and it fades out once page gets scrolled down.

Portfolios

David A. Molanphy

Definitely very well designed portfolio. What really stands out is the portfolio section. Is very descriptive and equipped with the vertical easy to use image slider. Presented work looks well and is worth the attention.
The only one minus is the font size of the body text - it could be a little bit larger.

Mohan Balaji

Totally different approach in this portfolio - one page layout in this case. I think that despite the sticky side navigation for the work section, the whole website it is too long. Nevertheless, overall impression is good (I like the colour scheme). What caught my eye is the "about me" section with timeline.

Environment Friendly

DBA

The website is as clean and neutral as products they sell (well, almost). This website has clinically white layout with easy to scan and read information. The product details page features good images and some nice info-graphics.

Now, the bad thing. The checkout process doesn't work - I tried to purchase set of pens few times and each attempt ended with error. Not good if you want to make a serious business.

Taste of the luxury?

Merus Wines

Dark colours and high quality images give the impression that you deal with sophisticated wine. At least that was my impression.

Content on the home page and across the main sections is fitted into vertical content slider based on the jCarouselLite; Cufon is also in use as a font embedding technique. The main navigation is placed at the bottom of the screen (fixed position) and appears once mouse reaches the bottom of the page.
 

 This is it. The tenth Weekly Inspiration post. I never thought that I will maintain that series on (almost) regular basis. In today's entry you will find some wild examples of JavaScript usage and Swiss influenced layout.

Here comes your JavaScript not Flash

Nissan LEAF (US)

When I saw the website for the first I was pretty sure that I deal with flash. Wrong. It is purely based on the JS and SVG. If you wonder how it works underneath, just use the Firebug.
The final effect is just amazing and I bet it took some time and effort to do that.

Is it sunshine?

This weather forecast website is also based on the JS and Google Map. If you wonder what's the current weather in the place that you're interested in, just zoom-in or type location name in the search box (equipped with suggestions). Google map will be overlayed with goog-looking icons.

For me, the most interesting feature is the slider with the chart at the bottom of the screen. Once moved, map is updated. You can also get the embedded version of that website.

Lightmaker

This is really good example what you can do with WordPress and JS Frameworks (MooTools is this case). Accordion effect mixed together with scroll-to functionality give really good impression. And it comes even better with good imagery and background in the header.

Typography, grid and Swiss inspiration

Neography blog

Use of typography based grid is very obvious and here is the proof. This iconic poster was designed by Swiss designer Josef Müller-Brockmann and has influenced many other designers.
For me the calendar at the top and contrastive colours work really well. Typography also benefits from the grid system and all headings use Typekit as font embedding technique.

Overall good impression

Team Excellence

Website is clean and simple and makes really good impression. Content is easy to read and works nice with white and gray colour palette. In terms of visual aspect there is one important thing - no stock imagery. From my experience other consulting companies probably will have websites with images showing shaking hands or well-dressed and smiling people looking at something. Or even worse, pictures of skyscraper or porcelain globes.

There is also CSS3 in use - all headings have CSS text-shadow property.

Exclusive reels

I am not into fishing. my family used to own some ponds but still - I don't like fishing, I never have and never will. And definitely I wouldn't pay more then $2000 for a reel.

Dutch company produces "exclusive" reels and their website gives that impression. Website is really simple - background quality image, obvious navigation (with animated drop-down) and well laid content do the job.

This week's collection of websites for WI has been coincidentally grouped by country of origin. Last week I found some nice websites from Germany, Sweden and Australia. There is also one from US but I will describe it at the end of this entry.

"Zee Germans"

Design made in Germany

The title of the website is self-explanatory and the showcase is broken into categories (web design, gfx design, etc.). Typical to the Germans - Ordnung muss sein - and that has been achieved by grid-based layout. Typography and combined with the darker gray text make the content easy to read.

The most interesting feature is the ajax-based "lazy loading". Once the end of the page is reached, new content appears. Looks like an alternative to paging for me.

Moving Line

What makes me that I like that website is the simple and clean layout incorporated with the contrasting colours. Beige background and black elements with white and light gray content work really well. The details page for projects is equipped with the image carousel and show/hide content.

Mammut Medien

Coincidentally, the last German website it this showcase uses similar colour palette as the previous ones. Beige (or ecru?) background and dark gray content with additional blue. Works fine for me. The typography is also worth attention where chunky headings use Cufon as font replacement technique.

What personally annoys me is the exposure to social medias - some page have to many of those buttons.

The Swedes

Destination Skelleftea

Really nice and clean website could work even better if the language selector was more obvious. It took me while to locate and click that tiny flag for English version. OK, no more ranting.

The best thing about that website is the main navigation related to the activities that you can actually do. Nothing explains more like "See", "Do" or "Travel". Each of the main sections has its own dedicated colour for the heading and the sub-navigation, which is strictly related to the selected section (just see Eat or Travel). The interesting feature is the weather forecast panel that says "right now" for the current weather state.

Thomson Interactive Media

Looks like beige (or ecru) is quite popular. This interactive media company from Skelleftea (^) uses similar colour pallet on their website as described above the German ones. The layout is good organised and usage of the white space makes the content easy to read (at least for me).

What I find interesting is the sticky search form and big slim headings (Cufon as font replacement solution).

From Down Under

Let's move on to the outer location, Oz.

Charles Elena Design

This one-page website has quite unique and good looking layout. Use of nice graphics, colours (white, red, gray and black) and scroll-to (hello jQuery) functionality gives the impression of one consistent flow. What also looks good is the sticky header with the logo and main navigation.

FOX Classic

How to make website for classic movies channel more interesting and cool looking? Get some nice stills from the movie and get them working as full page background slideshow. And don't forget to include the picture of some lovely ladies and bad-asses (like Clint Eastwood smoking cigar).

Stills from the movies or movie related artworks are also included as page background when you view movie details. All combined with dark colours gives you the impression that you deal with something classic.

I'm (not) afraid of Americans

Joyent

The reason why I chose this website is not the layout and design. Can say that website is well-designed and the effort has paid off. The real reason is the interactive info-graphic (see "technology" section) done by Dave Shea (guy needs no introduction if you are into web standards). Normally I would expect flash over there but everything is HTML, PNG and JS-based. Nothing to add - just love it.

In the meantime Dave also found out, that PNG transparency support in IE8 still sucks.

Another Tuesday and it is time for another (eight) Weekly Inspiration post.

White, Gray and Blue

Mila

Let's start with a website from a country that might be not well-liked at the moment - the Iceland. Searching for some volcano footage led me to website of Iceland's telecoms company. I don't want talk about volcano any longer so let's focus on the visual aspects.
The layout is quite simple and colour scheme (white, light and dark gray, blue) works nice. The sub navigation on content pages also looks nice but the good impression is ruined by the stock imagery.

Altitude

Altitude website also uses colour scheme similar to Mila. Website is based on the one-page layout with fixed header, where main navigation items trigger "scroll-to" functionality. Letters from logo are nicely combined into a background on the left-hand side. All effects and AJAX are handled by jQuery.

The Contrast (and some Italian imagination)

Three websites below use contrastive colours to distinguish the content. The colours palette is a little bit different in those three cases, but contrast does the job.

AD Creative Group

The white and very dark grey really work well on that website. The top section features nice carousel and the bottom one information about the projects. That section uses AJAX-loaded content with show/hide functionality.
What really looks nice and fancy are the two tabs at the top and at the bottom of the page (bottom one has fixed position). Once clicked, they expand and reveal the content.

Amanda Wakeley

Here contrast works really well and on some pages is based on the diagonal motive featured in logo. The bridal section looks the best in my opinion where jQuery carousel is combined with the slideshow.

Render Wave

That website also uses contrastive and calm colours but what really caught my attention is the massive slider on the landing page. The slider uses 100% width of the screen and the enlarged element is aligned diagonally giving the impression of the perspective. Well, Italians have some imagination :)

Let's have some wine

Jax Vineyards

This is another one-page layout website in today's showcase and also interesting. Show/hide content functionality nicely works on that background. Background is changed (appears with a transition) once different type of wine is chosen. What also looks good is the typography and dropdown for wine selection.

In today's Weekly Inspiration post: good looking forms and some interesting layouts.

Let's start with forms. Three examples below have nice and chunky input fields that definitely attract the attention.

Kontain

The concept of sign up process is spot-on. Three clearly marked with different colours fields make the process really simple. All graphics are combined into one sprite image (that decreases the download time and number of requests) but the text above the fields should be plain HTML in my opinion.

tinysong

tinysong allows you to share songs (from grooveshark DB). Nice and chunky search field is combined with the search button and placed on cute background.

Guzzle.it

Guzzle.it features nice configuration panel hidden behind the sliding container. Nice and clean form with very obvious headings and smooth looking input field and topics configurator. The sign up form also looks interesting with tool-tips for each field giving the requirements. The colour scheme also looks interesting.

Let's move on to some examples with nice layouts.

HWO Architects

HWO Architects have simple and clean layout with the dark colour scheme. Landing page contains jQuery slideshow of projects while project details page features flash slideshow (that could have been done in JS as well).

Pool

This is another Dutch web design company in this series of posts. The name of the company and the full screen layout just play perfectly.

Frozen rails

There are four things that I like about this website: name (wonder why?), logo, layout with those grid lines and dark colour scheme.

Another week has just passed by so it is time for Weekly Inspiration#6.

Opal Clocks

The full screen background slideshow with half-transparent header just works perfectly on that site. Half-transparent header also appears across the whole site. My first impression was that site is built in the Flash but surprisingly not. The slideshow is based on the jQuery UI library and jQuery Supersized plug-in. The footer also looks fine displaying current time for major cities across the world.
 

Conway Anderson 

Conway Anderson's portfolio is a really simple grid-based website. Big header is followed by nicely arranged list of works with fading transition for each project item.
 

Work Life Balance 

This clear example of grid-based website which I really love, but I can't understand why it is built in the Flash. The website is not heavy on the graphics and multimedia and could be easily based on the HTML and CSS with jQuery or other JS framework to replicate the Flash style and behavior (i.e. single page layout and effects).
 

Siegelwerk 

Now we have some German stuff - simple, clean and practical. In other words - "Ordnung muss sein". Obviously grid-based website is equipped with nice headings for each section. There is also Flash in use but in this case it is understandable - project overview is transitioned to the main video. 

Patrick Monkel 

This is another clean and simple portfolio website. Minimal colour palette works nice with pattern in the background. The details page for projects also looks nice showing different level of details. The work itself also looks interesting.

Tobias Ahlin 

This is last portfolio website for today's entry but very interesting. The slideshow is followed by nicely arranged list of projects which can be filtered by type. Project details page is also well laid - bigger image, detailed information and nice tags on the left-hand side. My favourite parts are Profile section and blog. The profile section is just sliding div container with contact information and lovely image of the earth with pin. The Blog is also good-looking - posts are arranged as sheets of paper or post-it notes with nice typography and the blueprint background for code snippets just look awesome. Definitely, one of my favourite websites in terms of look and feel.
 

The Mushroom Company 

Now let's end the post with something strong. I don't know if those guys ate some "shrooms" during the design and development process, but the whole website looks insane. In a good way. In old days (up to 10 years ago?) that website would be full flash and even now it gives the impression, that it is full flash website, but it is not. It is full HTML/CSS website with jQuery equipped to do the AJAX and transitions for the main elements. The layout is fluid and uses 100% of the browser width. Presented work (randomly on the landing page) also looks well and I have to say those guys did and do really nice job.

Regular posting is back (Well, I hope for it). While ago I started publishing "Weekly Inspiration" posts but due to some circumstances I was not able to maintain that schedule (moving out/in, no internet connection, holidays). So let's start with the fifth post in that section; below websites that caught my attention during this week.

Full image background

Sven Prim

What I like about this website is the full photography slideshow (done with jQuery) as background. The work itself is also interesting.

Adena Internet

Dutch web design and development company also has nicely blended full background image on their website. Simple design is combined with extensive usage of jQuery.

Seventy Two

Another Dutch web agency that put full background image on simple and clean website. Cufon is also used as a web font replacement solution.

Well designed and simplicity

Two examples below are really well designed in my opinion.

Eneco

Eneco website features nice colour palette and big drop-down menus with nice content fading effect. The site map in footer is also nicely presented giving the access to all areas. Website has been designed by Erik Spiekermann's agency.

Malcolm Reading Consultants

What I like about Malcolm Reading Consultants website, is the simplicity. Simple navigation with drop-down menus is combined with the jQuery slideshow. Also the content shown on the sub-pages looks also impressive.

Two websites below present simple and clean layout with easy to read content.

HDcoding

Vignette

One page layout

Last two examples are based on the one page layout but opposite design directions.

Jeroen Homan's website uses strong typography and slightly grungy colours, Small.fi on the other hand uses a lot of graphics and jQuery. The best feature is the fixed header with neat login form. 

Jeroen Homan

Small.fi

It's been a very busy week for me, mostly because of the relocation from my current residence, but I've managed to bookmark some websites.

I could not resist and I decided to start with Fair Trade Clothing. Lovely website that puts smile on my face. Apart of the nice picture of girl on the landing page and the colour scheme, product images gallery makes that website interesting. Image zoom in/out feature is based on two jQuery plugins: slider and draggable.

 

The next one is Online Jaarverslag. Website of a Dutch company that has something to do with PDFs and website (I think). I like the one page layout incorporated with jQuery scroll-to plugin. The contact section is nicely combined with the form and sliding google map. Apart of these, colour scheme is very calm.

 

Super User Studio. Clean and simple - that's what I like. I have nothing more to add.

 

Now let's have some pictures as a full background, half-transparent layout and some nice pictures in photography section. That can be found on bressane.

 

With small delay, here comes the next "Weekly inspiration" post, so let's start.

Last  week I found some interesting and good looking websites with nicely used jQuery:

SPD Austin - simple and clean layout with interesting use of jQuery on the landing page for projects description

Momkai - quite unique yet simple and clean layout; very creative usage of jQuery to show details of listed items. All that gives you impression of full flash website but everything is done in xHTML, CSS and jQuery

Jay Hollywood - nicely used carousel, that fits on full width of the screen

Jarred Bishop's tumblelog - a nice example how to use CSS background-position: fixed property

I like the following websites for the their simple design and palete of colours:

Hex

Oliver James Gosling

David Salvatori

Websiteburo

The next website represents out of the box layout, which is based on colorful circles; very interesting stuff but some people might find colours annoying:

Curious Generation Group

And finally the last website - A Design Film Festival 2010 - website that features interesting, simple and horizontal scrolling layout. The navigation is quite intuitive and jQuery scroll-to plugin is used for horizontal sliding. While horizontal scrolling is a subject of some discussion regarding usability, I find that website very interesting

Enjoy your browsing!