Design web 101 : fondamentaux et conseils pour votre site web

Qu'est-ce que le design web? Comment concevoir le Web? Réactif ou adaptatif?

Voici quelques-unes des nombreuses questions auxquelles il faut répondre correctement et de manière appropriée lors du démarrage d'une conception de page Web (à l'exception de «Qu'est-ce que la conception Web», c'est quelque chose qui devrait être concrète).

Ci-dessous, nous allons parler de ce que le design Web signifie réellement, les astuces pour savoir quoi et à qui envisager et les principales différences de conception réactive et adaptative!

DEFINITION


'' Web design is the process of creating websites. It encompasses several different aspects, including webpage layout, content production, and graphic design. While the terms web design and web development are often used interchangeably, web design is technically a subset of the broader category of web development. '' - Techterms

Il s'agit d'une définition technologique réelle de la conception de sites Web. Pour le réviser et simplifier ces mots, cela signifie concevoir ce que le client / consommateur voit. Vous connaissez la belle bouteille de shampooing que vous avez dans la salle de bain ou ce dentifrice très brillant que vous avez acheté récemment simplement parce qu'elle avait l'air jolie?

Eh bien, tout cela fait partie de l'aspect de conception qui pourrait lui-même être appliqué sur le Web! Nous appelons également la conception web, l'avant-fin. Comme mentionné ci-dessus dans la définition, c'est un sous-ensemble de développement web qui englobe aussi la partie plus logique d'une page Web, le back-end.

 

Design web 101.1

Quand quelqu'un parle de développement web, ils parlent souvent du front-end ou du back-end. Il est important de connaître la différence entre les deux, le front-end est tout sur ce qui est vu et le back-end est tout à propos de la logique et de l'invisible.

 

Le ‘’Front-End’’

Parlons un peu plus à ce propos, front-end. Le front-end comporte 3 acteurs majeurs: HyperText Markup Language (HTML), Cascading Style Sheets (CSS) et JavaScript (JS). 2 de ces «langues» sont l'épine dorsale d'une page Web et sa conception, tout ce qui a été ajouté est purement à des fins de modification. Ce que je veux dire par là, sans HTML écrit, il ne peut y avoir de page Web, sans CSS il n'y a pas de conception et, sans JavaScript, la page restera statique. Suivi, JavaScript est facultatif, mais fortement recommandé et trouvé dans presque toutes les pages.

C'est cool, mais à quoi ressemble le HTML?

Je suis tellement content que vous vous posez la même question que la majorité des gens! HTML est assez simple et alphabétisé. HTML est ce qu'un navigateur utilise pour lire le flux d'une page Web et l'afficher.

Voici un exemple de ce que le code ressemble et de ce que le navigateur lis:

<!doctype html>
<html>
 <head>
 </head> 
<body>
 <h1>Hello</h1>
</body>
</html>

CSS est votre nouvel acolyte

La plupart des conceptions Web se produisent dans la feuille de style en cascade, ou CSS pour une courte durée. D'où vient la «magie», où un monde sombre et fade devient vibrant. CSS fonctionne en conjonction avec HTML, puisque les styles CSS de l'élément du fichier HTML sont liés!

Vérifiez-le:

En le regardant très attentivement, vous pouvez voir que le texte a changé de couleur. Voyez, la magie. Dans toute la gravité, si vous regardez le centre, vous pouvez voir un code CSS. (En passant, l'image ci-dessus a été prise avec CodePen)

 

H1{
Color: green;
}

 

Cela indique essentiellement à la page HTML que le texte avec une étiquette de H1 va être vert.

Un tutoriel complet complet n'est pas fourni dans cette publication, si vous souhaitez en savoir plus sur cela, je vous suggère de vous diriger vers W3School et Mozilla pour en savoir plus sur ce que vous pouvez faire en combinant les deux!

 

Design web 101.2

 
 

Abordons certaines énigmes de conception

Mobile-first: réactif ou adaptatif

Maintenant, lorsque vous commencez à créer votre site Web, TOUJOURS penser Mobile-First. Pourquoi demandes-tu? Tout simplement parce que l'utilisation des appareils mobile envahi le marché grâce aux téléphones intelligents. 

En regardant légèrement en arrière, en 2015, nous avons atteint 2 milliards d'utilisateurs de téléphone à l'échelle mondiale, les écrans deviennent de plus en plus grands. C'est inévitable, qu'est-ce que l'enfant timide fait au club seul? Regardez son téléphone. Qu'est-ce qu'un enfant cool fait en classe? Regardez son téléphone. Qu'est ce qu'un mari fait alors que sa femme le harcèle? Exactement, regarde son téléphone.

Soudainement, ils se heurtent à votre site web magnifique et optimisé pour les mobiles où la première question qu'ils posent est: quelle approche utilisait-elle, réactive ou adaptive?

 

RÉACTIVITÉ

La méthode réactive réagis avec fluidité en fonction de la dimension de votre navigateur, peu importe l’appareil.

La méthode réactive utilise, ce qu’on appelle, des requêtes de médias. Ces requêtes sont utilisées pour changer le style dépendamment du type d’affichage. Voici des exemples d’affichage : la longer, la hauteur etc.. Dans la majorité des cas, seulement un est nécessaire, le plus commun est : la largeur.

La réactivité ressemblerait à ceci:

 Source de l'image :  website planet

Source de l'image : website planet

ADAPTATIVITÉ

Regardant de l’autre côté, nous avons la méthode adaptative. C'est une méthode qui utilise des points de bris pour changer le style par rapport à la dimension du navigateur. Cette méthode fonctionne de façon à détecter les dimensions automatiquement et appliquer le style approprié pour la dimension détectée. Plus précisément, les changements sont effectués seulement lorsque le point de bris est dépassé, rien ne change avant. La méthode adaptive est habituellement conçue avec six largeurs d’écrans différentes, mais le nombre d’écrans est totalement votre decision, les voici :

  • 320
  • 480
  • 760
  • 960
  • 1200
  • 1600

Alors, lequel j’utilise?

Pour des sites web neuf et moderniser, la façon reactive. Cette façon n’offre pas autant de contrôle que la façon adaptive, mais réduit le travail de construction et de maintenance. La façon reactive est fluide relativement à la dimension de votre navigateur ou les pourcentages sont souvent utilisés comme unité de mesure. La façon adaptive accepte aussi les pourcentages, mais cause des sautillements de la page web lorsque la dimension change.

Pour une mise à jour ou un simple polissage, la façon adaptive est souvent la meilleure voie. Comme mentionne plus haut, la façon adaptive donne un control plus affiner sur le design. De plus, il est également plus spécifique lors de la sélection des ports de vues et vous laisse même choisir le nombre de port de vue que vous voulez.

Ci-dessous ce trouve un tableau comparant la vitesse de charge des deux façons.

 Source:  UX Pin

Source: UX Pin

CMS ou pas : telle est la question

 source:  wordpress

source: wordpress

Squarespace ou WordPress


Les Content Management Systems (CMS) sont plusieurs joueurs sur le marché, mais je vais simplement mentionner Squarespace et WordPress. Ce sont les deux CMS les plus populaires, tous deux ont leur propre style, mais c'est leur forme la plus simple, ils pratiquent à peu près la même chose. Une différence majeure entre les deux est le fait que WordPress est Open Source, cela signifie que les développeurs peuvent facilement créer des thèmes et des plugins. Actuellement, WordPress héberge 51 647 plugins.

 Source:  Squarespace

Source: Squarespace

Voici quelques-unes des principales différences entre Squarespace et WordPress:

Squarespace VS WordPress

Compte tenu de toutes les différences ci-dessus, vous serez en mesure de prendre une décision car l'objectif final est de créer un site Web unique, dynamique et abordable, à la fois capable d'atteindre. Ils sont également uniques dans leur présentation, car les deux offrent différentes façons de personnaliser, ils rayonnent leur propre style!

Rejoignez-moi le mois prochain pour Web Design 102, où nous couvrons JavaScript et quelques outils pour créer une brise!




Demandez votre consultation gratuite pour propulser votre entreprise sur le web



Contactez-nous pour bénéficier d'un consultation GRATUITE!