{"id":3856,"date":"2020-09-28T07:58:53","date_gmt":"2020-09-28T07:58:53","guid":{"rendered":"https:\/\/www.startechup.com\/?p=3856"},"modified":"2024-11-18T08:13:10","modified_gmt":"2024-11-18T08:13:10","slug":"frontend-web-design-101-what-makes-a-good-frontend-web-design","status":"publish","type":"post","link":"https:\/\/www.startechup.com\/fr\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/","title":{"rendered":"Frontend Web Design 101 : Ce qui fait un bon design de site web"},"content":{"rendered":"<p>Si vous souhaitez cr\u00e9er un site web r\u00e9actif, attrayant et bien con\u00e7u, vous devez tenir compte de plusieurs \u00e9l\u00e9ments avant de finaliser vos plans. Aujourd'hui plus que jamais, il est essentiel de proc\u00e9der \u00e9tape par \u00e9tape et de ne pas se pr\u00e9cipiter, car le march\u00e9 est tr\u00e8s encombr\u00e9. Vous devrez vous d\u00e9marquer pour vous faire remarquer et cr\u00e9er une impression positive et durable sur votre public cible. Comme pour la cr\u00e9ation d'un <a href=\"https:\/\/www.startechup.com\/fr\/blog\/building-enterprise-mobile-applications\/\" target=\"_blank\" rel=\"noreferrer noopener\">application mobile<\/a>l'un des principaux aspects sur lesquels vous devez vous concentrer est le frontend <a href=\"https:\/\/www.startechup.com\/fr\/blog\/the-future-of-frontend-web-design-are-your-skills-up-to-date\/\">conception de sites web<\/a> de votre site.<\/p>\n\n\n\n<p>Le \"frontend\" de votre site Web est essentiellement l'interface utilisateur (IU). C'est ce que les visiteurs de votre site voient, cliquent, remplissent et utilisent. Elle englobe tout ce avec quoi les utilisateurs interagissent : curseurs, menus d\u00e9roulants, couleurs et polices, entre autres. En tant que telle, la conception web frontale consiste \u00e0 cr\u00e9er une interface utilisateur fluide, r\u00e9active, facile et efficace. <a href=\"https:\/\/www.startechup.com\/fr\/services\/ui-ux-design\/\">une exp\u00e9rience utilisateur satisfaisante<\/a>.<\/p>\n\n\n\n<p>Voici quelques-uns des \u00e9l\u00e9ments de front les plus essentiels :<\/p>\n\n\n\n<ul>\n<li>Graphiques<\/li>\n\n\n\n<li>Mise en page<\/li>\n\n\n\n<li>Aspects de l'interface utilisateur - barres de navigation, barres d'outils et boutons, parmi beaucoup d'autres<\/li>\n\n\n\n<li>Texte \/ Contenu<\/li>\n\n\n\n<li>Audio et vid\u00e9o<\/li>\n\n\n\n<li>Personnalisations et th\u00e8mes<\/li>\n\n\n\n<li>Flux global<\/li>\n<\/ul>\n\n\n\n<p>Si vous \u00eates sur le point de construire votre site web mais que vous ne savez pas comment ou par o\u00f9 commencer avec le <a href=\"https:\/\/www.startechup.com\/fr\/blog\/the-future-of-frontend-web-design-are-your-skills-up-to-date\/\">conception frontend<\/a>Pour vous aider, voici quelques conseils et astuces qui vous seront utiles.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_47_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Table des mati\u00e8res<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"ez-toc-toggle-icon-1\"><label for=\"item-69d625644b00a\" aria-label=\"Table des mati\u00e8res\"><span style=\"display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;direction:ltr;\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/label><input  type=\"checkbox\" id=\"item-69d625644b00a\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.startechup.com\/fr\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/#Frontend_Website_Design_Tips_and_Tricks\" title=\"Conseils et astuces pour la conception d&#039;un site web frontal\">Conseils et astuces pour la conception d'un site web frontal<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.startechup.com\/fr\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/#1_Typography_is_a_major_factor\" title=\"1. La typographie est un facteur majeur.\">1. La typographie est un facteur majeur.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.startechup.com\/fr\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/#2_Go_for_a_modern_look\" title=\"2. Optez pour un look moderne.\">2. Optez pour un look moderne.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.startechup.com\/fr\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/#3_Integrate_visual_elements\" title=\"3. Int\u00e9grer des \u00e9l\u00e9ments visuels.\">3. Int\u00e9grer des \u00e9l\u00e9ments visuels.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.startechup.com\/fr\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/#4_Stay_simple\" title=\"4. Restez simple.\">4. Restez simple.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.startechup.com\/fr\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/#5_Look_at_the_bigger_picture\" title=\"5. Regardez la situation dans son ensemble.\">5. Regardez la situation dans son ensemble.<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"h-frontend-website-design-tips-and-tricks\"><span class=\"ez-toc-section\" id=\"Frontend_Website_Design_Tips_and_Tricks\"><\/span>Conseils et astuces pour la conception d'un site web frontal<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-typography-is-a-major-factor\"><span class=\"ez-toc-section\" id=\"1_Typography_is_a_major_factor\"><\/span><strong>1. La typographie est un facteur majeur.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Les visiteurs aiment les sites web qui sont faciles \u00e0 consulter, c'est pourquoi il est essentiel de choisir la bonne typographie. Choisissez des caract\u00e8res simples mais \u00e9l\u00e9gants ; les gens pr\u00e9f\u00e8rent les lettres qu'ils peuvent lire facilement. \u00c9vitez la calligraphie et les autres typographies artistiques et de fantaisie. La plupart du temps, elles sont difficiles \u00e0 lire.<\/p>\n\n\n\n<p>Dans la <a href=\"https:\/\/www.startechup.com\/fr\/technologies\/wordpress-php\/\">conception frontend<\/a> , les caract\u00e8res doivent \u00eatre de diff\u00e9rentes tailles, un peu \u00e9pais pour pouvoir \u00eatre lus m\u00eame \u00e0 distance, et propres (les traits). En outre, ne variez pas plus de deux polices de caract\u00e8res et utilisez-les de mani\u00e8re coh\u00e9rente sur le site web et dans tous vos comptes de m\u00e9dias sociaux. Votre typographie doit correspondre \u00e0 la conception g\u00e9n\u00e9rale ou au th\u00e8me du site.<\/p>\n\n\n\n<p>Enfin, il faut se concentrer non seulement sur les polices de caract\u00e8res mais aussi sur l'espacement, notamment entre les lettres et les lignes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-go-for-a-modern-look\"><span class=\"ez-toc-section\" id=\"2_Go_for_a_modern_look\"><\/span><strong>2. Optez pour un look moderne.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u00c0 quoi ressemble un site web moderne ? Il n'y a pas de description particuli\u00e8re d'un site ou d'une page moderne. Cependant, un site moderne, branch\u00e9 et \u00e9l\u00e9gant pr\u00e9sente les \u00e9l\u00e9ments ou caract\u00e9ristiques suivants :<\/p>\n\n\n\n<ul>\n<li>Beaucoup d'espace blanc<\/li>\n\n\n\n<li>Classique mais \u00e9l\u00e9gant<\/li>\n\n\n\n<li>Plat ou semi-plat<\/li>\n\n\n\n<li>Une palette de couleurs<\/li>\n\n\n\n<li>Le mobile au service de l'action<\/li>\n\n\n\n<li>Compatibilit\u00e9 entre plusieurs appareils<\/li>\n<\/ul>\n\n\n\n<p>Mais soyez prudents. Ce qui est consid\u00e9r\u00e9 comme moderne aujourd'hui deviendra obsol\u00e8te dans les prochaines ann\u00e9es. Vous vous souvenez d'Adobe Flash ? C'\u00e9tait une tendance du web design il y a quelques ann\u00e9es. La plupart des meilleurs sites web du monde int\u00e8grent Flash \u00e0 leurs pages parce qu'il est cool, \u00e9l\u00e9gant et tr\u00e8s moderne. Cependant, les codecs de Flash ont rendu les sites web lents. Les pages web se chargent lentement, et parfois, il fait planter les navigateurs web. En raison de ces probl\u00e8mes, Adobe va officiellement <a href=\"https:\/\/blog.adobe.com\/en\/publish\/2017\/07\/25\/adobe-flash-update.html#gs.h2o1sh\" target=\"_blank\" rel=\"noreferrer noopener\">arr\u00eater Flash<\/a> en d\u00e9cembre 2020.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-integrate-visual-elements\"><span class=\"ez-toc-section\" id=\"3_Integrate_visual_elements\"><\/span><strong>3. Int\u00e9grer des \u00e9l\u00e9ments visuels.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Dans la <a href=\"https:\/\/www.startechup.com\/fr\/services\/web-frontend-development\/\">d\u00e9veloppement frontal<\/a> a besoin d'\u00e9l\u00e9ments visuels qui attirent l'attention. Le public aime tout ce qui est visuel, tout ce qu'il peut voir ou regarder. C'est pourquoi il est essentiel d'ajouter des images ou des photos, des vid\u00e9os, des animations et des illustrations. Ces \u00e9l\u00e9ments visuels sont \u00e9galement efficaces pour attirer vos visiteurs, ce qui signifie qu'ils passeront plus de temps sur votre site - moins de taux de rebond.<\/p>\n\n\n\n<p>Pour que cette strat\u00e9gie fonctionne, vous devrez utiliser uniquement des photos, vid\u00e9os, illustrations et autres supports visuels de la meilleure qualit\u00e9. Vous voulez faire passer vos id\u00e9es ? Pourquoi ne pas essayer de publier une infographie sur votre blog ou votre page d'accueil ? Si vous utilisez des photos ou des images scann\u00e9es mal \u00e9clair\u00e9es, vous ne devez pas vous attendre \u00e0 ce que les visiteurs s'\u00e9merveillent de la beaut\u00e9 de votre site ou de votre page. Travaillez avec soin, utilisez votre temps \u00e0 bon escient et choisissez bien votre mat\u00e9riel visuel. M\u00eame une petite erreur peut affecter l'ensemble du site web.<\/p>\n\n\n\n<p>Choisissez toujours des images et des vid\u00e9os en haute r\u00e9solution. Vous pouvez demander \u00e0 quelqu'un de faire des illustrations vectorielles ou graphiques. Si la taille du fichier de votre image vous inqui\u00e8te, compressez votre photo haute r\u00e9solution \u00e0 l'aide d'un outil de compression d'images en ligne. La plupart du temps, ces outils permettent de r\u00e9duire de 40% \u00e0 80% la taille du fichier d'origine. La qualit\u00e9 sera toujours la m\u00eame.<\/p>\n\n\n\n<p>Pour les vid\u00e9os en haute r\u00e9solution (1080p et 4K), t\u00e9l\u00e9chargez vos vid\u00e9os sur YouTube et int\u00e9grez-les \u00e0 votre site web. YouTube fera tout le travail pour vous.<\/p>\n\n\n\n<p>Les autres formes de mat\u00e9riel visuel sont les graphiques et les tableaux, les captures d'\u00e9cran, les GIF et les m\u00e8mes.<\/p>\n\n\n\n<p>De plus, optimisez vos images et autres \u00e9l\u00e9ments visuels en utilisant les balises ALT, le bon nom de fichier image et vid\u00e9o, et en choisissant leur bon emplacement sur le site ou la page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-stay-simple\"><span class=\"ez-toc-section\" id=\"4_Stay_simple\"><\/span><strong>4. Restez simple.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Certains sites web n'obtiennent pas de bons r\u00e9sultats aupr\u00e8s des visiteurs parce qu'ils semblent trop compliqu\u00e9s. C'est comme s'ils essayaient d'\u00eatre quelque chose qu'ils ne sont pas. Les concepteurs mettent beaucoup de choses dans une page, modifient les mod\u00e8les et finissent par affecter le flux g\u00e9n\u00e9ral et l'effet du site. Par exemple, parce que vous voulez que votre site soit \u00e9l\u00e9gant et diff\u00e9rent, vous avez d\u00e9cid\u00e9 de placer la barre de navigation en bas de la page plut\u00f4t qu'en haut. Bien que cela soit esth\u00e9tiquement courageux, cela ne vous fera aucun bien. Les gens savent que les barres de navigation sont g\u00e9n\u00e9ralement situ\u00e9es en haut d'une page web, c'est donc l\u00e0 qu'ils doivent aller. S'ils n'y trouvent rien, ils ont tendance \u00e0 quitter le site et \u00e0 se rendre sur un autre qui est plus facile \u00e0 parcourir. Taux de rebond \u00e9lev\u00e9 !<\/p>\n\n\n\n<p>Toutefois, cela ne signifie pas pour autant que votre site Web doit rester fade ou insipide. Cela signifie seulement que vous devez r\u00e9fl\u00e9chir \u00e0 des moyens cr\u00e9atifs de rendre votre conception web frontale unique sans oublier l'exp\u00e9rience et la satisfaction globale de l'utilisateur. N'oubliez pas que sans visiteurs satisfaits, m\u00eame les sites Web les plus modernes et les mieux con\u00e7us ne servent \u00e0 rien.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-5-look-at-the-bigger-picture\"><span class=\"ez-toc-section\" id=\"5_Look_at_the_bigger_picture\"><\/span><strong>5. Regardez la situation dans son ensemble.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Une <a href=\"https:\/\/www.startechup.com\/fr\/blog\/how-to-choose-web-development-company\/\" target=\"_blank\" rel=\"noreferrer noopener\">website is your online address<\/a>; your virtual head office. Therefore, it is one big \u201ccompound made up of several elements.\u201d Don\u2019t make the mistake of focusing on just one aspect of your headquarters, focus on the big picture. If you take too much time working on just one small aspect, you might forget that there are many others that also need your attention. In the end, you won\u2019t be able to complete the big picture because you spent too much time working on just one element.<\/p>\n\n\n\n<p>Ainsi, vous devez cr\u00e9er un plan ou un calendrier de conception de sites web en amont afin de vous rappeler constamment qu'apr\u00e8s avoir travaill\u00e9 sur les petits d\u00e9tails, vous devez \u00e9galement vous concentrer sur les facteurs principaux. Travaillez lentement mais s\u00fbrement. Encore une fois, ne pr\u00e9cipitez pas les choses.<\/p>\n\n\n\n<p>La meilleure fa\u00e7on de s'assurer que vous \u00eates sur la bonne voie est d'engager une soci\u00e9t\u00e9  dans le secteur de la <a href=\"https:\/\/www.startechup.com\/fr\/services\/ui-ux-design\/\">conception frontend<\/a> . Un bon concepteur conna\u00eetra tous les pourquoi, quoi et comment il faut cr\u00e9er un frontend moderne et bien con\u00e7u pour votre site web.<\/p>","protected":false},"excerpt":{"rendered":"<p>If you\u2019re looking to build a responsive, engaging, and well-designed website, you have several things to consider before finalizing your plans. Now more than ever, it is essential to take one step at a time and not rush things \u2013 because the market is quite crowded. You\u2019ll need to stand out to get noticed and [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":3864,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":""},"categories":[56],"tags":[],"acf":[],"featured_image_urls_v2":{"full":["https:\/\/www.startechup.com\/wp-content\/uploads\/Frontend-Web-Design-101-What-makes-a-good-frontend-web-design-min.jpg",1920,1461,false],"thumbnail":["https:\/\/www.startechup.com\/wp-content\/uploads\/Frontend-Web-Design-101-What-makes-a-good-frontend-web-design-min-150x150.jpg",150,150,true],"medium":["https:\/\/www.startechup.com\/wp-content\/uploads\/Frontend-Web-Design-101-What-makes-a-good-frontend-web-design-min-300x228.jpg",300,228,true],"medium_large":["https:\/\/www.startechup.com\/wp-content\/uploads\/Frontend-Web-Design-101-What-makes-a-good-frontend-web-design-min-768x584.jpg",580,441,true],"large":["https:\/\/www.startechup.com\/wp-content\/uploads\/Frontend-Web-Design-101-What-makes-a-good-frontend-web-design-min-1024x779.jpg",580,441,true],"1536x1536":["https:\/\/www.startechup.com\/wp-content\/uploads\/Frontend-Web-Design-101-What-makes-a-good-frontend-web-design-min-1536x1169.jpg",1536,1169,true],"2048x2048":["https:\/\/www.startechup.com\/wp-content\/uploads\/Frontend-Web-Design-101-What-makes-a-good-frontend-web-design-min-2048x1558.jpg",2048,1558,true],"trp-custom-language-flag":["https:\/\/www.startechup.com\/wp-content\/uploads\/Frontend-Web-Design-101-What-makes-a-good-frontend-web-design-min.jpg",16,12,false],"post-thumbnail":["https:\/\/www.startechup.com\/wp-content\/uploads\/Frontend-Web-Design-101-What-makes-a-good-frontend-web-design-min-1200x913.jpg",1200,913,true],"twentytwenty-fullscreen":["https:\/\/www.startechup.com\/wp-content\/uploads\/Frontend-Web-Design-101-What-makes-a-good-frontend-web-design-min-1980x1506.jpg",1980,1506,true]},"post_excerpt_stackable_v2":"<p>If you\u2019re looking to build a responsive, engaging, and well-designed website, you have several things to consider before finalizing your plans. Now more than ever, it is essential to take one step at a time and not rush things \u2013 because the market is quite crowded. You\u2019ll need to stand out to get noticed and create a positive and lasting impression on your target audience. Likened to creating a mobile app, one major aspect you need to focus on is the frontend web design of your site. The \u201cfrontend\u201d of your website is basically the user interface (UI). It\u2019s what\u2026<\/p>\n","category_list_v2":"<a href=\"https:\/\/www.startechup.com\/fr\/blog\/category\/web-development\/\" rel=\"category tag\">Web Development<\/a>","author_info_v2":{"name":"Baptiste Leroux","url":"https:\/\/www.startechup.com\/fr\/blog\/author\/bleroux\/"},"comments_num_v2":"0 commentaire","yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v21.8.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Frontend Web Design 101: What makes a good frontend web design<\/title>\n<meta name=\"description\" content=\"Building a website but do not know how or where to start with the frontend web design? Here are several tips and tricks you\u2019ll find helpful.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.startechup.com\/fr\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Web Design 101: What makes a good frontend web design\" \/>\n<meta property=\"og:description\" content=\"Building a website but do not know how or where to start with the frontend web design? Here are several tips and tricks you\u2019ll find helpful.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.startechup.com\/fr\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Startechup Inc\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/startechup\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-28T07:58:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-18T08:13:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.startechup.com\/wp-content\/uploads\/Frontend-Web-Design-101-What-makes-a-good-frontend-web-design-min.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1461\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Baptiste Leroux\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@startechup\" \/>\n<meta name=\"twitter:site\" content=\"@startechup\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Baptiste Leroux\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.startechup.com\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.startechup.com\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/\"},\"author\":{\"name\":\"Baptiste Leroux\",\"@id\":\"https:\/\/www.startechup.com\/#\/schema\/person\/b222705da4508971805f0adf58aea109\"},\"headline\":\"Frontend Web Design 101: What makes a good frontend web design\",\"datePublished\":\"2020-09-28T07:58:53+00:00\",\"dateModified\":\"2024-11-18T08:13:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.startechup.com\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/\"},\"wordCount\":1137,\"publisher\":{\"@id\":\"https:\/\/www.startechup.com\/#organization\"},\"articleSection\":[\"Web Development\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.startechup.com\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/\",\"url\":\"https:\/\/www.startechup.com\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/\",\"name\":\"Frontend Web Design 101: What makes a good frontend web design\",\"isPartOf\":{\"@id\":\"https:\/\/www.startechup.com\/#website\"},\"datePublished\":\"2020-09-28T07:58:53+00:00\",\"dateModified\":\"2024-11-18T08:13:10+00:00\",\"description\":\"Building a website but do not know how or where to start with the frontend web design? Here are several tips and tricks you\u2019ll find helpful.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.startechup.com\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.startechup.com\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.startechup.com\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.startechup.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Web Design 101: What makes a good frontend web design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.startechup.com\/#website\",\"url\":\"https:\/\/www.startechup.com\/\",\"name\":\"Startechup Inc\",\"description\":\"Startechup Inc.\",\"publisher\":{\"@id\":\"https:\/\/www.startechup.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.startechup.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.startechup.com\/#organization\",\"name\":\"Startechup\",\"url\":\"https:\/\/www.startechup.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.startechup.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.startechup.com\/wp-content\/uploads\/startechup-logo-blue-red-transparent.svg\",\"contentUrl\":\"https:\/\/www.startechup.com\/wp-content\/uploads\/startechup-logo-blue-red-transparent.svg\",\"width\":181,\"height\":28,\"caption\":\"Startechup\"},\"image\":{\"@id\":\"https:\/\/www.startechup.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/startechup\/\",\"https:\/\/twitter.com\/startechup\",\"https:\/\/www.linkedin.com\/company\/startechup\",\"https:\/\/www.youtube.com\/channel\/UC_4XR4imvk28kEPt9gyhZ4g\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.startechup.com\/#\/schema\/person\/b222705da4508971805f0adf58aea109\",\"name\":\"Baptiste Leroux\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.startechup.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/77aa2b82447309159eae4d9ee3fe0989?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/77aa2b82447309159eae4d9ee3fe0989?s=96&d=mm&r=g\",\"caption\":\"Baptiste Leroux\"},\"description\":\"After several years in the corporate world, I create my first Web startup as a social enterprise. Working with talented people, excellent software development skills, good communication, and a competitive pricing, we shifted our focus to web &amp; mobile outsourcing projects.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/pub\/baptiste-leroux\/a\/662\/550\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Frontend Web Design 101 : Ce qui fait un bon design de site web","description":"Vous construisez un site web mais vous ne savez pas comment ni par o\u00f9 commencer avec la conception d'un site web frontal ? Voici quelques conseils et astuces qui vous seront utiles.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.startechup.com\/fr\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/","og_locale":"fr_FR","og_type":"article","og_title":"Frontend Web Design 101: What makes a good frontend web design","og_description":"Building a website but do not know how or where to start with the frontend web design? Here are several tips and tricks you\u2019ll find helpful.","og_url":"https:\/\/www.startechup.com\/fr\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/","og_site_name":"Startechup Inc","article_publisher":"https:\/\/www.facebook.com\/startechup\/","article_published_time":"2020-09-28T07:58:53+00:00","article_modified_time":"2024-11-18T08:13:10+00:00","og_image":[{"width":1920,"height":1461,"url":"https:\/\/www.startechup.com\/wp-content\/uploads\/Frontend-Web-Design-101-What-makes-a-good-frontend-web-design-min.jpg","type":"image\/jpeg"}],"author":"Baptiste Leroux","twitter_card":"summary_large_image","twitter_creator":"@startechup","twitter_site":"@startechup","twitter_misc":{"\u00c9crit par":"Baptiste Leroux","Dur\u00e9e de lecture estim\u00e9e":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.startechup.com\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/#article","isPartOf":{"@id":"https:\/\/www.startechup.com\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/"},"author":{"name":"Baptiste Leroux","@id":"https:\/\/www.startechup.com\/#\/schema\/person\/b222705da4508971805f0adf58aea109"},"headline":"Frontend Web Design 101: What makes a good frontend web design","datePublished":"2020-09-28T07:58:53+00:00","dateModified":"2024-11-18T08:13:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.startechup.com\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/"},"wordCount":1137,"publisher":{"@id":"https:\/\/www.startechup.com\/#organization"},"articleSection":["Web Development"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/www.startechup.com\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/","url":"https:\/\/www.startechup.com\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/","name":"Frontend Web Design 101 : Ce qui fait un bon design de site web","isPartOf":{"@id":"https:\/\/www.startechup.com\/#website"},"datePublished":"2020-09-28T07:58:53+00:00","dateModified":"2024-11-18T08:13:10+00:00","description":"Vous construisez un site web mais vous ne savez pas comment ni par o\u00f9 commencer avec la conception d'un site web frontal ? Voici quelques conseils et astuces qui vous seront utiles.","breadcrumb":{"@id":"https:\/\/www.startechup.com\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.startechup.com\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.startechup.com\/blog\/frontend-web-design-101-what-makes-a-good-frontend-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.startechup.com\/"},{"@type":"ListItem","position":2,"name":"Frontend Web Design 101: What makes a good frontend web design"}]},{"@type":"WebSite","@id":"https:\/\/www.startechup.com\/#website","url":"https:\/\/www.startechup.com\/","name":"Startechup Inc","description":"Startechup Inc.","publisher":{"@id":"https:\/\/www.startechup.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.startechup.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.startechup.com\/#organization","name":"Startechup","url":"https:\/\/www.startechup.com\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.startechup.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.startechup.com\/wp-content\/uploads\/startechup-logo-blue-red-transparent.svg","contentUrl":"https:\/\/www.startechup.com\/wp-content\/uploads\/startechup-logo-blue-red-transparent.svg","width":181,"height":28,"caption":"Startechup"},"image":{"@id":"https:\/\/www.startechup.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/startechup\/","https:\/\/twitter.com\/startechup","https:\/\/www.linkedin.com\/company\/startechup","https:\/\/www.youtube.com\/channel\/UC_4XR4imvk28kEPt9gyhZ4g"]},{"@type":"Person","@id":"https:\/\/www.startechup.com\/#\/schema\/person\/b222705da4508971805f0adf58aea109","name":"Baptiste Leroux","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.startechup.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/77aa2b82447309159eae4d9ee3fe0989?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/77aa2b82447309159eae4d9ee3fe0989?s=96&d=mm&r=g","caption":"Baptiste Leroux"},"description":"Apr\u00e8s plusieurs ann\u00e9es dans le monde de l'entreprise, je cr\u00e9e ma premi\u00e8re start-up sur le Web en tant qu'entreprise sociale. En travaillant avec des personnes talentueuses, d'excellentes comp\u00e9tences en d\u00e9veloppement de logiciels, une bonne communication et des prix comp\u00e9titifs, nous avons orient\u00e9 notre attention vers des projets d'externalisation du web et du mobile.","sameAs":["https:\/\/www.linkedin.com\/pub\/baptiste-leroux\/a\/662\/550"]}]}},"_links":{"self":[{"href":"https:\/\/www.startechup.com\/fr\/wp-json\/wp\/v2\/posts\/3856"}],"collection":[{"href":"https:\/\/www.startechup.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.startechup.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.startechup.com\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.startechup.com\/fr\/wp-json\/wp\/v2\/comments?post=3856"}],"version-history":[{"count":5,"href":"https:\/\/www.startechup.com\/fr\/wp-json\/wp\/v2\/posts\/3856\/revisions"}],"predecessor-version":[{"id":18799,"href":"https:\/\/www.startechup.com\/fr\/wp-json\/wp\/v2\/posts\/3856\/revisions\/18799"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.startechup.com\/fr\/wp-json\/wp\/v2\/media\/3864"}],"wp:attachment":[{"href":"https:\/\/www.startechup.com\/fr\/wp-json\/wp\/v2\/media?parent=3856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.startechup.com\/fr\/wp-json\/wp\/v2\/categories?post=3856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.startechup.com\/fr\/wp-json\/wp\/v2\/tags?post=3856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}