Processus de conception Web : Zee Site

Processus de conception Web : site Zee

J’ai lancé Zee en 2004 avec un de mes amis, Fabiano Meneghetti. Tout au long de ces années, nous avons beaucoup appris de nos succès et bien sûr de nos échecs. Cela fait partie du jeu, même si nous essayons plus de réussir que d’échouer. L’une de ces erreurs a été de collaborer avec des personnes qui ne partageaient pas les mêmes pensées que nous, avec des perspectives et des idées différentes.

Pour cette raison, Zee a été suspendu pendant 6 mois. Mais après cette période, nous avons pensé que notre façon de penser et tout ce que nous avions vécu en valait la peine et ne pouvaient pas être simplement oubliés. Abduzeedo, par exemple, est né après un vol à Zee.

Nous sommes maintenant de retour avec Zee et nous souhaitons vous montrer comment nous avons créé notre nouveau site Web.

Objectifs et inspiration

Notre objectif pour le nouveau site était qu’il soit extrêmement simple. Nous voulions également montrer que nous étions toujours dans le jeu, que nous sommes toujours au courant. C’est le slogan que nous avons utilisé pour la page teaser et que nous avons conservé pour le site.

  • Simplicité
  • Une seule page
  • Grand slogan
  • Textes courts
  • Style de magazine

Le moyen le plus simple d’atteindre la simplicité consiste à procéder à une réduction réfléchie. – Les lois de la simplicité

Nous avions quelques idées en tête mais notre inspiration venait de magazines et de livres, nous voulions un grand texte pour le slogan, et des textes courts décrivant ce que nous faisons et qui nous sommes.

Processus de conception Web : site Zee

Processus de conception Web : site Zee

Processus de conception Web : site Zee

Portefeuille

Pour le portfolio, nous voulions montrer quelques œuvres tout en gardant l’utilisateur sur la même longueur d’onde. Grâce à nos statistiques, nous savions que les visiteurs ne passaient pas trop de temps sur le site et ne pouvaient donc pas voir toutes les informations dont nous disposions.

Équipe

Comme le site ne comporterait qu’une seule page, nous avons décidé de n’utiliser que des miniatures pour la section équipe. Nous avons masqué les descriptions et les avons ensuite affichées uniquement via Javascript lorsque le visiteur survole l’image.

Les photos ont été prises par John Arlington, un excellent ami photographe. Nous pensons qu’une photo professionnelle donne beaucoup plus de valeur au design, et c’est pourquoi nous l’avons contacté.

Mises en page

Processus de conception Web : site Zee
Première idée après avoir ajouté tous les éléments dans le document. Cependant, nous n’aimions pas les polices

Processus de conception Web : site Zee
La deuxième idée était avec un arrière-plan différent et une sorte de feuille de papier.

Processus de conception Web : site Zee
Fondamentalement, la deuxième idée sans arrière-plan différent. Ce n’était pourtant pas exactement ce que nous recherchions.

Création du site dans Photoshop

Étape 1

La première chose que nous avons faite a été d’obtenir un modèle de modèle, nous avons beaucoup utilisé le Système de grille 960 (http://960.gs/). Alors ouvrez le modèle Photoshop pour avoir les guides de référence.

Processus de conception Web : site Zee

Étape 2

Nous avons commencé à jouer avec le logo et le slogan, nous avons divisé le slogan en 2 lignes pour pouvoir utiliser l’un des blocs comme référence de largeur pour les autres textes, en l’occurrence le « la boucle » bloc. Nous n’avons pas prêté attention à la taille du texte car nous ne faisions que déposer les éléments.

Processus de conception Web : site Zee

Étape 3

En utilisant le Outil Rectangle (U) nous avons ajouté un espace réservé pour le portfolio, dans ce cas avec le logo Abduzeedo. Il est aligné au centre du mot « Toujours ». Aussi avec le Outil Ellipse (U) nous avons créé un système de navigation de base inspiré de l’Apple iTunes Store.

Processus de conception Web : site Zee

Étape 4

Nous avons maintenant ajouté un texte qui décrira ce que nous faisons juste à côté de notre logo. Pour la taille de police, nous avons utilisé 17. Également juste à côté des mots « toujours » nous avons ajouté un autre bloc de texte qui sert d’espace réservé pour la citation d’un client.

Processus de conception Web : site Zee

Étape 5

Nous avons essayé de créer un flux agréable pour que le visiteur puisse lire le logo et le texte décrivant notre entreprise, puis notre grand slogan, nos services et expertises avec le portfolio pour référence, puis qui nous sommes et enfin quelques projets personnels.

Processus de conception Web : site Zee

Étape 6

Quelques ajustements notamment les alignements du texte.

Processus de conception Web : site Zee

Étape 7 – Ajout de couleurs

Nous avons ajouté un bleu très clair pour le fond et également un bleu foncé pour les textes.

Processus de conception Web : site Zee

Étape 8

Pour créer un bel effet sur le slogan, nous avons commencé par ajouter un Ombre portée via le style de calque, nous avons utilisé du blanc pour le couleur, 90º pour l’angle, 1 pixel pour la distance et 0 pour la propagation et la taille. Aussi pour le opacité que nous avons utilisée à 100 %. Après cela, nous avons ajouté le Ombre intérieure. Cette fois, nous avons utilisé noir pour la couleur, 50% pour l’opacité, 90º pour l’angle, 2px pour la distance, 0 pour le starter et 1 px pour la taille.

Processus de conception Web : site Zee

Étape 9

Pour tous les textes, nous avons ajouté une ombre blanche comme nous l’avons fait à l’étape précédente. Cela sera fait avec CSS plus tard lorsque nous ferons la partie HTML.

Processus de conception Web : site Zee

Étape 10

Nous voulions utiliser des textures, c’est pourquoi nous avons ajouté du bruit (Filtre> Bruit> Ajouter du bruit) en arrière-plan. Nous avons utilisé 2% pour le Montant et le Gaussien. Après cela, nous avons ajouté le même effet de bruit sur le gros texte du slogan.

Processus de conception Web : site Zee

Étape 11

Avec les styles de calque, nous avons ajouté un trait blanc et une ombre sur les vignettes. Utilisez l’image ci-dessous pour référence.

Processus de conception Web : site Zee

Final

Nous avons ajouté quelques éléments comme le lien entre le « dedans » et le « le ». Également les citations et la navigation linguistique en haut. Fondamentalement, cette mise en page a été utilisée comme référence pour notre version HTML/CSS. Nous avons fait cette version assez rapidement en utilisant Skype et le partage d’écran mais nous savions que certaines choses allaient changer à cause des textes et des versions, comme le portugais qui nécessitait un nouveau slogan.

Processus de conception Web : site Zee

Conclusion

Avec la mise en page réalisée dans Photoshop, nous avons créé le HTML et le CSS du site. La plupart des effets d’ombre ont été créés en utilisant CSS3. Nous avons également utilisé Javascript pour les info-bulles et les effets de portfolio. Nous publierons très prochainement un tutoriel expliquant comment nous avons réalisé cette partie.

Sites HTML

Processus de conception Web : site Zee
Version portugaise avec le nouveau slogan

Anglais

Processus de conception Web : site Zee

Détails

Processus de conception Web : site Zee
Description du travail du portefeuille

Processus de conception Web : site Zee
Description de l’équipe

Pour plus de détails, visitez le site Web de Zee à l’adresse http://zee.com.br