Vanderpol's mysteries

How I made my customized Iphone case

admin — Wed, 17 Mar 2010 08:59:47 +0000

A new website dedicated to Iphone fans willing to customize or create their own Iphone case… this is I Make my case

It is really easy to create your own design, using vectors and tools built into the flash online application. However, it is sad one cannot import one´s own vector work or pictures.

But this is really cool and you can start picking an artist (Joshua Davis, Chuck Anderson, Hannah Stouffer, Anthony Yankovic …), and then play around with their vector collection.

I had choosen Hannah Stouffer collection and played around for half an hour to end up with this :

Because I am living in Sweden (a place nobody can find on a map ?), the delivery got cancelled at first.

So amazon told me thet they could not perfomed the delivery :O

So I got a mail from a manager at Case Mate who appologized and say they compensate with a free bonus robust grey case (no kidding). So that was cool. I could make a present to one of the project managers at my office. hehe.

All in all, I recomand this service to any designer willing to play around and have an IPhone case that doesn´t look like a car´s tire…. though the application has limitations too.

Have a creative day !

IOGraphica

IOGraphica

admin — Tue, 16 Mar 2010 15:40:23 +0000

This is a wonderful application to discover ! Do art while using your computer !

Moscow designer Anatoli Zenkov has developped this wonderfully useless but nontheless unavoidable application. IOGraphica.

It is actually tracing and plotting you mouse movements… this one recorded my mouse during 2,1 hours.

Awesome !

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 !