[pro] Portfolio créatif pour développeur

(reprise du message précédent)

Bonjour,

La police de substitution passe mieux pour le titre, mais elle est trop typée SF 80's (à mon goût). Il y a toujours la guerre des polices !!! J'en compte 4 ou 5 sur la page, impossible de faire quelque chose de cohérent dans ces conditions !!! Que fait cette police anglaise au dessus de votre nom ? De plus ces polices ne s'accordent pas entre elles car elles ont trop typées et racontent des histoires différentes. Sauf si vous maitrisez la typo sur le bout des doigts, jamais de mélange de plusieurs polices, c'est la cata assurée.

Regardez ce qui se fait actuellement (PDF avec exemples/conseils typo dans le lien de ma signature… ). Deux choix :
1/ Une police pour tout le site, sobre (2 ou 3 tailles maxi)
2/ Une police pour le texte + une pour les titres plus typée (2 tailles maxi)

Si vous optez pour une police typée (titres ) la police de complément doit être sobre et élégante pour ne pas lutter.

Bonne idée la police développeur (Java and PHP… ), mais celle choisie est inélégante. Les lettres ont une hauteur différente, les p minuscule se placent mal en hauteur, les espaces horizontaux sont mal gérés (trous), du coup c'est vilain à l'écran. Pourtant il existe des polices "développement" (monospace) bien plus élégantes, comme "Roboto Mono“ (gras) par exemple, qui peut être associée à Roboto pour le texte courant (gratuit sur Google Fonts). Pour les titres, vous pouvez opter pour une police plus marquée, mais elle doit rester MODERNE.

Le texte calé à droite (titre) n'apporte rien. Centrez.

Le texte passe mieux dans le menu mais le nom semble écrit plus bas (chrome, mac). À voir avec votre nouvelle palette typo.

Le truc de loading est en effet inesthétique. À enlever (chez moi, ça dure une demi seconde (fibre)), ou si obligatoire, faire un truc simple et élégant (pas de gros machin qui tourne… ).

Voilou pour moi.
Modifié par spongebrain (04 Aug 2016 - 10:23)

Les changements sont peu nombreux car je suis actuellement sur un autre projet.

changelog:
- Adaptations des polices.
- Suppression du loading.
- Passage en français du h2
- Le h2 est maintenant centré
- Alignement du "logo" sur les liens du menu

@spongebrain
Le site comprend maintenant 3 polices :
Titre, Menu et sous titres -> 'Bangers', cursive
Texte -> 'Roboto', sans-serif
Slogan -> 'Roboto mono', sans-serif

Trouves-tu l'ensemble plus cohérent malgré le fait que j’utilise une police de plus ?
PS : J’ai lu attentivement vos conseils typo de votre article tendance 2016.

@Sepeca @Raphii
Je n’ai pas encore corrigé les fautes que vous avez détectées. Ce soir ce sera fait.
Modifié par AndreaDev (05 Aug 2016 - 12:01)

Le projet est déjà bien avancé, il est prévu pour une sortie fin aout. Je pense qu'il y a encore quelques retouches et optimisation à faire par endroit mais qui ne devrait plus occuper tout mon temps. Je vous remercie sincèrement pour votre soutien, vous m'avez été d'une aide particulièrement précieuse et je ne sais pas comment vous remercier.

Vous pouvez continuer malgré tout à lancer vos tomates, je les dégusterai avec plaisir. Je vous écris ce message simplement pour vous indiquer que je serais moins actif les prochaines semaines sur ce thread.

Change log:
- Nouvelle écran de chargement: un simple cache misère
- Ajout d'un favicon
- Insertion de tooltip dans les éléments du background (in progress)
- Adapter la photo de profil : plus rond, thumbnail, possibilité d'agrandir
- Bug sur certain mobile : le titre n'était pas centré
- Modification des boutons
- Les fiches de projet ont été revues
- Changement de Bénévolat vers Partenaire
- Changement de Home vers A propos, lien vers la partie à propos
- Adaptation pour mobile (in progress)
- Nouvelles impressions d'écran pour les projets

Petit détail, lorsque l'on clique sur une photo, la photo s'agrandit et la couleur de background est noire.
Le mieux serait d'avoir de la transparence à la place du noir.
Par exemple :

background-color: rgba(0, 0, 0, .5);

Quelques changements ont eu lieu durant la pause.

Changelog
- Correction de la couleur du background pour l'image de profil
- Mise en place dans le framework symfony 3.
- Implémentation de l'envoi de mail et validations des champs
- Ajout d'un lien depuis l'encart de titre vers l'élément suivant de la page
- Disposition du menu plus au centre

Cette semaine je reprends à plein temps sur ce projet pour le finaliser. N’hésitez donc pas pour les tomates

Bonjour,

Quelques points dont je ne suis pas fan.

• Pas de tirets de chaque côté du nom dans le menu. Ça n'apporte rien.

• La police black façon BD choque moins que la précédente, mais bof… Trop collée en plus dans le titre (elle passe mieux sur "Portfolio". Une police plus web, plus ronde et élégante (sans serif façon logo Google serait à tester). Ou bien une police plus «développeur», genre une police de type monospace qu'on peut utiliser pour coder (ça peut prendre du sens, mais attention d'en choisir une jolie et de ne pas écrire trop gros).
Google fonts peut vous aider.

• La police sous le titre (Développeur Java et PHP) est rikiki et utilisée nulle part sur le site. Unifiez en reprenant la police de texte des paragraphes et dans la même taille. Utiliser trop de polices peut flinguer une maquette. Et quand on utilise une police chargée (comme ici pour les titres), la police d'accompagnement doit rester neutre pour ne pas créer de conflit de style.

• Votre nom n'est pas centré comme les autres titres, inutile de le placer au dessus de la photo. Les gens comprendrons que c'est bien vous.

• La photo zommable. Le zoom n'apporte rien, surtout avec cette forme ovale bizarroïde. Pas de zoom et photo en noir et blanc, ça sera plus chic, je pense.

• Le portfolio fait vide pour le moment. Les vignettes sont un peu grosses et il en faudrait 3. Ne mettez pas votre site perso dans vos réalisations. Ça donne l'impression que vous n'avez rien d'autre à mettre et du coup ça fait vide. Surtout s'il n'y a rien d'autre. Si vous êtes étudiant et débutez, proposez un site web gratuit pour une association ou un ami. En plus d'un exercice intéressant vous aurez du contenu à proposer à vos visiteurs.
Une entreprise sans clients, ça va pas attirer grand monde… C'est cho pour commencer. Ne serait-il pas plus intéressant de chercher un (premier) poste pour vous faire les dents ?

• Le rectangle bleu qui apparait en lightbox quand on clic sur un élément du portfolio, est hideux. Toux ce mélange de bleus est indigeste, surtout avec le bond bleu clair layette. Fond blanc, pas de couleur, ça surcharge et fait kitsch.
Pas de coins ronds en haut et carrés en bas. Carrés partout.
Peut être simplement trouver un autre système plus simple, fluide et moderne qu'un popup ou une lightbox ? Ou à mieux styliser (plus sobre, donc plus moderne).

• Pas de filet bleu autour des éléments dans le portfolio.

• Pas de hover bleu layette sur les cadres des éléments du portfolio en hover. Un gris très clair, sans filet de contour serait suffisant (à tester).

• "Numéro TVA" et "Compte Banque" sont mal placés. À mettre dans le footer sur le fond bleu avec le copyright. Là ils luttent avec le formulaire.

• Pas de filet noir autour d'un bouton quand il est en bleu.

• Pas de souligné sous le tél et l'email. On est plus en 1996.

• Le plan Google est-il indispensable ?

• Dans le formulaire, décoller le formulaire et les coordonnées. À tester, inverser l'orde entre coordonnées et formulaire (champs).

• Le bouton "envoyer" noir dans le formulaire. Assez dur. C'est le seul élément de cette couleur. Reprendre une autre couleur, par exemple présnte dans l'illustration (orange… ).

• Le bouton Twitter un peu bizarre. Ainsi que le texte "via ??". Mettez le logo normal ou sur un rond bleu Twitter officiel. Inutile de placer votre bleu clair sur tout.

Voilou pour moi.

@spongebrain
Je vais clarifier ma situation auprès de vous. Je suis actuellement un développeur employé à plein temps dans une grande société Belge. Nous travaillons essentiellement pour les institutions telles que la sécurité sociale. Nous développons des applications d’envergues qui correspondent peu aux sites internet développé par des agences web. Les applications sont orientés gestion le plus souvent. La « créativité » est finalement assez modéré dans nos applications et sont souvent écrite dans des guidelines fournies par d’autres. Je le déplore et c’est ce que je suis venu chercher en créant mon entreprise.

Avant de me lancer, j’avais cherché quelques années auparavant les technologies susceptibles de pouvoir produire rapidement. On m’avait conseillé Drupal à l’époque et j’ai pu produire deux sites internet. Malheureusement, je n’ai pas accroché. Les deux sites ont été refaits cet été puisqu’il s’agit des deux sites que vous pouvez trouver sur mon portfolio (La fameuse catégorie Bénévolat ou Partenaire que je viens de supprimer). Ce sont deux sites fait gratuitement pour des clubs de sports. J’ai pu mettre en pratique beaucoup de chose : symfony 3, wordpress, git, php, ubuntu, apache2 …

Vous avez dit sans client. J’en ai un. C’est celui-ci qui m’a permis de démarrer mon entreprise sans encombre. Dans ce projet nous travaillons en équipe où je suis « simple » développeur Java, je ne m’occupe pas du tout de l’architecture du projet. Cette occasion me permet de lancer mon entreprise et de démarrer une première campagne de publicité en septembre.

Comme il s’agit d’une activité complémentaire, réalisé sur mon temps libre, elle m’occupe entre 20 et 30 heures par mois (en plus des 38 heures semaines pour mon employeur principal). J’espère pouvoir apprendre beaucoup de chose et pour le moment je ne suis pas déçu.

Je me donne une année pour décrocher aux minimums deux clients sans trop casser les prix. Je dois évidemment terminer ou refaire les deux sites précédents pour être plus crédible car je n’en suis pas satisfait. Mais avant, mon site doit être fin prêt pour début septembre avant la campagne. J’espère que les retours seront bons.


Changelog
- Adaptations des icônes du menu et suppression des sous menu
- Suppression du titre Andrea Benetti
- Alignement de la zone à propos par rapport à la zone contact (grid)
- Suppression du filtre « site internet » « partenaire » + filtre de la page bonus
- Les éléments du portfolio sont adaptés à tous les appareils
- Suppression de l’adresse dans la page contact
- Déplacement du compte banque et du numéro TVA dans le footer

@spongebrain
J'ai placé un grayscale sur la photo de profil et les résultats ne sont pas bon. Peut-être avec une autre photo, je ne jète pas l'idée.

Bonjour Andrea,

J'ai un peu la flemme de lire les commentaires précédents.... J'espère ne pas être redondant ou à contre-temps.

Voici les t
- Lorsqu'on s’intéresse à un développeur, en premier lieu on souhaite savoir sur quel type de techno il travaille. J'ai mis beaucoup trop de temps à voir les mentions 'Java et PHP' sur le premier écran. L'information 'Andreadev - développeur Java et PHP' devrait sauter aux yeux en arrivant sur ta page.
Personnellement, je supprimerais l'opacité du bloc et j'augmenterais grandement le padding (genre '40px' tout autour).

- Je trouve ta présentation un peu trop énigmatique. D'autant que je n'avais pas encore vu la mention de tes techno de base en la lisant (et que ce n'est pas non plus précisé dans ce texte). Peut être pourrais-tu décrire en une ligne le contexte technologique de la grande entreprise dans laquelle tu travaillais. A ce stade, il faut que le lecteur soit emballé par ce que tu dis pour continuer sa lecture. Pour le moment ce n'est pas suffisamment fort. La photo n'est pas idéal non plus. Un plan plus serré sur ton visage serait préférable (tu n'es pas moche, montre toi ! )

- Enfin, je trouve que l'omniprésence de cette même nuance de bleu alourdie la page. C'est un peu opprimant, on ne 'respire' pas dans cet espace trop confiné. Je te conseillerais d'utiliser un duo de couleurs et de ne pas hésiter à les nuancer (pas à outrance non plus, genre deux tons plus pale et deux tons plus foncés pour chacune de ces deux couleurs). Cela permettrait de créer du contraste et du coup de la profondeur dans la perception de ta page. Obtenir de la profondeur est essentiel pour 'respirer' sur un affichage 2D. Un site comme Adobe Kuler peu t'aider à trouver des tons concordants.