Processus de conception Web : Zee Site

J’ai commencé 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 de réussir plus que d’échouer. L’une de ces erreurs a été de s’associer à des personnes qui ne partageaient pas les mêmes pensées que nous, avec des perspectives et des idées différentes.

À cause de cela, Zee avait é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 traversé 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 voulons vous montrer comment nous avons créé notre nouveau site Web.

Objectifs et inspiration

Notre objectif pour le nouveau site était qu’il soit super simple. Nous voulions aussi montrer que nous étions toujours dans le jeu, que nous sommes toujours dans le coup. C’était le slogan que nous avons utilisé pour la page d’accroche et 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 à réduire de manière réfléchie. – Les lois de la simplicité

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

Portefeuille

Pour le portfolio, nous voulions montrer quelques œuvres mais en gardant l’utilisateur sur la même longueur d’onde. D’après nos statistiques, nous savions que les visiteurs ne passaient pas trop de temps sur le site, par conséquent, ils ne pouvaient pas voir toutes les informations dont nous disposions.

Équipe

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

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

Dispositions

Première idée après avoir ajouté tous les éléments dans le document. Nous n’avons pas aimé les polices cependant

La deuxième idée était avec un arrière-plan différent et une sorte de feuille de papier.

Fondamentalement, la deuxième idée sans arrière-plan différent. Pourtant, ce n’était 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/). Ouvrez donc le modèle Photoshop pour avoir les guides de référence.

Étape 2

Nous avons commencé à jouer avec le logo et le slogan, nous avons cassé le slogan en 2 lignes pour pouvoir utiliser l’un des blocs comme référence de largeur pour les autres textes, dans ce cas le « la boucle » bloquer. Nous n’avons pas fait attention à la taille du texte car nous ne faisions que poser les éléments.

É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’iTunes Store d’Apple.

Étape 4

Maintenant, nous avons 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. Aussi juste à côté des mots « toujours » nous avons ajouté un autre bloc de texte qui est un espace réservé pour une citation de clients.

Étape 5

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

Étape 6

Quelques ajustements notamment les alignements de texte.

Étape 7 – Ajout de couleurs

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

É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é le 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é nous avons utilisé 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 Choke et 1 px pour la Taille.

É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.

Étape 10

Nous voulions utiliser des textures c’est pourquoi nous avons ajouté le bruit (Filtre> Bruit> Ajouter du bruit) sur le fond. Nous avons utilisé 2 % pour le montant et la gaussienne. Après cela, nous avons ajouté le même effet de bruit sur le gros texte du slogan.

É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.

Final

Nous avons ajouté quelques éléments comme le lien entre le « in » et le « the ». Aussi les guillemets 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 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.

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 à l’aide de CSS3. Nous avons également utilisé Javascript pour les info-bulles et les effets de portefeuille. Nous publierons un tutoriel sur la façon dont nous avons fait cette partie très bientôt.

Sites HTML

Version portugaise avec le nouveau slogan

Anglais

Détails

Description de travail du portefeuille

Descriptif de l’équipe

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