Introduction à la conception de sites Web Questions et réponses d'entrevue
La conception Web est un domaine intéressant. Il faut un ensemble de compétences pour faire une bonne conception de site Web. HTML, CSS <JavaScript, JQuery, etc., sont quelques-uns des langages et des cadres importants que l'on doit très bien connaître pour pouvoir concevoir des sites Web fascinants.
Voici quelques-unes des questions et réponses importantes pour les entrevues en conception Web:
Vous avez donc finalement trouvé votre emploi de rêve dans la conception Web, mais vous vous demandez comment résoudre l'interview de conception Web et quelles pourraient être les questions probables d'entrevue de conception Web. Chaque entretien est différent et la portée d'un travail est également différente. En gardant cela à l'esprit, nous avons conçu les questions et les réponses les plus courantes aux entrevues de conception Web pour vous aider à réussir votre entrevue. Ces questions d'entrevue sont divisées en deux parties:
Partie 1 - Questions d'entrevue de conception Web (de base)
Cette première partie couvre les questions et réponses d'entrevue de base sur la conception Web
Q1.Comment optimiser un site Web? Où commencer?
Répondre:
Pour améliorer les performances d'un site Web, les développeurs doivent avoir des idées spécifiques à la nature de chaque projet. Voici quelques compétences d'optimisation courantes et faciles à implémenter:
- Réduisez le code CSS et JS. Cela permet d'économiser un kilo-octet de chaque chargement de page.
- Compressez tous les actifs dans le format le plus approprié.
- Les mécanismes de mise en cache côté serveur comme Redis doivent être activés.
- Les images doivent être diffusées selon la taille de l'écran de l'appareil et la densité de pixels. Chargez uniquement les images appropriées pour un utilisateur donné.
- Le HTML doit être clair et concis.
Q2.Décrivez l'utilisation des balises HTML5 suivantes: STRONG, EM, SMALL?
Répondre:
Ces balises créent un traitement visuel spécifique. Par exemple, -STRONG met en gras le texte, EM le rend en italique et SMALL le rend plus petit. Mais ce n'est pas leur but. Chacun a un objectif sémantique comme suit:
EM - Texte qui devrait être souligné, changeant ainsi sa signification contextuelle.
FORT - Peut être utilisé dans les titres ou les titres ainsi que dans les paragraphes pour souligner son mot ou sa phrase.
SMALL - Utilisé pour les avertissements et les clarifications.
Passons aux prochaines questions d'entrevue sur la conception Web.
Q3. Décrire les avantages et les inconvénients de l'utilisation d'un framework CSS tel que Bootstrap ou Foundation?
Répondre:
Avantages:
- Les cadres fournissent un prototypage rapide des mises en page, des éléments et des pages
- promouvoir la réutilisation de nombreux éléments cohérents sur l'ensemble du projet
- éliminer le besoin de maquettes Photoshop. Il garantit également la suppression des autres esquisses statiques haute fidélité.
- venir avec des pièces standardisées couramment utilisées
- code bien documenté qui est intégré. Il a une grande communauté de soutien lorsque des problèmes surviennent.
Désavantages:
- essaie de généraliser les éléments communs et conduit souvent à des conceptions moins belles
- crée une conception ou une disposition non conventionnelle ou complexe
- plus d'efforts ont consisté à gérer les frameworks plutôt qu'à simplement écrire le code à partir de zéro.
- venir avec trop de choses redondantes qui ne sont jamais utilisées, ou des styles qui sont remplacés s'ils ne sont pas utilisés dans le bon sens
- temps de chargement plus lents par rapport à un code écrit à partir de zéro.
Q4.Différencier entre «visibilité: cachée» et «affichage: aucun»?
Répondre:
Les deux sont des propriétés de style
- visibilité: caché: il masque l'élément, mais prend toujours de la place dans la mise en page.
- affichage: aucun: il élimine complètement l'élément. Il ne consomme aucun espace. le code HTML est dans le code source mais pas d'espace.
Q5. Qu'est-ce que l'espace blanc? Comment cela affecte-t-il le contenu sur le Web?
Répondre:
L'espace blanc est une zone laissée volontairement vierge. Il n'a pas besoin d'être blanc. Dans la conception Web, l'espace blanc est utilisé pour séparer des éléments ou les regrouper ou pour attirer l'attention sur un élément particulier ou sur un accent mis sur la disposition du contenu.
Partie 2 - Questions d'entrevue de conception Web (avancées)
Jetons maintenant un coup d'œil aux questions et réponses d'entrevue avancées sur la conception Web.
Q6. Définir les principes de la «gestalt»?
Répondre:
Les principes de la Gestalt sont issus d'une théorie de la perception visuelle. Certains de ces principes appliqués dans la conception de sites Web sont les suivants:
- Similitude - le cerveau humain perçoit des éléments ayant des caractéristiques comparables les uns par rapport aux autres et cela signifie que ces éléments sont connectés ou regroupés.
- Proximité - les éléments placés proches les uns des autres sont considérés comme groupés ou liés les uns aux autres ou à une partie d'un tout.
- Fermeture - Le principe de fermeture rend un élément plus fascinant à regarder. Cela rend la conception plus agréable;
- Figure - C'est la relation fondamentale qui a tendance à séparer mentalement les faits sur la base d'une combinaison de couleur, de forme et d'expérience.
- Destin commun - les éléments se déplacent de manière synchrone et sont souvent conçus comme groupés
- Continuité - La capacité de notre cerveau à voir les connexions entre les choses et à suivre un chemin ou un chemin différent en fonction des similitudes entre eux.
Q7. Comment combiner les polices? Quels types de combinaison de polices fonctionnent bien? Combien de types de polices différents pouvez-vous utiliser sur un site Web?
Répondre:
Il y a des polices qui fonctionnent bien ensemble et sont jolies sur la même page. Pour combiner correctement deux polices, les similitudes et les différences entre elles doivent être examinées attentivement.
Deux polices fonctionnent bien si elles sont similaires, sauf si elles sont très différentes. Pour que les deux polices soient similaires, elles doivent avoir des hauteurs x égales
La combinaison de polices très similaires doit être évitée, comme la combinaison de Helvetica avec Lucida Grande.
8. La mention Responsive design est-elle mentionnée sur une page Web?
Répondre:
Conception réactive: - Une approche pour construire des sites pour offrir la meilleure expérience de visualisation et l'interactivité. Il se concentre sur la navigation facile d'un site. Il garantit un minimum de défilement, de panoramique et de redimensionnement sur tous les appareils.
Bootstrap est le framework probablement le plus populaire pour développer une conception web réactive, il est basé sur CSS, HTML et JS.
Passons aux prochaines questions d'entrevue sur la conception Web.
9. Mentionnez quelques mauvais exemples de conception de sites Web?
Répondre:
Certaines très mauvaises façons de faire des conceptions de sites Web sont mentionnées ci-dessous et devraient être évitées par tout le monde.
- Images qui clignotent, tournent ou clignotent
- Fond noir ou très foncé avec du texte blanc, clair ou pâle
- Arrière-plans noirs avec du texte brun, gris ou foncé
- Images d'arrière-plan en mosaïque avec du texte de couleur claire ou foncée
- Tout étant centré sur la page
- Beaucoup trop d'images sur la page ou d'immenses images
- Tant de listes de liens
- Trop de titres ou de texte qui clignotent
Q10. Quand utilisez-vous la compression JPEG.webp et quand préférez-vous plutôt PNG?
Répondre:
Chaque format de compression d'image a un objectif spécifique.
JPEG.webp: - Cela réduit la taille de l'image en trouvant des zones de couleur similaire. Un niveau de compression plus élevé garantit que ces zones semblent plus agressives, ce qui entraîne une perte d'informations visuelles et la génération d'artefacts. Cette compression est idéale pour les photos, les dessins et les dégradés. JPEG.webp ne fonctionne pas très bien pour les captures d'écran ou les éléments d'interface utilisateur simples ou les icônes plates ou les schémas. C'est très mauvais pour le texte.
PNG: - Cette méthode de compression fonctionne en réduisant les couleurs utilisées. Cela pourrait également entraîner une légère perte de nuances de couleur. La méthode PNG est particulièrement utile pour les logos et les icônes et les signes et images contenant du texte. Pour les illustrations simples ou les éléments d'interface utilisateur et les captures d'écran aussi, PNG est bon. Les fichiers PNG sont généralement plus volumineux que les fichiers JPEG.webp.
Articles recommandés
Ceci a été un guide pour la liste des questions et réponses d'entrevue de conception Web afin que le candidat puisse réprimer facilement ces questions d'entrevue de conception Web. Ici, dans cet article, nous avons étudié les principales questions d'entrevue de conception Web qui sont souvent posées lors des entretiens. Vous pouvez également consulter les articles suivants pour en savoir plus -
- Questions d'entretiens chez Web Services
- Questions d'entretiens chez Top 10 Web Development
- Top 10 des logiciels de conception Web importants pour les débutants
- Questions d'entretiens chez Java Web Services
- Aide-mémoire Bootstrap 4