webexpedition18 » Articles | webexpedition18

Design Inspiration Dose No.6

Nikola Lazarevic — Sun, 20 May 2012 15:21:50 +0000

It’s time for Design Inspiration Dose No.6. New inspiration dose brings a collection of graphical images that I’ve stumbled on the internet over the past week. If you want to share your graphics inspiration, just send us email with the link where you found it, or simply use Twitter.

Broadcasting

Kick-Ass Sweater

Highway Grid

Space Oddity

The Letters Poster

iSwissTool

Offscreen Magazine

100 years past

Flash Fiction

Flyers for Newspepper

History Swiss Graphic Design, Wohnbedarf

Escape Awards at the Tate Modern by Stylo Design

COFFEE SUPREME Take-out cups

stonefox records

Be Vintage

Santamonica by Mark Brooks

Alarm Clock

Morning without coffee

Fauzzi

Milano Coffee

Florence on my mind

Nikola Lazarevic — Tue, 15 May 2012 18:54:45 +0000

Without new experiences, something inside of us sleeps. The sleeper must awaken.

Have you ever been to Florence? Whatever your answer is, you should go there!

Florence is the capital city of the Italian region of Tuscany. The city is famous for its history, culture, Renaissance art and architecture, monuments, numerous museums and art galleries. Actually, the whole city is one big museum.

I’ve been there once before, way back in 1996, and after 16 years I was lucky enough to visit Florence again.

Ken Kaminesky, a good friend and client, invited me to Florence, to finally meet, after 2 years of working togehter. WOOHOOO!

Hanging out with Ken, walking down the streets of Florence and discovering all the hidden treasures that city has to offer, was a complete joy and wonderful experience. Grazie Ken!

I was also lucky to meet and spent great time with, Erica Donolato and Michela Simoncini (Tuscany Tourism Board), and Dave and Deb of PlanetD. Hope to see you guys again!

Piazzale Michelangelo, that sits on a hilltop in the Oltrarno district of city, is a famous square with a magnificent panoramic view of Florence. The panorama embraces the heart of Florence from Forte Belvedere to Santa Croce, including the Ponte Vecchio, the Duomo, Palazzo Vecchio, the Bargello and the octagonal bell tower of the Badia Fiorentina. Beyond the view of the city itself are the hills of Settignano and Fiesole.

Ponte Vecchio, the oldest of Florence’s five bridges (the bridge first appears in a document of 996), is one of the city’s best known images. It was destroyed by flood twice, in 1117 and in 1333, and severely damaged by flood waters in 1966. During WWII the Germans destroyed all of Florence’s bridges other than the Ponte Vecchio and it was a direct order from Hitler to spare the bridge.

Next stop Rome

μslider courtesy of musings.it

Design Inspiration Dose No.5

Nikola Lazarevic — Sun, 13 May 2012 17:25:12 +0000

It’s time for Design Inspiration Dose No.5. In this issue you’ll find a collection of graphical images that I’ve stumbled on the internet over the past week. If you want to share your graphics inspiration, just send us email with the link where you found it, or simply use Twitter.

19,47 by Metric72

Valerie Jar: National Park Stamp Icons

EF – Live The Language

Fruita Blanch

The World Is Watching

13 Wives : Posters

Go West

Provocative Piano Volume II (1961)

The Muted Minute Before Disperse

A Grotesk love affair

The Guardian

Inception

Adults only

AIC: Concepts

grandpa’s smena

Useful CSS3 Tutorials and Techniques

Nikola Lazarevic — Mon, 07 May 2012 17:00:33 +0000

In this post we have compiled some useful CSS3 tutorials and techniques. Check out some of these fascinating skills and see if you can replicate the functionality in your own website. Enjoy!!!

Pure CSS3 Piano

A classical piano made in pure CSS3. This piano also includes a menu including a search field, a drop down, tooltips and a full contact form that is just ready to work!

Texturise Web Type with CSS

As newer CSS properties, such as text-shadow, gain traction, there’s no limit to what can be done with web type. Trent Walton from Paravel goes a step further by texturising it!

Code a Set of Animated App Store Buttons With CSS

This project is super simple, so even if you’re a complete beginner, you should be able to follow along. We’ll learn how to use some fancy techniques like how to incorporate icon fonts into a design and how to insert objects using pseudo elements.

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

By now, hopefully you’re familiar with the use of the :before and :after pseudo-elements in order to do some interesting effects with CSS. Here I’m going to show you how you can create a simple ‘stacked’ look to some images.

Fluid CSS3 Slideshow with Parallax Effect

In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides.

Create Your Portfolio Gallery Using HTML5 Canvas – Tutorial

In this tutorial we will build a photo gallery and enhance it with html5 canvas and css3 transitions. The grayscale “copies” of the images are created with canvas and we use pure css3 for the smooth changes.

Understanding the CSS Display Property

One of the most powerful & useful properties in all CSS is, without a doubt, the display property. And yet, it is also one of the least well known, especially by those just starting out with CSS. In this post I’ll try to shed some light on this little gem.

Code a Fantastic Animated Circular Thumbnail Gallery With CSS

Today we’re going to mix up the boring old standard image gallery by turning it into a series of animated circles. Along the way we’ll learn a ton of helpful CSS knowledge that will help you in all manner of future projects.

Quickly Build a Swish Teaser Page With CSS3

In this tutorial, you’ll learn how to build a teaser page using just CSS, no images or even a Photoshop design. Many websites and upcoming apps gain great publicity from teaser pages, so this is a useful concept to add to your toolkit. Use it for any app or website that’s getting ready to launch.

CSS3 Loading Animation Experiment

In this article you’ll see an experiment about how to create a simple CSS3 loading animation. For this example, I’ll be using two CSS3 animations: one that fades the color for the triangles and one animation that rotates the whole design. These two animations, synchronized, will help creating a quite nice effect.

Login and Registration Form with HTML5 and CSS3

A tutorial on how to create a switching login and registration form with HTML5 and CSS3.

Type Study: Techniques for Using Novelty Fonts

When used well, decorative, display, or handwritten fonts can make the difference in a design. We’ll take a look at a blog design, and examine techniques for swapping standard fonts and novelty fonts to make the design more … well, novel.

Direction-Aware Hover Effect with CSS3 and jQuery

How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.

Design Inspiration Dose No.4

Nikola Lazarevic — Sun, 06 May 2012 16:30:47 +0000

Design Inspiration Dose No.4 is here! In this issue you’ll find a collection of graphical images that I’ve discovered on the internet over the past week. If you want to share your graphics inspiration, just send us email with the link where you found it, or simply use Twitter.

Just you and the world by Victor Mathiuex

Knave, Verona Walls & Thieve

Signalnoise poster for THE THING

Advance, focus & shoot

SAoS – Project 52.21 – Superman created by Jerry Siegel and Joe Shuster

Poster Series

Camp Fair 2012

Hive

Ramsey Lewis – Sun Goddess redesign

Series. Alphabet

Amtrak Wi-Fi

Giro di Lombardia

Radar: Desktop Wallpaper

The Road

Eat Well, Travel Often

Jessica Taich: Yelp Design

Cape Horn

Cold tone/Warm tone

Jagermeister

Newspapers

The Time Machine

Helvetica Trade Advertising 02

Espresso Republic

Kodachrome film is seriously at the end of its life — again

Ayrton Senna x McLaren

The Fashion Runway and Web Design

Roy Keisari — Thu, 03 May 2012 16:10:05 +0000

The fashion runway features works from the greatest talents around the world, coming together to peer into the future, and discover the trends, fashion hits, and fads which will grace the windows of retail stores in the upcoming seasons. In runway fashion, the designers are always a step ahead of the general shoppers, featuring next season’s look. While most people are worrying about bathing suits, they have already put the finishing touches on their scarf designs and have their manufacturers churning out rain boots for the following spring.

While web design is a far different world than the fashion industry, there are principles between the two fields which overlap and intertwine. In fact, web designers and companies that rely on high quality web design can learn a thing or two about branding from the people who design clothes and make runway shows worthy of being televised and covered by media outlets around the world.

Tip #1 Always Look to the Future

While most businesses in theory think they are always looking and planning for the future, in truth it can be very easy to get caught up in the here and now, and what customers are demanding in the moment. This might work in the short term, but in the long-term, looking ahead and accurately predicting what customers will want in the future is the key to long lasting success. When it comes to web design, this holds true as well. For example, if trends show customers will be shopping more online, or searching for a particular product or service more online, then web designers should adapt the websites they build to meet these needs. Making a website which offers an intuitive shopping experience is difficult, and may not seem worth it if most sales are still made in store, but the times are a-changing and web designers who are always looking ahead will be on their way to success.

Tip #2 Never Forget the Classics

The classic little black dress, although updated occasionally with a new neckline or fabric, is always present in the fashion industry. The same should hold true for web design. Certain aspects of web design should always remain constant so that visitors and customers are comfortable and feel in control of their online experience. Ensuring that arrows, links, and other directional design elements are noticeable is a great example of classically good web design. Also, keeping things simple by avoiding flash, neon colors, and other loud elements, except in very certain situations, is also key.

Tip #3 Only High Quality Makes the Cut

One thing that is true for any designer that makes it big in the fashion industry is there insufferable search for the best quality materials to produce their goods. No matter how stunning a design, it will only be as good as the thread and fabric used to create it. Using custom fonts, high resolution images, the best colors, and more can really make or break web design. Web designers who are interested in creating a website which will last take the time to invest in the best for their designs.

Typography Design Inspiration – 30 Stunning Examples

Bane — Sun, 29 Apr 2012 09:31:54 +0000

Typography is the art and technique of arranging type in order to make language visible.
The arrangement of type involves the selection of typefaces, point size, line length, leading, adjusting the spaces between groups of letters and adjusting the space between pairs of letters.

In modern times, typography has been put into motion in film, television and online broadcasts to add emotion to mass communication. Furthermore, typography has also been used for different graphic designs for print advertisements such as poster printing, postcard printing, flyer printing, etc. for a more effective visual presentation.

We love typography, see it as art, admire the boundless creativity and inspiration that it has to offer, and decided to introduce a small part of it.
We chose a combination of old and new works, most of them are so called text based imagery and digital text art typography. What is your favorite?

We would love to hear your opinions and impressions, so feel free to express your thoughts by commenting.

Enjoy!

37 Posters by Jerod Gibson

Adobo Magazine Haagen Dazs by JWT

Brick and Mortar by Ferdi Dick

Cello by xnexno

Cholayil Medimix Soap Assembly line by Creativeland Asia

Dairy Farmers of Canada Cheese Rolling Swiss by Taxi

Design no Cafe by Lagazzi

Greenwich Pizzas Sign by Publicis Jimenez Basic

I Love Typography by Kelmeister

Johnny Depp Typography by MoonieTenshi

Just the way you are by mn9x

Lyric portrait 2nd attempt by cris wicks

Mint Museum of Toys Tin Toys by Y&R

Orange SMS by Y&R

Regaine Thinner by Clemenger BBDO

Slash by JeffyJeff

Something Terrifying by Kyle Kargov

Spider man by rodoalarcon

The Coolest Typography by XcyanideDreams

The Shining by Chachava

This is me..exquision. by Exquis!on

This is Your Life by Teakster

This LOVE by MufuSlash

Tiger by PracticalPhotoshop

Transformers by Chris Llyod

Water Typography by BTHOT

What is ART by IrvingGFM

When the Alzheimer comes, sweeps by Martin De Pasquale

Wonderland by Foxesque

Your Favorite Cuisine is Salt by whatshername13

Design Inspiration Dose No.3

Nikola Lazarevic — Sun, 22 Apr 2012 15:45:38 +0000

It’s time for this week’s Design Inspiration Dose No.3! In this issue you’ll find a collection of graphical images that I’ve stumbled on the internet over the past week. If you want to share your graphics inspiration, just send us email with the link where you found it, or simply use Twitter.

English Indie Night. Poster by marindsgn

Poster

Suzuka Display

I heart adaptive web design

Montreal Meets: MMTWO poster

Emilia-Romagna delle Differenze

Salt & Pepper Cell

COSTA CHICA

Atari 2600 – Retro Poster

Jazzdor Strasbourgh-Berlin

ALSK

Tycho At The Troubadour Poster – Tycho / ISO50

David Gray Chicago gig poster

Zermatt

December 16, 2010

MS-Dos.

La Braye Dunes

Good Trips

Good Sense Outfitters

100% Chocolate Cafe

37 fred perry x lomography la sardina camera

20 Websites Using Infographics

Katty Barnes — Wed, 18 Apr 2012 15:30:07 +0000

Infographics is a visual representation of information. Designers often use it to explain complex things in a simple way. For many years infographics could be found in magazines, brochures and other printed materials, but now it’s becoming a part of the digital world.

By infographics we mean maps, diagrams, schemes and other methods of data visualization. Actually, almost any combination of text and graphics could work well, and a successful infographics is the one that makes things clear and easy to understand.

If you think that your website could benefit from infographics, but you need some inspiration before you get started, here are some awesome examples of how infographics make websites more effective and user-friendy.

As you may guess, it takes time and efforts to create infographics that are not confusing, but well organized and informative. So we believe that the more sources of inspiration you have, the better.

www.pointlesscorp.com

www.ipolecat.com

golivebutton.com

www.skillsfactory.in

www.head2heart.us

www.prowebdesign.ro

www.ericbarse.com

www.chappybarry.com

www.amazeelabs.com

launchfactory.org

scandalousdirt.com

www.clayant.co.za

www.bikingboss.com

urbaneo.fr

www.charlieprod.com

www.lugin.pl

www.sleekdesignstudio.com

www.jorgerigabert.com

mintdigital.com

melonfree.com

Design Inspiration Dose No.2

Nikola Lazarevic — Sun, 15 Apr 2012 16:11:54 +0000

Design Inspiration Dose No.2 it’s here, bringing you a collection of my favourite graphical images that I’ve found on the internet over the past week, to give you a dose of creative inspiration. If you want to share your graphics inspiration, just send us email with the link where you found it, or simply use Twitter.