18 août 2018Pas de commentaire

Photoshop : Les ressources nécessaires pour débuter

Temps de lecture : 3 minutes 11
Musique écoutée : My Neighbor Totoro ChillPop Remix

L'article du jour : Le logiciel Photoshop. Purement et simplement.
Techniquement, Photoshop est un logiciel rempli de fonctionnalités. Personnellement, j'utilise seulement 10% des fonctionnalités du logiciel pour mes compositions (si ce n'est moins). Pour démystifier un petit peu la bête, saches qu'un webdesigner moyen n'a pas besoin de prendre en main le logiciel à 100%.

Tout n'est qu'une question de création de forme, d'application de couleurs, d'utilisation de ressources et d'idées. Normalement, je devrais créer très prochainement une vidéo explicative d'utilisation. Cependant, gardes en tête ceci :

Plus tu utiliseras le logiciel, plus tu deviendras bon.

Lorsque j'ai débuté Photoshop, je voulais être débarrassé le plus vite possible de la barrière technique. Juste pour créer et m'exprimer librement. C'est pourquoi je me suis lancé un défi : Faire 10 tutoriels à l'aide de Photoshop. Tout simplement.

Je t'assure qu'à la fin des 10 exercices, si tu les suis scrupuleusement, tu ne seras plus gêné par le logiciel pour créer tes compositions. Photoshop n'est pas si complexe : Une fois les fonctionnalités de bases acquises, plus rien ne sera un problème.

Un bon exercice sur Photoshop reste de créer des infographies. Prenons du recul ensemble sur les ressources nécessaires à une bonne infographie : Une bonne typographie, des icônes (beaucoup d'icônes), de belles couleurs et des formes (cercles, demi-cercles, triangles, rectangles).

Je ne veux pas te lister les outils présents dans Photoshop, je te montrerai tout ça en live d'ici peu. Par contre je peux te donner une base de travail gratuite : Les sites que j'utilise pour télécharger des ressources gratuitement. 

The Noun Project
TheNounProject regroupe plus d'un million d'icônes disponibles au téléchargement.

Des bibliothèques magnifiques de photos libres de droit

Unsplash
Unsplash est l'une des plus belles galeries de photos que je connaisse. Les photos sont personnelles, intimistes et esthétiquement irréprochables. Tu pourras les utiliser comme bon te semble.

unsplash

Magdeleine
Magdeleine est aussi efficace que Unsplash. Divisé en plusieurs catégories (Nourriture, humains, nature, animaux, architecture),
ce site te proposera des photos d'excellente qualité.

magdeleine

Des ressources graphiques (interfaces, icônes, PSDs)

PixelBuddha
Sur Pixelbuddha, tu trouveras tout un stock gratuit de ressources comme des typographies, des vecteurs, des photos

pixelbuddha

GraphicBurger
Tout n'est pas gratuit, mais certaines ressources sont très utiles. Je t'incite fortement à télécharger des PSD gratuits pour tout casser !! Tu verras ainsi comment est créée une interface sur Photoshop en survolant les calques de la composition.

PSDDD
Une autre bibliothèque où tu pourras trouver un maximum de ressources pour tes compositions (des templates gratuits, des icônes). Rien ne t'empêche de prendre un travail déjà fait et de le transformer !

Des ressources typographiques (interfaces, icônes, PSDs)

Un beau projet se reflète aussi par sa typographie. Voici une liste de site ou tu trouveras des typographies intéressantes à installer sur ta machine.

FreeTypography
Freetypography possède des typographies gratuites et payantes. Va simplement faire un tour sur l'onglet "Free fonts" et sélectionne le type de font recherchée (serif ou non-serif). Tu vas atterir sur une multitude de choix pour ton prochain projet 😉

FontSquirrel
Fontsquirrel est un des sites de référence pour chercher des typos. Il a l'avantage de te procurer toutes les graisses existantes (si jamais tu aurais besoin des différentes déclinaisons d'une même typographie).

TypeWolf
En plus de t'apporter des polices d'écriture gratuites, typewolf crée de vraies études à propos des typos (ex: Quelles sont les polices les plus utilisées ? Quelles sont les meilleures combinaisons ?). Je te suggère donc de lire leurs guides si tu veux devenir un spécialiste des lettres !

Ou aller pour chercher l'inspiration ?

Que tu sois webdesigner ou pas, tu dois impérativement faire ta veille technologique sur ces sites web. Je te présente ci-dessous 3 sites totalement incontournables que j'utilise quotidiennement.
Ne télécharge jamais de réalisations sur ces sites : Les travaux de ces sites sont des travaux privés !

Pinterest
Pinterest, grâce des mot-clés du type "webdesign" ou "infographics" t'apporteras du contenu et de nouvelles idées quotidiennement.

Behance 
Behance peut potentiellement accroître ta culture visuelle. Ce site a su s'imposer comme étant la référence des créatifs. Tous les travaux du site sont extrêmement originaux et réalisés par de véritables professionnels de l'illustration et du webdesign.

behance

Dribbble
Dribbble regroupe également les meilleurs designers du monde. Tandis que Behance présente ses projets de manière globale (design process, cheminement d'idée), Dribbble ne se contente que d'afficher les plus beaux visuels des réalisations.

Comme je l'ai dis, je prépare prochainement une petite vidéo pour t'expliquer les bases du logiciel. Ceci était un avant goût afin que ta saches où chercher lorsque tu entames un travail graphique. Alors restes branché 😉
Passe une excellente semaine !

 

22 juillet 2018Pas de commentaire

Pourquoi un intégrateur doit-il savoir faire du design ?

Cette semaine je te pose cette problématique. À savoir : Pourquoi t'imposer 3x plus de travail en design alors que tu es amené à être développeur front ou back. Le monde du travail est un monde différent de la formation ou de la FAC..

Read more

16 juillet 2018Pas de commentaire

Le design de ton portfolio, quand tu n’as aucune expérience

Salut à toi !J'espère que tout va bien. Personnellement, tout s'est bien passé. J'ai même eu le temps de faire plusieurs recherches pour toi.

Read more

8 juillet 2018Pas de commentaire

Apprenti webdesigner, tu dois arrêter de faire ça

Lorsqu’on est Webdesigner ou directeur artistique, certaines choses hérissent le poil. Déformation professionnelle sans doute. Lorsqu’on fait des campagnes de pub, des affiches ou des flyers depuis quelques années, on repère vite certaines erreurs grossières. Et bon sang, ce que tu peux en faire des erreurs qui me fâche. Je ne vais pas t’embêter avec de grandes phrases philosophiques aujourd’hui. Je vais plutôt te donner des astuces de forme pour embellir tes travaux. En d’autres termes : Comment passer d’un travail amateur à un travail professionnel en quelques coups de pinceaux.

Tu ne respectes pas tes marges. C’est un énorme défaut facilement corrigible.

Inutile de t’intéresser aux dernières tendances web design 2020 de « JeSaisPasQuoi » si tu ne respectes pas tes marges. Le respect des marges est une notion fondamentale. Elle fait intervenir un aspect que j’adore : l’harmonie. Il y a quelque chose de magique avec l’équilibre visuel. Les éléments de ton interface doivent être calibrés, margés, placés avec la précision d’une horloge suisse. Ainsi, l’oeil de ton utilisateur ne sera pas perturbé (un rien le fait se barrer de ton site en une seconde).

Lorsque je travaille sur une interface, il n’est pas rare que je perde une bonne demi-heure à placer mes blocs de texte et mes images. Il y a quelques chose de reposant dans cet exercice (Surtout accompagné d’une petite playlist indie folk ;)).

 

capture-decran-2016-09-27-a-11-11-24

Je pique ceci au site graphiste.com. J’espère qu’il ne m’en voudra pas.

 

Tes blocs de textes ou visuels doivent être alignés AU PIXEL. J’ai pas envie d’être chiant hein, mais tu t’étonnerais de voir l’impact de deux ou trois pixels de décalage sur la qualité d’un travail. On passe de « Waw, c’est propre » à « Mouais, c’est pas mal ». Ces blocs doivent également (dans la plupart des cas) être pourvus de marges égales sur chaque côté.

Voir le travail de Alessandro Zanoni

 

Un effet « premium » à vos interfaces

Une fois que les marges sont respectées, on peut s’amuser à donner une petite touche pro à son interface. Regarde l’exemple d’un webdesigner qui, intentionnellement, augmente la taille de ses marges de façon outrancière.

Voir le travail de  la boutique Sense6

 

N’utilise pas du Times New Roman dans tes corps de texte.

« Les polices à empattement sont interdites dans un corps de texte d’un site web ».

Et bien c’est faux. Je t’invite à les utiliser : Mais pas de Times new Roman. Sinon je me fâche tout rouge.

Première raison : Le Times New Roman est la police affichée par défaut sur les navigateurs lorsqu’aucune typographie n’est assignée dans le CSS. En d’autres termes, cela donne une impression d’inachevé dans tes travaux. Tu peux trouver mieux qu’une police qui s’affiche quand le chargement du fichier css plante, nan ?

Deuxième raison : Le Times est une police super lorsqu’on l’utilise sur support papier, pas sur le web. C’est chiant mais c’est comme ça.

Si tu aimes le Times d’amour (ça peut arriver), utilise là seulement dans les titres. Et arrange toi pour que ce titre soit affiché en grand. Je suis sûr qu’une tendance du Times dans les interfaces traine dans un recoin d’internet ;). 

J’ai personnellement essayé de l’utiliser dans mes compositions. En vain.
Alors comment on fait pour afficher une police à empattement VINDIEU ?

Prenons l’exemple du meilleur site pour la rédaction d’article. Un des sites les plus utilisés pour les écrivains du web : Medium. Medium utilise sa propre police d’écriture à empattement avec Georgia en deuxième position et Cambria en troisième.

Du coup, je peux prendre quoi comme typo ?

Si tu ne sais pas quelle police prendre, essaye ces combinaisons ! https://www.reliablepsd.com/ultimate-google-font-pairings/ . Elles sont gratuites (google font) et bien sympa. Note aussi que certains exemples sont dotés de typographies serif dans le corps de texte. Alors ne te gêne pas ;).

Si tu te sens l’âme d’un designer pro, va découvrir des typographies ici : http://www.webdesignertrends.com/tag/typographie/ il y en a pour tous les goûts. Je te conseille sérieusement de faire des projets avec les typographies de webdesignertrends : Elles sont originales et d’excellente qualité !

 

Tout ça pour dire :

Le travail du webdesigner est un travail exigeant et minutieux. Le beau et l’équilibre sont essentiels dans tes compositions. Même avec très peu d’éléments, tu peux faire une excellente impression !!! La plus grande erreur que tu peux faire est de délaisser tes interfaces au profit du code. Ces deux disciplines doivent fonctionner ensemble impérativement.

Je te souhaite de passer une excellente semaine.
Porte-toi bien, on se voit lundi 😉

30 mai 2018Comments are off for this post.

La peur de l’echec en webdesign

J’aimerais te parler un peu. Et là, je m'adresse directement aux créatifs, pour peu qu’on ait un peu d’empathie, on se rend vite compte du fléau : Le syndrome de la page blanche. Mais si ! Tu sais ce mec-là, dans les films, assis devant une feuille Word complètement vierge (avec un gros plan sur le curseur de saisie pour mettre en évidence la vacuité créative du personnage).

Il m’est arrivé plusieurs fois d’en être arrivé là. Est-ce agréable ? Non. Est-ce normal ? Oui. Qu’est-ce qu’on peut faire ? La première chose à faire est de faire taire cette voix insupportable qui te dit :

 

C’est trop compliqué. Tu n'es pas un artiste..

 

Lorsque rien ne vient, on a vite tendance à se remettre en question. C’est d’autant plus vrai pour les personnes qui ont constamment envie de bien faire (j’en fais largement partie).

La remise en question

La remise en question n’a aucune limite. Lorsqu'il est difficile de prendre du recul, toute chose prend des proportions démesurées. Dans l’angoisse de ne rien faire, si tu entames ta création en te disant : « Je n’y arriverais pas. », il y a de grandes chances pour que ton cerveau poursuive l’idée :

- « C’est impossible »,
- « Je ne suis pas assez bon »,
- « Je ne suis rien et j’ai eu tord de penser le contraire »,
- « Si j’étais artiste, je ne bloquerais pas dès le début ».

Est-ce que ce petit blocage mérite vraiment cette escalade ? Non, bien sûr.

john maeda

Design is a solution to a problem. Art is a question to a problem.

JOHN MAEDA

John Maeda est un artiste, graphiste, enseignant et chercheur de renommée internationale. Il est actuellement Responsable Mondial de la Conception Computationnelle et de l'Inclusion chez Automattic1.

 

Pour ta gouverne, même les plus grands créateurs ont cette peur. Plus tu vas acquérir de l’expérience, plus tu auras peur : La peur de ne rien pouvoir faire, d’échouer, d’être critiqué. Cela te fait un point commun avec les meilleurs. Si cette peur fait partie de toi, tu dois l’assumer et l'a maîtriser. Il n’y a ni formule magique ni solution. Néanmoins, quelques techniques connues peuvent te donner un coup de pouce pour te débloquer.

La sérendipité

Un mot un peu barbare, mais le sens est top. Le mot sérendipité a été créé par Horace Walpole. Horace l’a créé à partir d’un vieux nom Sri Lankais, Serendip. Il a expliqué que ce nom faisait partie du titre d’un conte de fées appelé : Les Trois Princes de Serendip. Celui-ci raconte l’histoire de 3 seigneurs partis faire fortune sur la route de la soie, vers une île appelée Serendip. Tout au long de leur chemin, les trois hommes ne cessent de faire des découvertes merveilleuses et inattendues.
Au final, il repartiront avec d’autres richesses que celles qu’ils pensaient venir chercher. La sérendipité peut se résumer ainsi : Obtenir un résultat inattendu lors d’un travail ou d’une recherche.

Le maître mot ici, c’est "faire" ! Vous devez commencer à faire. N’importe quoi. Ce qui vous passe par la tête. Au fur et à mesure de votre évolution, votre cerveau fera des liens et des connexions qui vous aideront à choisir une direction artistique. Jusqu’à atteindre cette fameuse réflexion « Tiens, mais c’est pas mal ça, non ? ». Faire, c’est solliciter l’impulsion créative. Il n’y a rien de tel.

La sérendipité est une des nombreuses solutions au problème du graphiste bloqué devant son fichier Photoshop. Nous en aborderons d'autres au fil des semaines 😉

15 mai 2018Comments are off for this post.

Casey Neistat, storytelling et webdesign

Casey Neistat est un vlogger, un monteur vidéo et un excellent storyteller : Il se filme tous les jours en nous faisant découvrir son quotidien sous la forme d’une vidéo posté tous les jours sur YouTube. C’est avec une réelle passion qu’il nous fait découvrir son environnement, sa famille, son job, ses projets, ses rencontres et ses déplacements professionnels autour du monde. L’attrait pour sa chaîne YouTube provient selon moi de l’image que l’auteur dégage : Le business man streetwear voyagent autour du globe, prenant du bon temps dans de merveilleux hôtels, ouvert d’esprit et motivant pour n’importe quel entrepreneur, dialoguant avec sa communauté : Casey est l’ami qui nous donne des nouvelles de lui tous les jours.. et on en redemande tant sa vie semble extraordinaire. Casey Neistat comptabilise aujourd’hui 3 millions d’abonnées sur YouTube et atteint le millions de vue par vidéo en seulement 24h. En plus de la monétisation, j’étais loin de me douter de son deuxième objectif : Propulser Beme, son réseau social vidéo en développement.

Qu’est-ce que l’inbound marketing ?

L’inbound marketing est une technique marketing visant à attirer ses futurs clients vers soi plutôt que d’aller les chercher. Afin d’attirer le futur client, l’entrepreneur se doit d’avoir du contenu qualitatif, récurrent, pertinent, en rapport avec son activité et permettant de solutionner d’éventuels problèmes chez les lecteurs. On parle ici d’articles de blog, des vidéos, des images..

Une passion transformé en technique marketing.

Je vous arrête tout de suite, je suis loin de penser que la chaîne de notre ami a été conçu pour assurer la popularité de Beme. Néanmoins, il s’avère que son vlog devient un atout commercial gigantesque. La passion de Casey pour son vlog et sa communauté est réelle, mais disons que le schéma peut s’apparenter à de l’inbound marketing. Créer du contenu de qualité de manière récurrente afin d’obtenir du traffic sur sa plate-forme en ligne. Puis, transformer cette plate-forme et ses prospects en potentiels clients. L’exemple est assez parlant, et je t'invite à aller voir sa chaîne pour te rendre compte du phénomène.

Visitez le vlog de Casey Neistat

La leçon a tirer pour nous, designers graphiques : Le storytelling.

Casey Neistat n'a pas créé sa chaine Youtube pour avoir des clients, c'est les clients qui sont venu à lui grâce à son talent. Casey excelle dans le story-telling : une pratique très connu qui consiste à raconter une histoire transportant littéralement ceux qui s'intéresse à son travail. Dans vos interfaces, essayez vous aussi de raconter une histoire plutôt que d'afficher des messages marketing de manière directe. L'utilisateur est trop souvent agressé par du contenu publicitaire (sur internet, à la télévision). Ainsi, cela vous forcera à créer un univers défini et à parler directement à votre cible (recruteurs, clients).

3 mai 2018Comments are off for this post.

Pourquoi j’ai décidé de te parler

Je suis ravi de te voir ici et te souhaite la bienvenue. Je vais commencer par dire que je me suis occupé de beaucoup de sites web depuis des années. Certains de mes clients, entrepreneurs ou recruteurs, sont devenus des partenaires voir des amis. De mon expérience a découlé une envie de te parler à toi et toi seul. Si tu es étudiant à l'Access Code School, tu as pour objectif de concrétiser un projet important. En ce sens et face à l’aventure qui nous attend, nous ne sommes pas si différents. Mon objectif est de t'aider à acquérir des compétences fortes en Webdesign, design d'interface ou d'expérience.

Un peu de moi

M’étant intéressé à Photoshop et au webdesign à l’âge de 13 ans, j’ai commencé à potasser les bouquins, les articles et les interviews de créateurs web que je trouvais ici et là sur Internet. J’ai appris les tendances web, le beau et l’élégant mais aussi la poésie du code, les variables, les fonctions, les algorithmes et les paradigmes. La fac m’a ensuite enseigné le comportement des utilisateurs, ses envies et frustrations, ses besoins et ses attentes. Néanmoins, La fac, le lycée ou mes heures d’apprentissage ne m’ont jamais appris la relation client. En y pensant, j’ai du mal à comprendre comment cerner ce sujet dans des discours marketing, des courbes et des chiffres. Avec le recul, je me dis que c’est aussi bien ainsi. Aussi loin que je me souvienne, j’ai obtenu mon premier client dès ma sortie du lycée. Ce premier client a été mon décollage et sa satisfaction face à mon travail aura été le moteur qui allait me définir en tant que professionnel. Puis, je suis rentré dans des agences de communication en tant que Webdesigner. Je me suis occupé de petits projets et très vite de très grands. Outre l’expérience que j’ai pu acquérir dans mon domaine, on nous privait de tout contact avec les clients. Résultat : Une communication rompu par des chefs de projets négociants des deadlines de plus en plus sérrés pour assurer le rendement. Le créatif est rattaché à une vision d’un chef d’équipe sensé ressentir les besoins du client et l’exprimer. Je ne dénigre pas ce système, il est certainement une réponse aux égos démesurés des designers. Ce genre de designers qui tirent à boulet rouge sur des anciens site web de client venu pour une refonte.

La technique du webdesign dans tout ça ?

Je passe 80% de mon temps à m’entretenir avec les gens avec qui je travaille. Le design ou le développement, toutes ces techniques derrière un site ne représente pas l’essentiel du travail. Des outils existent et ils sont de plus en plus performants, l’objectif est de les utiliser convenablement avec plus ou moins de talent. Non, ce qui est intéressant c’est bien la stratégie de contenu, la cohérence dans la marque, son discours, et les éclairs d’originalité qui parsèment certaines maquettes graphiques. C’est autant de sujets sur lesquels j’aime travailler de plus en plus. Dans l’idéale, j’aimerais te parler toutes les semaines. Mes articles sont basés sur ce qu’un professionnel peut vivre lorsqu’il est Webdesigner : Il sera question ici d’astuces sur la composition d'interfaces, comment penser des projets en amont et comment les executer, des portraits d’entrepreneurs inspirants et talentueux et enfin des expériences ou pensées personnelles. J’ai toujours aimé débattre de ces sujets, surtout avec des étudiants.

Mais je n'ai aucun talent artistique ! Je préfère coder !

C'est ce que nous verrons. Le développement ne m'intéressait pas non plus avant : J'ai eu mon Bac au rattrapage avec 5/20 en Mathématiques. Aujourd'hui, je comprends les problèmes de mes collègues développeurs. Toujours est-il que le design est aussi important que le code. (Et ne me dis pas que tu as eu 3/20 en Arts plastiques ;)). Il est bon de comprendre les enjeux du développement sans occulter les immenses possibilités qu'offrent un design et une expérience efficace. Comprendre les deux tableaux te permettront d'être force de proposition dans ton futur emploi. Alors pose moi des questions, n'importe quoi. L'essentiel est que tu comprennes les tenants et aboutissants du métier de Webdesigner.

Comment me contacter ?

Si tu veux parler d'un projet en particulier ou que tu as besoin d'un oeil extérieur, je saurais me rendre disponible. Je t'invite à aller sur la page Acces Mentor pour m'envoyer un e-mail. Sur cette page, tu trouveras les principales informations concernant les actions que nous pouvons entreprendre ensemble. Tu peux me solliciter pour me parler de tes projets, je serais ravis de t'aider à les améliorer. Tu peux aussi m'appeler pour des conférences et des interventions sur le sujet de ton choix. Essayes de te mettre d'accord avec ta promotion sur un thème en particulier. Ces conférences sont ouvertes et tu auras l'opportunité de me poser toutes tes questions.

profil
logo-inline

Pensé et construit pour aider les jeunes webdesigners ACS à devenir les créatifs de demain.