Conception de sites Web

La conception Web a un lien direct avec l'aspect visuel d'un site Web. Une conception Web efficace est nécessaire pour communiquer des idées efficacement.

La conception Web est un sous-ensemble du développement Web. Cependant, ces termes sont utilisés de manière interchangeable.

Points clés

Le plan de conception doit inclure les éléments suivants:

  • Détails sur l'architecture de l'information.

  • Structure planifiée du site.

  • Un plan de site de pages

Filaire

Wireframefait référence à un guide visuel de l'apparence des pages Web. Il aide à définir la structure du site Web, la liaison entre les pages Web et la mise en page des éléments visuels.

Les éléments suivants sont inclus dans un wireframe:

  • Boîtes d'éléments graphiques primaires

  • Placement des titres et sous-titres

  • Structure de mise en page simple

  • Appels à l'action

  • Blocs de texte

Wireframe peut être créé à l'aide d'un programme comme Visio, mais vous pouvez également utiliser un stylo et du papier.

Outils de conception Web

Voici la liste des outils qui peuvent être utilisés pour créer des conceptions Web efficaces:

Coda 2
OmniGraffle
Pen and Paper
Vim
Coda 2 est un puissant outil de développement et de conception Web, livré avec une meilleure interface utilisateur, l'édition de texte, la gestion de fichiers, des clips, des sites, une conception et une meilleure prise en charge de Mysql. OmmniGraffle est principalement utilisé pour le wireframing. L'inconvénient de cet outil est qu'il ne dispose pas de prototypage interactif et qu'il n'est disponible que pour Mac. Le stylo et le papier peuvent être utilisés pour dessiner l'apparence du site Web. Vim est un excellent outil de conception Web.Il prend en charge la création automatique de code entièrement personnalisable, plusieurs tampons pour stocker le code coupé / copié et l'enregistrement des actions pour la répétition automatisée.
SN Description de l'outil
1. Photoshop CC
Il s'agit d'un excellent outil de conception Web fourni par Adobe. La dernière version de Photoshop CC 2014 prend en charge de nombreuses nouvelles fonctionnalités telles que les objets intelligents, les compositions de calques, les guides intelligents, l'intégration Typekit, la recherche de polices et les améliorations du flux de travail.
2. Illustrator CC
Illustrator CC est également un outil de conception Web doté de fonctionnalités puissantes telles que les bibliothèques AutoCad, la surimpression de blanc, l'échange de proxy de remplissage et de contour pour le texte, la génération automatique de coins, les images non intégrées et les outils de saisie tactile, etc.
3.
4.
5. Sublime Text
Sublime Text est un éditeur de code source avec une interface de programmation d'application Python. Ses fonctionnalités peuvent être étendues à l'aide de plugins.
6.
sept.
8. Imageoptim
Il est essentiellement utilisé pour optimiser les images sur un site Web afin de les charger plus rapidement en trouvant les meilleurs paramètres de compression et en supprimant les commentaires inutiles.
9. Sketch 3
Sketch 3 est un outil de conception Web développé spécifiquement pour la conception d'interfaces, de sites Web, d'icônes, etc.
dix. Heroku
C'est également un excellent outil de développement Web qui prend en charge Ruby, Node.js, Python, java et PHP.
11. Axure
Il prend en charge les outils de prototypage, de documentation et de wireframing pour la conception de sites Web interactifs.
12. Hype 2
Le Hype 2 offre: Le moyen le plus simple d'animer et d'ajouter de l'interactivité, la dureté de la puissance de HTML5, la réactivité mobile et les fonctionnalités WYSIWYG.
13. Image Alpha
Cet outil permet de réduire la taille des fichiers PNG 24 bits. Il le fait en appliquant une compression avec perte et en le convertissant au format PNG8 + alpha, ce qui est plus efficace.
14. Hammer
Cet outil convient aux non programmeurs et n'est valable que pour les petits projets.
15. JPEGmini Lite
C'est un outil d'optimisation d'image et prend en charge les photos dans n'importe quelle résolution jusqu'à 28 mégapixels.
16. BugHerd
Cet outil permet de voir comment se déroulent les projets et sur quoi tout le monde travaille. Cela aide également à identifier les problèmes de développement.

Anatomie de la page Web

Un site Web comprend les éléments suivants:

Contenant un bloc

Containerpeut être sous la forme de la balise body de la page, une balise div contenant tout. Sans conteneur, il n'y aurait pas de place pour mettre le contenu d'une page Web.

Logo

Logo fait référence à l'identité d'un site Web et est utilisé dans les différentes formes de marketing d'une entreprise, telles que les cartes de visite, le papier à en-tête, les brouchers, etc.

Naviagation

Le site navigation systemdevrait être facile à trouver et à utiliser. Souvent, l'enquête est placée en haut de la page.

Contenu

Le contenu d'un site Web doit être pertinent par rapport à l'objectif du site Web.

Bas de page

Footerse trouve au bas de la page. Il contient généralement des informations sur le droit d'auteur, le contrat et la loi ainsi que quelques liens vers les principales sections du site.

Espace blanc

Il est également appelé comme negative space et fait référence à toute zone de page non couverte par le type ou les illustrations.

Erreurs de conception Web

Il faut toujours garder à l'esprit les erreurs courantes suivantes:

  • Le site Web ne fonctionne dans aucun autre navigateur Internet Explorer.

  • Utiliser une technologie de pointe sans raison

  • Son ou vidéo qui démarre automatiquement

  • Navigation cachée ou déguisée

  • Contenu 100% flash.