Design web & mobile

TFA – François Lefebvre

Ta présence en ligne…

Il y a maintenant plus d’un mois, nous (B2 DWM) étions tous réunis pour apprendre ce qu’allait être le TFA sur lequel nous allions devoir bosser pendant le reste de l’année. Toutes sortes de questions nous ont été posées dans le but de nous faire comprendre que ce qui était important pour se faire connaître dans le monde du web, c’était d’être présent partout sur la toile et de mettre en évidence nos capacités. Pour ce faire, il y a une multitude de réseaux sociaux. Il est important aussi d’avoir sa propre page où l’on peut regrouper ses réseaux et aussi montrer notre travail. Voilà l’intitulé de notre TFA: développer une présence en ligne.

Qui suis-je sur le web ?

Tapez votre nom sur google et vous verrez ce qu’on peut savoir de vous… A ce moment-là, il n’y avait pas grand chose a mon sujet, à part mon petit compte Facebook. Eh bien tant mieux, j’allais pouvoir créer ma propre image virtuelle ! Depuis le début de cette année en web , j’ai créé mon premier compte Twitter, j’ai mes chaînes Viméo et Youtube, j’ai maintenant un compte Behance ou je poste mes designs dès qu’ils sont finis ainsi qu’un compte Linkendin, je n’ai pas encore bien cerné ce dernier mais je me dis qu’il pourrait être utile pour me créer un réseau professionnel. C’est pour cela que dans mon site personnel j’ai décidé de mettre en avant Twitter, Linkendin et Behance, sur ce dernier on a accès à mes chaînes Viméo et Youtube.

Design visuel de ma page personnelle

Maintenant que mes réseaux sociaux favoris sont choisis, je peux me pencher sur mes recherches pour mon site. J’ai commencé par aller voir le site de plusieurs agences web qui me plaisent, comme Spade.be, explose.luou encore viljamisdesign.com. Leurs sites ne sont pas extravagant, mais ils sont agréables, tant à lire qu’à regarder. Je voulais donc avoir un design simple mais compréhensible tout en me démarquant, c’est pourquoi j’ai décidé de travailler la géométrie et surtout les losanges. J’ai toujours aimé la géométrie , cela donne une certaine structure tout en permettant des folies. J’avais donc maintenant une base parce que j’étais sur de vouloir travailler les losanges, il restait encore à trouver les bonnes couleurs et l’agencement de ces fameux losanges.

Cette partie m’a pris énormément de temps , je suis passé par plus de 10 designs différents avant de trouver celui qui me plaisait, à un moment je me suis même mis à coder un scroll section par section dont j’ai gardé le code mais je suis parti sur une tout autre idée plus personnelle, ma page principale serait donc composée d’énormes losanges créant ainsi des sections qui s’imbriquent les unes dans les autres, pour moi je trouve que cela délimite bien les sections tous en montrant qu’une section arrive juste après.

Pour mes pages projets, je voulais faire simple pour faciliter une lecture rapide, néanmoins j’ai prévu une animation avec une verticale à 45deg pour rappeler les losanges de la page principale avec une variante de 10% d’opacité de la couleur principale.

Les couleurs

Pour la homepage j’ai décidé de partir sur une couleur marquante par section, cela permet ensuite de récupérer cette couleur pour chaque page projet et ainsi donner une certaine identité à chaque projet. J’ai directement trouvé les premières couleurs , mais arrivé au dernier projet je ne trouvais pas la bonne, j’ai essayé le jaune, mais après avoir travaillé dessus et aussi grâce aux remarques des autres étudiants j’ai pu me rendre compte que cette couleur donnait un peu mal aux yeux, je suis donc passé à du gris car c’est un peu passe-partout mais cette fois la couleur donnait un effet de wireframe, donc pas très beau pour donner une identité à une page, j’ai laissé en suspens, puis j’ai demandé plusieurs avis jusqu’à enfin trouver la bonne.

Mes fonts

J’ai utilisé Lato et Source Sans Pro, pour les trouver , je me suis rendu sur Google Font, je cherchais des polices sans serif qui selon moi colle mieux avec mon design. Lato est une sans serif qui a un look assez jeune et surtout qui peut s’utiliser aussi bien pour du texte que pour des titres , j’allais donc pouvoir l’utiliser pour plusieurs tailles de titre. Je trouve aussi qu’elle donne un look professionnel à mon site. Source Sans pro est quant à elle un peu plus fine et se retrouve bien en police de texte avec Lato.

Mes boutons

Les boutons sont munis d’un hover en diagonale pour encore une fois rappeler les losanges. Chaque bouton à une couleur en fonction de sa section mais le design reste évidemment le même.

Textes

Pour la partie textuelle, j’ai décidé d’écrire en anglais, n’ayant pas de destination précise pour mon stage , ni même pour plus tard (l’étranger ne me fait pas peur, au contraire), je pense pouvoir toucher plus de monde en écrivant mon site en anglais.

Pour le case-study le plus développé, j’ai raconté le travail comme je l’ai vécu en l’agrémentant de quelques wireframes et visuels suivi d’une conclusion avec mon ressenti car chaque travail peut être une expérience différente.

Pour les autres pages projets , je me suis contenté, pour le moment, de décrire dans les grandes lignes le site et inviter les utilisateurs à le visiter.

Code

La partie code fut encore une fois une grande expérience, j’ai découvert de nouveaux outils, gulp et sass, que j’ai vite adopté. Ces outils sont très pratiques pour travailler en temps réel mais aussi pour compresser les images , ajouter les préfixes , minifier, …

Travailler sur des grands losanges était pour moi un défi, les diagonales ne sont jamais évidentes à travailler mais je pense que je m’en suis bien sorti, même si le web est toujours perfectible.

En bref

Le TFA m’a ouvert les yeux sur importance de montrer nos capacités sur le web, j’ai pris beaucoup de plaisir à afficher mes travaux sur différent réseaux, ça me donne également envie de continuer à apprendre et m’améliorer pour en montrer encore plus. Ce fut un mois bien remplis en heures de travail mais ce fut une très bonne expérience.

Mon site utilise Google Analytics, grâce à cela je pourrai voir des statistiques et ainsi améliorer continuellement mon interface pour répondre aux besoins des utilisateurs. Car avec le web il faut toujours apprendre, s’améliorer et faire évoluer nos interfaces.

     Projet au hasard