Pour votre inspiration, je vous invite à découvrir l’univers coloré et cartoonesque de Krzysztof Roslan, artiste digital polonais.

Basé à Varsovie (Pologne), Roslan travaille avec la talentueuse agence Ars Thanea. Il intervient au quotidien sur les différents projets pour des marques comme Disney, British Airways ou Discovery Channel.

Pour cet article, je vais mettre en lumière ses créations personnelles, tout droit issues de son portfolio. On y regardant de plus prêt, on ressent réellement que l’artiste se fait plaisir et expérimente en créant toute sortes de personnages et univers. Ses créations colorées possèdent (presque) toutes une touche unique, basée sur des lignes franches et nettes.

Il vient d’ailleurs d’être fraîchement récompensé pour son travail, en gagnant un « digital painting award » pour le concours TEN de CG Society, avec son oeuvre « Target Ten ».

Morceaux choisis :

Que pensez-vous des oeuvres de Krzysztof Roslan ? Pour en voir encore plus, c’est par ici :

www.krzysztofroslan.com

Son blog : http://krzysztofroslan.blogspot.fr

Le rendez-vous incontournable des webdesigners à la recherche d’inspirants designs de sites e-commerce. Au programme ce mois-ci, une sélection 100% responsive webdesign avec 5 sites dans les tendances actuelles.

Responsive webdesign + site e-commerce = ventes optimisées

Souvenez-vous, grâce à une mise en page responsive, votre site s’adapte aux résolutions d’écran de vos visiteurs. Le principe adapté aux sites e-commerce permet de mettre en valeur vos produits et ainsi de faciliter la commande depuis un support mobile.

Skinny Ties vient d’ailleurs de publier un retour d’expérience après la sortie de son site responsive. Résultat 211% de vente en plus ! Jetez un œil au blog de Stéphanie Walter qui nous détaille l’analyse complète.

Les sites suivants ont très bien compris l’importance de l’adaptabilité aux supports, en développant une mise en page claire, simple et efficace quel que soit le périphérique de consultation.

Wootten

Spécialisée dans le travail du cuir, la marque Australienne Wootten s’offre un site propre et moderne. Le design est épuré, les photos détourées en jettent, bref un site premium pour des produits premiums.

Wootten sait également mettre en avant l’identité historique forte de la marque dans le choix des visuels et des couleurs. On regrette peut-être l’absence de vidéos pour montrer, tout en mouvement, le travail manuel et précis des artisans.

Zulu and Zephyr

Restons en Australie avec le site de la marque de luxe Zulu and Zephyr. Les fringues au style moderne vintage du site donnent le ton au design. Le tout présenté dans un écrin très épuré.

Harry’s

« Chaque homme mérite un rasoir de qualité à un prix honnête ». Je compléterai la phrase en disant que chaque site e-commerce mérite un design efficace.

Toujours propre et clair, le site d’Harry’s ne présente qu’un petit nombre de produits. Raison de plus pour bien mettre en valeur chacune des fiches détaillées, avec une belle photo du packaging, une description minimale et une bouton d’action « rapide« .

Une chouette réalisation au final, mais qui manque peut-être d’un peu de folie.

Zegna

Le site de luxe Zegna tire son originalité dans son zoning. En utilisant tout l’espace disponible à l’écran, il permet à l’utilisateur de se plonger un maximum dans les photos d’ambiances de la marque. L’addition des « blocs » de contenu en hauteur peut par contre légèrement perdre l’utilisateur un peu trop pressé.

Big Cartel Shop

Le faiseur magique de boutique en ligne pour les artistes Big Cartel lance sa première ligne de vêtements. L’ergonomie du site est basée sur du one-page, avec une présentation de la marque tout en image en haut de page, avant d’arriver sur un listing de produits.

Ici aussi, les photos de produits mises en situation, donnent la réelle direction artistique au site.

Pour conclure :

Comme de très très nombreux autres sites basés sur une mise en page responsive, on trouve de très nombreux points communs à ces différents sites : mise en page plein écran, larges photos, aplats bref de quoi être très lisible et efficace sur n’importe quels supports.

Que pensez-vous de cette sélection e-commerce ?

Coup de projecteur sur le travail du français Simon Daufresne pour cet 11ème épisode des webesigners à suivre.

En agence depuis le début des années 2000, Simon a débuté sa carrière en tant que graphiste puis webdesigner. Il est actuellement directeur artistique au sein de l’agence digitale Parisienne 5ème Gauche. Durant ses plus de 10 ans d’expérience, il a notamment pu travailler avec de marques comme : TF6, Toyota, Cacharel, Ruinart, Optic2000, Wilkinson, Darty…

Pour vous inspirez, jetez un œil à quelques créations de son portfolio :

@SimonDaufresne

www.simondaufresne.com

Je vous propose de découvrir le parcours et les créations de la talentueuse Hillary Coe, pro de la communication et directeur artistique.

Basée actuellement à Los Angeles, Hillary est directeur artistique et directeur de création associé chez TBWA Chiat Day Los Angeles. Diplômée du OTIS College of Art and Design en « Digital Media Production/Advertising », elle est spécialisée en communication visuelle, en branding, en publicité, en direction artistique en digital et social média.

Des compétences pluridisciplinaires qu’elle à pu acquérir au cours de plus de 10 ans d’expérience au sein de diverses structures. Travaillant sur des projets de communication à l’échelle mondiale et nationale, elle a notamment collaboré avec des marques comme Adidas, Visa, Activision, Mitsubishi, Aquafresh…

Ces travaux en agences ont obtenu une kyrielle de récompenses (FWA, Webby Award, Dope Award…) et de nombreuses citations dans les magazines spécialisés.

Je pense qu’après tout ça, il est temps de jeter un œil au travail si apprécié d’Hillary. N’oublions pas que ces belles réalisations publicitaires sont le fruit du travail d’une équipe entière ;)

Hillarycoe sur Behance

www.hillarycoe.com

(password : coe)

En tant que professionnels du domaine, les agences créatives surfent sur les tendances du webdesign pour assurer leur présence en ligne. Tentons de les décortiquer en analysant le webdesign de ces différents sites d’un peu plus prêt…

Les croyances populaires veulent faire croire que les sites d’agences créatives sont le plus souvent mal réalisés. Il n’est pas rare de croiser une agence sans véritable présence en ligne ou avec un site qui ne reflète pas ses compétences. S’occuper de sa propre communication externe demande du temps et de l’argent.

Cependant en y regardant de plus prêt, on trouve de nombreuses agences qui possèdent les ressources nécessaires pour leur assurer une bonne présence en ligne. Je pense notamment au site de Fantasy Interactive (FI), qui reste pour moi une très bonne référence. Au delà de cette vision idéaliste, chaque structure possède sa stratégie et sa propre vision des choses. Le plus dur pour vous (mais le plus fun aussi) est de le mettre en scène sur le web.

Si vous êtes en quête d’inspiration cet article est fait pour vous ! En suivant régulièrement l’évolution des sites d’agences créatives, on peut rapidement en conclure qu’ils évoluent pour la plupart avec les tendances actuelles du webdesign.

Quelles sont les grandes tendances ?

En tant que professionnels de la communication et du web, les sites web d’agences créatives doivent en théorie être innovants et doivent montrer l’exemple. En véritable « trendsetters« , on peut d’ailleurs facilement identifier les grandes tendances actuelles :

• Un webdesign one page
• Une mise en page adaptative (responsive webdesign)
• De larges photos en fond de site ou en slider : parfait pour accrocher le visiteur.
• Un design « flat« 
• Site en pleine largeur : tendance qui découle tout droit du reponsive. Parfait pour une immersion totale sur tout support.
• Des effets de transparence : une caractéristique que l’on retrouve pour donner de la profondeur au design.
• Animations fluides en CSS3 et jQuery : un passage presque incontournable aujourd’hui pour une bonne expérience utilisateur.

Comment se démarquer ?

Suivre les tendances ou non, faites votre choix. Mais dans tous les cas, trouvez votre style, innovez, montrez ce que vous savez faire, révélez votre réelle identité !

28 sites récents, dans les tendances actuelles :

Nurun

Spektrum Media

Happy Studio

We Are Empire

Leeroy

Another Pony

Barrel NY

Bkwld

Rosebud

Ala

Struck

Sputnikcreative

Ony

Hotdot

Brenninkmeijer & Isaacs

I Shot Him

Smallfish

Element Creative

Yoke Design

Noe Interactive

Soft Facade

Archer Group

Engage Interactive

We are Impero

By Association Only

Online Department

Holler

Wallmob

Pour conclure

J’ai choisi ces 28 sites récents pour leur efficacité ergonomique et graphique et pour leur concepts qui collent parfaitement aux tendances actuelles. Ce n’est que mon avis personnel mais je trouve que les sites d’agences récents sont presque tous fabriqués à partir du même moule et ce n’est pas qu’une image ! La plupart des sites sont basés sur les mêmes types d’outils CSS et Javascript. Parfois je me mets à penser nostalgiquement aux sites en Flash qui proposaient des expériences inédites avec des identités et une culture propre.

Paradoxalement cette conception presque normalisée n’est pas une mauvaise chose. Les nouveaux sites sont enfin totalement adaptés à notre époque en étant parfaitement consultables sur presque n’importe quel périphérique. Au final l’internaute et le futur client y trouvent leur compte, en pouvant accéder rapidement et facilement à l’information.

Que pensez-vous de cette sélection ?

Coup de cœur de la semaine, je vous invite à découvrir le travail graphique de Mateusz Chmura aka Matcloud. Au programme, illustration 2D et 3D, design et typographie.

Une chose est sûre au sujet de MatCloud : cette homme est passionné d’art ! En parfait touche à tout, il travaille à la fois sur des créations 2D, avec une bonne dose de typographies maison et de l’illustration. Il utilise aussi avec la 3D pour mettre au monde des personnages orignaux. Il s’essaye également à la photographie, à la peinture et au dessin traditionnel.

Cette mixité fait de lui un artiste complet. Jetons un œil à son portfolio bien garni, avec cette petite sélection qui montre bien la diversité de son travail :

MatCloud sur Behance

Pour être toujours au top lors de la création d’un webdesign ou pendant le développement, je vous ai préparé une petite sélection de ressources fraîches et utiles à base de jQuery et CSS.

Les métiers de webdesigner et intégrateur (appelé plus souvent développeur front-end) sont aujourd’hui exercés en majorité par deux personnes différentes. En généralisant, on peut dire que cette affirmation est valable aujourd’hui principalement dans le monde des agences. Dans cette configuration, lors de la conception d’un projet, nous sommes souvent amenés à choisir un plug-in, une astuce, une ressources en ligne pour rendre notre site unique et nous faire gagner du temps.

Dans le but de vous aider à trouver les dernières ressources qui font parler d’elles sur le web, je vous propose une petite sélection. Au programme, du responsive, des animations, du fullscreen, bref de quoi réaliser un site dans les tendances actuelles. Inspirez-vous, testez et bien-sûr donnez-moi votre avis !

Sly

Sly est une bibliothèque basée sur jQuery pour créer facilement un effet de défilement. On pourrait, à première vue, le percevoir comme un effet cover flow assez has-been… Pourtant vous pouvez l’utiliser pour créer un défilement de produits par exemple ou encore pour un site en parallaxe.

Webdesign pleine page avec transitions

Un tutoriel très intéressant pour créer un site pleine page. Idéal pour une bonne UX sur écrans tactiles par exemple.

Flexisel

Un carrousel basique mais responsive s’il vous plait. Simple mais toujours utile !

Astuce pour animer un arrière-plan en CSS

Grâce aux animations CSS, gérez en quelques lignes une légère animation d’un fond d’élément HTML.

jQuery Plugins, bibliothèque officielle

Le registre officiel des plugins jQuery, récemment mis à jour. Toujours pas optimal d’après moi, mais tout de même bien amélioré depuis la dernière version. Pratique pour trouver LE plug-in adapté à votre besoin.

Séquence d’ouverture textuelle avec des animations CSS

Les animations CSS permettent de faire des choses vraiment sympathiques. Une preuve en plus avec cette petite séquence de typographies presque cinématographique. Tout est expliqué dans un tutoriel de qualité.

Snap.js

Snap JS permet de faire « bouger » le contenu principal de votre site, pour laisser apparaître un menu vertical à gauche ou à droite. Il suffit de pincer avec vos doigts ou bien de faire un drag avec votre souris.

Responsive Nav

Un plug-in Javascript « indépendant » basé sur aucune librairie, qui vous permet de créer un menu responsive. L’avantage tient dans sa légèreté et sa facilité d’utilisation.

Unslider

Un simple slider jQuery responsive.

Boutons de partage

La mode est aux boutons de partage en deux clics. Encore un autre exemple en CSS.

Pile de photo animée avec CSS3

Tout est dans le titre ! Plutôt expérimental pour l’implémenter dans un projet réel, mais le tutoriel est assez détaillé.

CSS Beautifier

Vous allez me dire « encore un outil pour rendre mon CSS plus beau ? » et je vais vous répondre oui ! Mais celui-ci fonctionne vraiment bien, il vous permet de formater correctement votre fichier en un clic et aussi de le ranger par ordre alphabétique par exemple.

Pour conclure, j’espère que vous trouverez votre bonheur parmi toutes ces ressources !

Les dernières tendances du webdesign sont dans les sélections mensuelles des incontournables. Ce-mois ci, 20 sites sont mis à l’honneur pour assouvir votre soif d’inspiration.

HTML5, CSS3, Responsive webdesign, Flash, sites « vitrines », site événementiels, bref ce mois d’avril 2013 nous a réservé quelques pépites. Jetez un œil à la sélection, partagez la et donnez-moi votre avis !

Distance To Mars

We are Eli

Le RockWood

Toyota Only The Name

Carrera World

MB & F

Tilde

Mix Panel

Gecko Board

Mariusz

Sputnik Creative

Cheval Blanc

Creativedash

Moto Oakley

Boucheron

Hotdot

Richard Photo Lab

Nespresso

Travis / Volvo Trucks

Design Embraced

Que pensez-vous de cette sélection ?

Dans le cadre du partenariat avec iStockphoto, c’est avec joie que je vous offre une nouvelle sélection d’images gratuites pour vos futures créations. Ce mois-ci, le vectoriel est à l’honneur, avec de superbes personnages libres de droit.

Souvenez-vous, iStockphoto est une banque d’image qui propose des photos, des illustrations, des vidéos, de la musique…Bref presque toutes les ressources pouvant être nécessaire dans votre métier de créatif.

Je rappelle la procédure pour télécharger les éléments graphique. Cela peut paraitre long, mais le jeu en vaut la chandelle, les quatres images valent pas moins de 100 euros !

• Il suffit de vous rendre sur la page dédiée au blog sur http://istockphoto.com/WebdesignerTrends.
• Créez un compte gratuit en quelques clics.
• Téléchargez ensuite les fichiers !

Vite, vous avez un mois pour diffuser l’article et en faire profiter vos amis !
Edit : Désolé, il y a toujours un bug de téléchargement du côté de iStockphoto…

istockphoto.com/WebdesignerTrends

Pour aider les webdesigners freelance et en agence, je vous propose un petit tour d’horizon des outils en ligne pour avoir des retours créatifs et permettre à vos clients de valider vos créations.

En tant que travailleurs et passionnés du web, nous utilisons presque tous des outils collaboratifs en ligne. Échanges de plannings, documents, bref des outils comme Google Drive ou Dropbox sont devenus quasi-incontournables dans nos tâches quotidiennes, pour faciliter le process de création. Pour s’adapter encore plus aux demandes précises du domaine du web et du webdesign, d’intelligentes sociétés de développement d’applications web se sont mises à déployer diverses solutions sur le marché.

Pour vous permettre d’y voir plus clair et de faire votre choix, identifions les besoins généraux des webdesigners et des sociétés de design, avant de passer en revue 10 outils en ligne.

Pourquoi utiliser des outils collaboratifs
en ligne ?

La réponse est pourtant simple : pour se simplifier la vie ! Vous le savez tout autant que moi, lorsque l’on travaille en équipe sur un projet, il est bon d’avoir un espace commun pour s’y retrouver et faciliter les échanges. Un webdesigner a souvent besoin d’un feeback client rapide (et positif, troll) pour avancer dans ses tâches et gagner du temps.

L’envoi d’emails par exemple n’est pas forcément une bonne solution pour des échanges immédiats, ordonnés, construits et bien présentés. Il convient plutôt d’utiliser un outil permettant de classer ses fichiers de design, tout en les commentant, en gérant différents accès selon les membres de votre équipe ou vos client. En quelques mots, voici les fonctionnalités de base que remplit en général un bon outil collaboratif en ligne.

Pour se sentir à l’aise, un webdesigner a également besoin d’une interface intuitive. Un outil compliqué et lent à utiliser va totalement à l’encontre de son usage principal. Un des côté pratique de ce type d’outils est également une bonne gestion des commentaires. Imaginez par exemple une discussion d’équipe autour d’un sujet bien précis, organisée par dates, permet d’agir rapidement et de tenir compte des remarques de tous les acteurs du projet.

Dans le choix de votre service en ligne, prenez également en compte les divers formats qu’il est capable de gérer (photos, vidéos), son accessibilité (smartphone et tablette) et bien évidement son prix. Il s’agit là de généralités, tout dépend de vos besoins précis !

Au final, ces outils doivent avoir une chose en commun : ils doivent être simples, intuitifs, et vous permettent d’être plus productif. Quelques outils à tester :

Notable

Notable permet de commenter rapidement n’importe quel screenshoot, pour pouvoir en discuter à plusieurs. Ces points fort sont les commentaires, la possibilité de faire des dessins et la gestion du versioning. Il est possible d’uploader des images, des PDF et des PTT. Vous bénéficiez d’un mois gratuit pour tester, il faudra ensuite débourser 19$/mois.

Marqueed

Simple d’accès, Marqueed permet d’ajouter rapidement des images en ligne grâce à un simple drag and drop. Ajoutez ensuite les membres de votre équipe et échangez sur vos images. Le site vous propose aussi de vous envoyer des notifications en cas d’activités sur un de vos projet. Le plus : des captures d’écrans directement grâce à un petit bookmarklet.

Vous pouvez aussi facilement créer des groupes avec des accès restreints pour vos clients par exemple. Pour couronner le tout, ajouter le logo du projet sur la page pour faire vraiment pro !

Annotary

Basé sur une collaboration plus textuelle que visuelle, Annotary permet comme son nom l’indique, d’annoter des sites web, des articles, des données et de le partager avec qui vous le souhaitez. Le site est réellement axé sur le partage et l’organisation de vos données trouvées en ligne.

Onodate

Présentez et annotez vos designs ! Telle est la baseline de Onotate. L’interface de l’application est vraiment tendance et simple d’utilisation. Présentez facilement des sites web, des documents imprimés et toutes sortes de designs interactifs.

Il permet d’organiser les projets en dossiers pour offrir la possibilité à votre client d’avoir une trace claire et précise de l’avancement de votre travail. Ici aussi, vous bénéficiez de 30 jours gratuits, pour ensuite basculer sur un forfait à 15$/mois.

Invision App

Une solide application massivement utilisée par de nombreux designer. Très complet et facile d’utilisation. Gestion des projets, partage avancé, commentaires et annotations. Le tout avec un compte gratuit. Du lourd !

Designsignoff

Designsignoff est avant tout axé sur une belle présentation client. Créer pour les créatifs, le site vous permet de mettre en avant vos réalisations de manière professionnelle, avec des galeries, tout en incluant bien évidement la possibilité de commenter. Plusieurs formules payantes sont proposées, à partir de 9€ par mois.

Frame Bench

Un des gros plus de Frame Bench, est la possibilité de commenter une réalisation de manière simultanée, en direct à la manière d’un chat. Il permet également une bonne gestion de l’historique et du versionning. L’application supporte photos et vidéos. Ici aussi, plusieurs formules sont proposées, allant de 19$/mois à 99$/mois.

Bounce

Axé sur les annotations d’images, Bounce permet, à partir d’une URL, d’indiquer son point de vue sur un screenshot. Pas de gestion de droits, un simple partage permet de d’envoyer les annotations. Ultra light par rapport aux autres outils présentés, il a l’avantage d’être gratuit et de pouvoir s’utiliser en quelques secondes.

Conceptshare

Concept Share est une grosse application de partage, destinée aux sociétés avec  beaucoup de projets et dossiers différents. Il possède de nombreuses fonctionnalités poussées pour gérer les images, comme des zooms, des comparaisons avant/après, une gestion de grille, en bref une interface utilisateur très riche. Le tout étant payant bien évidement, mais pour une grosse société avec des usages bien spécifiques, le produit semble parfait !

Fresc

Simple, Fresc vous permet de commenter rapidement une image pour pouvoir en discuter à plusieurs. Le site permet aussi de vous tenir informé avec des notifications par emails ou sur le bureau. Les plus : la création de fichiers PDF de vos fichiers et l’accès gratuit. En plus c’est un produit français, encore une raison de plus de tester Fresc sans plus attendre !

Pour conclure :

Que pensez-vous de cette sélection ? Avez-vous déjà utilisé un des outils présenté ? Vous utilisez une autre solution ? Partagez vos bons plans !

Article inspiré par Freelance Switch