Vanderpol's mysteries

Week inspiration #08

admin — Mon, 08 Mar 2010 09:34:47 +0000

This post is part of a weekly series of posts showing inspiring websites. I have changed the initial concept and decided to also write a short critic on them, from a webdesign point of view.

Webdesign

Lofts at 136

Very neat presentation for student housing. The first page illustration is probably attractive to the target (parents and students).

Giancarlo Fajardo

That´s a real header ! Half the screen´s height

I like the the color scheme and typefont, the logo, the mix between handdrawing and digital techniques. However a bit of animation and of Jquery wouldn´t have hurt…

http://hugsformonsters.com/

Joe Lifrieri has achieved a high personalisation of his wordpress blogg,

with many illustration (facebook logo and so on) so we are immediately taken into his own universe.

Imaginaria Creative

Soft shadows, transparencies and subtle Jquery transitions. Well done !

The Case study carousel is really neat and the color palette (earth like) is well by completed with a dark blue.

Stockholm Jazz Festival

Very minimalist, with big bold typefont, and an original navigation (top right),

this website makes it really easy to find the info you need regarding the festival.

In addition, the dynamic countdown to the festival is a very good idea, and more effective call to action than a simple date reminder.

The Peach Design

Both graphic and programming skills rayonnate of this website, as well as a good sense of humour. Everything is taylor-made, nice icons, typefonts, …

The carousel is ENORMOUS and pictures are big and beautiful. And apetizing website….

We Graphics

The subtle water colors, shades of greys and background graphics give this website a very light and pleasant feeling, as well as craft made / homemade.

The accents colors, turquoise blue, orange and green are very visible and access to the main functions is instinctive.

The mix between seif / sans serif is very well balanced and makes it more intersting.

Plus the content of the site is unique and great quality freebies and ressources.

Some videos sometimes enhance the content, with brush making process and so on.

Tutorial #01 Typography

admin — Mon, 22 Feb 2010 09:48:04 +0000

Simulating typography printing problems in illustrator and photoshop is really easy. You can read the whole process below and download the source.

There are about 15 steps to go so let´s start in illustrator.

I recommend a fat typography with Serifs (they give all the grace to the design). In my case I went for BernhardModernStandard, in like 50-60 points size .

Avoid typos like Bodoni, the effects we are going to apply will make them invisible.

But the typefont should not be too large either like Impact.

Then, remove the filling black color. So that you have a black stroke and no filling color.

Then go to menu Object -> create outlines

Now you have separate letters to manipulate.

But before applying our effects we need to rasterize them.

Object -> rasterize. Choose hight quality 300dpi

Now let´s go for the efects.

Choose “live trace”.

…with the following settings: Choose “black and white” in the menu, uncheck “fill” but keep “stroke” checked, and then enter the same figures.

Look in the preview : your effect has to remove some inside parts of letters (like in the “A” or “E” letters). If not, maybe your typo is not appropriate or your settings do not allow that.

But with my settings it will work, and you should get this:

You can stop here and export your file into JPG, or open photoshop and copy paste your layer, and play a bit more.

Duplicate your layer and move it with the keyboard arrows several pixels to the right and to the top.You can add a red color in the layer effects as “filling color”

It starts looking good… seems like the printing is not aligned. Let´s continue.

Duplicate your black typography layer once more (ctrl+j). Put it under the original layer, and move it several pixels to the left and to the bottom, so that the letters cross each other. Choose a cyan this time.

I have decided to hide the original black layer so that we have a very big contrast between red and blue.

Then you can add textures and water colors brush strokes using very bright / saturated colors, like this.

And you´re done with it. Thank you for following this tutorial.

Download source

No related posts.

Week inspiration #07

admin — Tue, 09 Feb 2010 14:16:54 +0000

This post is part of a weekly series of posts showing inspiring websites. I have changed the initial concept and decided to also write a short critic on them, from a webdesign point of view.

Webdesign

http://agamicreative.com/

I really like the water color work, the color shceme and the different quotes and sayings (Albert Schweitzer…). That looks human, organic and very creative. At the same time the text readability is good, so the balance between creative graphics and regular type fonts works really well.

David Hellmann

The site features a lot of small details, like the jQuery box and labels that show up on roll over the portfolio pictures, or the photo realistic bicycle, mac, and mouse in the footer.

Playful

Full flash, Ultra kitsch, with fluorescent lights and vintage photos…

I love the use of Bodoni typefont, like fashion magazines (yet hard to read when too small).

Polargold

I like the big typos and their changing colors on roll over.

The minimalist and fresch graphics are really sustaining the content (here pictures).

However, the effect on the menu fold-unfold can be quite irritating after a while, when it is like doubl-boucing, which sometimes happen as a side-effect.

Redvelvetart

The overall design “handdrawn” is super cool and visually attractive, and the funny types are easy to read. I love the icons, they are fresh, understandable, and really adapted to independant designers.

They haven´t forgotten essential functions like search engine and the possibility to sort results, which is useful in the shop section.

A lovely design !

Riot Industries

Using CSS and JavaScript libraries, this website is very animated and interactive. The mix vertical navigation / horizontal portfolio is surprising at first, but then really easy to use. Maybe arrows on the sides (like left / right) who have been an additional navigation possibility enhancing the experience ?

The portfolio shows the work in high quality, and one can appreciate the quality of the work.

A nice visual experience.

Sensis Studio

There is risk at extensively using shades of grey in a design. Dullness. But Sensis Studio managed to look classy, creative and inspirational, among others through the use of vectors, varied typefonts (size, family) and nice layout.

The readability is good, and the strong contrasts emphasize the most important areas of the site.

It looks very professional, but not att all dull or boring.

Simplicity travel agency

The grungy design adds up interest in this travel agency design and really stands out compared to other sites of the same category. Indeed they are usually very slick and neat. However, one could wonder how the prices that are integrated in Jpegs can be dynamically updated by non designers teams ? Maintenance was obviously not the main concern here.Visibility is also a bit harder on page featuring road maps… an idea for a V2 ?

But overall, it stands out in the constellation of billions of cheap travel agencies websites, that looks more like link farms / lists than anything else… so this one is refreshing.

Toggle

A monochromatic design, very fresh and very pleasant. Naturally, the use of an aquarelle / water painting blue texture reinforces a lot the impression of freshness.

The hand drawn illustration add interest opposing to the slickness of the logo and the navigation bar.

There are some nice details to discover here and there and nice fade in transitions in the portfolio, even though you do not plan to buy a website…

Your Auxiliary

This one is really experimental… the background is an enormous tile (like 4000px wide or sthg) containing all components. Clicking on the navigation items is taking you for a stroll over a big content “map”. It is like Google Earth, but in 2D… but it works !

The whole design is very graphical, minimalist and beautiful. There has been a real grill design effort, though it looks more like a huge illustrator print document with interactive links, but is is more than that. The designer is probably used to the rigor of the print industry, and the restrictive color palette (orange / blue / navy blue / white / grey) is well chosen and conveys its message effectively with minimum efforts.

It is a good planned and organised design. It is rare to see something like that. If you are looking for a UFO it is there !

Others

okdeluxe XMAS card 2008 from okdeluxe on Vimeo.

Week inspiration #06

admin — Mon, 18 Jan 2010 15:23:54 +0000

This post is part of a weekly series of posts showing the most inspiring images selected from many sources, from architecture to webdesign, fashion, typography and many others. Feel free to contribute to the posts with your own work or your sources.

Webdesign

Some nice webdesign from around the world…
Benekdesign

I liked a lot this site for the horizontal navigation ! That is really innovating !

It is a real pleasure to navigate through the project in that way. You have to try it…

Birdbrain

A neat website, in the pure 2.0 style, with the highlights and shadows “a la Apple”. Perfect for a An Iphone App…

Ceranco

A flash website with great 3d animation. It is fun to navigate geographically into a topographic vector map. And you really want to discover their catalogue.

Cerotrees.com

A simple but effective website showing nice logos and artwork. The contrast between black and vivid colors makes them all the more enjoyable… and they are beautiful.

Dvein

Impressive use of flash. The left carousel is really an interesting navigation device in itself. The intro ribbon is superb. However, the cards displayed in left menu have sometimes texts that are not easy to read…

But the overall feeling is fluidity, freedom and it feels great to play around and discover some graet artwork.

Geoelementsdesign

An interesting mix of handwritten typefonts (like the LaCarte in the menu on the top right corner), and sans Serifs / serifs… though the use of 7 different fonts is theorically not recommended…

But it works. Readability is excellent and the website is fun to look at.

Peter Pearson

A flash website enhancing Peter´s portfolio… his nice pictures are not in the least disturbed by the background colors, and it makes it more interesting than the traditional black BG / white picture borders of many photographers portfolio. Its subtle gradients and shades makes it really pleasant to the eye.

Three85

One of my weeks favorite ! Really minimalistic design, but still attractive with the use of the big type, the use of turquoise to highlight the rubrik´s title and of the “+” symbol to mark articles.

Travisisaacs

A trendy website using a vintage gradient like James White or Abduzeedo. Clean, neat and professional.

Think up

The website has a photo-realistic / sketch book feeling, not intrusive, that really enhances the creativity values of the company. Even though the representation of a post-it is nothing new, the general visual design is eye-cathcing.

UsefulSimple

I like a lot the flash animation, and the possibility offered to the visitor to play and toss around with a gravity effect the colored elements. Useless, but a lof of fun. The big letters of the description provides immediately a good explanation for the website´s goal.

Webdesign case study #03

admin — Tue, 05 Jan 2010 07:57:49 +0000

In this post, we are going to talk about the design of Inexor integration. As usually, I start answering a series of questions before going into the design…

Who is the client and what are they doing ?

Inexor Integration is a London Based company, specialized in bringing seamless add-ons for EPiServer CMS, like Flash video management, on-the-fly translator and many others.

Values of Inexor Integration

Technology, internet, specialists, innovation.

More about the design analysis in the Inexor Integration logo design case study.

Goal of the website

The website is a source of information about the products, so it should show in a very positive manner technical products (EPiServer add-ons), and incite to buy or try.

The visitor should quickly get detailed informations about the products, browse the products by category, watch some demos / videos, order a trial version, contact the selling team.

Mood board

The mood board I collected focusing on the client´s values: technology, EPiServer, specialists, Internet and innovation. And also products. So I have choosen leading and inspiring websites like Apple, Corel, Siba, Wacom etc…

Excerpt from the mood board

Insights from the mood board / benchmark

The designs are presenting a picture of the product, with a variation in colours (Adobe, Corel …) that follows the different products range (easy visual identifier). Big grafic / vectors / icons are used to enhance usability. Grid designs are very clear.

White / light colors are used as body background and dark grey / black regular and multiplatform fonts (arial, verdana) are displayed.

Last but not least, the product is always the star ! Catchy slogans, technical descriptions, high quality photos, subtle effects put the product forward and make it appealing to the visitors.

Technical requirements

This is a BtoB client, aiming at the EPiServer community : decision makers, developpers, and so on, so we can go for a 1024 * 768 screen resolution.

Initial sketches and wireframing…

The user lands on a start page showing all the different products Inexor Integration has to offer: translator, video module… On click, you are redirected to the template showing the full details to the products (video…).

You can see the navigation flow :

On the start page, we would have the products area, and also a column showing special offers, contacts, partners and various other infos, a header and a footer. It is always good to discuss the structure with integrators / developpers ahead of time, of time frames and feasability, to avoid any bad surprise.

Your team will tell you immediately if your sketch has to be modified BEFORE you sent it for client validation. This would prevent you to have your client validating a design your team cannot set up, and then to call your client saying that you cannot implement it. Preparation, anticipation and discussion are KEYS TO SUCCESS in webdesign.

So while talking with my developpers, we positioned our big blocks in the start page structure :

On the product page, the client would like to display more information, so there will be a left column, a content area and a right column.

Graphic design

There were two grids used to devide the design area (start page / product page), so that the structure becomes clear, more readable, easier to understand, as you can see in the screenshot.

It is both a great help for the designer, and the grid can be used to guide your visitor through your information hierarchy.

The grid system used on a product page

My suggestion fot those interested in grid design : Josef-Müller Brockmann´s book “Grid Systems” is the reference.

Regarding colors

The basic Idea I had was to use dark grey and wavy patterns in the start page and to use then a color for each product (red, blue, green, yellow…) but to keep the same structure and patterns, so that we can see the common root / parent on any product page.

As regards the fonts, I would use dark greys and blacks for regular text, and the regular blue for the links, so that it looks very familiar for the user and goes to the point.

A preview of the start page and some reworks / comments by the client.

Feedback from the client is fundamental. Without discussion, there is no design. So I have been changing a bit the mockup, and added here and there icons or items that would make the design a bit more interesting.

At the same time, I was designing the logo for Inexor Integration that looks like this :

I have always been keen on Myriad Pro, a very interesting typefont, with lots of variations. This versatile font would be used in the logo on the website, business cards and roll-ups too (I have choosen Arial on the website for normal text, as it would look really neat and pro – like a seamless integration).

The reworked version of the start page, featuring the logo, the social medias that could be developped in the future, and the expandable list of products.

And now we have the color variations of the product pages. Note that they have all the same structure.

Blue for the flash cms integration module

Yellow for the integrated translation module

Red for the integrated video module

As you have probably noticed, there is a product carousel in Jquery that was included in the left column so that the visitors easily switch from one product to the other, and a search engine, that the client eventually dropped.

Now, you can see the implemented inexor integration website online.

I hope you liked this post, and there will be more case study to come, so stay tuned and feel free to leave a comment or to read other related post.

Freebies #01: may 2010 be a good design year

admin — Fri, 25 Dec 2009 17:24:45 +0000

Happy new year to all of you ! I happened to play around in illustrator thinking of a 2010 so this is a freebie…

It was smowing outside, so I converted snowflakes unto vector shapes, and lots of colors, like the glitters on a christmas tree… The patterns are multicolor and overlap each other, being connected by their transparency and fusion mode. Anyway, I do not know how many vectors there are, probably several thousands ! Do not be afraid by the file.

You can play around with the masks and change texts or show / hide vectors, play with layer modes…

You can download the illustrator file here and play around for personal or professional reasons. It is not necessary to mention me as author but please only follow those conditions .
Would be fun to see what designer do out of it. Please refer to the link above and do not distribute it as is on other websites.

All the best to you, and may your year 2010 be full of colours and design !

Week inspiration #05

admin — Tue, 22 Dec 2009 13:40:07 +0000

Webdesign

Some nice webdesign from around the world…
Frozn

Experimental work

New experimental work from Joshua Davis

Week inspiration #04

admin — Wed, 16 Dec 2009 08:46:12 +0000

Webdesign

England Squash an Racketball

The Pixel

Gaphic design

3D Graffiti from Brad Schwede, Australia.

Typography

Yakov G. Chernikov (1889–1951)

The Fighting Téméraire tugged to her last Berth to be broken

Video

Experimental video by Hindra, seen on YouTube, titled “Humunculus”, conceived of and directed by Sam Stephens.

KonfaStockholm webdesign case study

admin — Wed, 09 Dec 2009 14:49:56 +0000

In this post, we are going to talk about the design of konfastockholm. As usually, I begin with going through a list of questions.

Who is the client and what are they doing ?

konfastockholm is a group of several congregations (more or less group of churches) in the region of Stockholm, Sweden. Every year, they organise seminars and confirmation session for teenagers.

This is a branch of the Swedish Church, a religious and non-profit driven organisation.

The target ?

Teenagers interested in becoming confirmed, and their parents too. People interested in getting more informations about the activities and details of coming/current/past confirmation sessions. The content will be in swedish, so no multilingual option is to be planned in the design.

In addition, the level of modernity of computer equipment is very high, so we can go for a 1024 px wide screen resolution.

Goal of the website – client brief:

The visitors are already interested in being confirmed. So this is not going to be about why or why not should a teenager confirm. Is is rather about getting info about seminars and extra activities (soccer, skiing…) and “easy booking”, as well as community oriented.

Perceived brand image

In Sweden, churches are perceived as being traditional, for “old people”, out of fashion and not really fun. Aditionnally, teenagers tend to divide the world into two categories: what is fun and what is not. Hence, our issue is to create a visually attractive and functional website. We will have to show that the Swedish church is a modern institution using modern tools, and that the seminars and activities proposed can be a source of fun and inspiration for the participants.

The targets

Teenagers tend to be impressed by graphic design/special effects more than by the content itself. Parents tend to be the opposite, and be irritated by fancy stuffs filling the screen.

So the challenge is to find a good balance between the two.

Mood board

A mood board is sometimes usefull to present and justify your creative routes to the client, or helping you in the creative process. I´ll just show here an excerpt from it, but basically, I collected many pictures from the Internet, about music, religion, youngsters activities labelled as “cool” (surfing, skating, …). You can see, among others some Jerome Bosch (14150-1516) art in the collage, famous for his imaginative and visionary religious paintings. If you are interested to read further information about mood boards, I suggest the article “mood boards are an essential step in design” by Ross Johsson. You could also look at examples of mood boards here.
Smashing Magazine posted recently a great article about collage.

Wireframing

Meetings with developpers and project leaders make the navigation flow clear. Then, transposing the flow and functionalities into wireframing sketches (in illustrator, word, paper sheets or whatever suits you best ) will make your graphic design task much easier, since you know where you are going.

An example of hand drawn wireframe done simultaneously during a meeting.

And the Illustrator version for the team, showing the navigation flow /process between the pages. This is very usefull to know embrace the different steps of an online inscription at once.

Inspiration

There are many websites aiming at teenagers, like video games, clothes or gear brands dedicated to surfing, snowboarding, extreme sports, comics and mangas, mobile phones, scooters, etc. Below a quick collage for inspiration.

KonfaStokholm had printed a very lively leaflet, with lots of abstract shapes, rainbow, stars, flowers, exploding in all kind of directions.

Graphic design

I really wanted to reuse this idea of explosion of colours and shapes, since:

It is coherent with the client´s ongoing print communication

It portrays inspiration, creativity, freedom which are important values for young people.

In Photoshop, I started playing around with my brushes and layer mode, to change the intensity of lights. I also used my vector collection to ad waves and threads. After a couple of hours, I finally had a result that was eye-catching.

Adding more “fun” to the design

The team got really enthusiastic about the visual design and the client too, so the idea was to go further with the concept and transpose it to other parts of the site, like in the footer, on the error page, or on the profile page and here and there as you can see below.

The title typefont was also changed, according to the client´s feedback, to go to the regular Aaschen-Shop bold, and not the curly one.

Flowers and bright colors were used to guide the eyes all along the selection and registering process, to avoid a dull page.

Another idea we discussed together with the developpers was to use expanding / retracting effect to show the form currently being used and hide the inactive ones, to avoid long and user unfriendly pages.

You can also notice that the orange title indicate the active form, while the inactive ones stay grey, to focus attention.

After a few adjustments with the client, we had our grafic design ready to go :

You can see also see it live or online

Thank you for reading this post and stay tuned for more design tips and case studies.

Week inspiration # 03

admin — Tue, 08 Dec 2009 10:20:26 +0000

Digital Painting

I bumped recently on a review on beautifullife blogg of slovakian artist Rado Javor and found his style very much “William Turner“ (impressionist painter ) like. The work on light reflection on water and clouds/smoke particularly impressed me.

So I decided that this week we would talk about them, instead of regular digital inspiration !

Below paintings by William Turner (1775-1851) – short excerpt from Wikipedia:

Although renowned for his oil paintings, Turner is also one of the greatest masters of British watercolour landscape painting. He is commonly known as “the painter of light”.

As you can indeed see in the following series: “The Fighting Téméraire tugged to her last Berth to be broken” .

“The shippwreck of the Minotaur”.

“Chichester canal ” (1928)

“The grand canal”

“The Battle of Trafalgar” (1823-1824)

Now it is Javor´s work, a few centuries later with Wacom tablet and computer technology (but apparently the same tastes for boats, history and drama):

“Susan Constant”

“Battle of Lepanto”

“La Rochelle”

“HMS Royal George”

What I also found remarkable in Rado´s work was his ability to make futuristic battle scenes look like the impressionist style and lighting. See that :

“Imperial Walkers”

Of course, the feeling of the late 70´s Sci-Fi star wars design and pre-digital age is surely in for some reasons. Probably some inspiration from legendary concept artist Ralph McQuarrie (is awesome good enough to qualify him ?).

This inspiration is felt throughout Javor´s work:

“Republic cruiser”

“Titan”

I had a great deal of fun writing this post and sincerely hoped you liked it. You can see below more inspiration articles, and I can strongly recommend you to visit the “Musée d´Orsay” in Paris if you are interested in impresionism, they hage a huge collection on display. Some marvelous Tuner work can be seen there too.