lun.

26

oct.

2015

10 sites Jimdo utilisant le design Barcelona

Si vous êtes à la recherche du design parfait, nous vous recommandons de jeter un oeil au design Barcelona ! Cette mise en page est simple à utiliser et fonctionne avec tous les types de sites, du site de photos en passant par l'e-boutique.

Points forts du design Barcelona

La plupart des sites web faits avec le design Barcelona ont cette faculté d'attirer l'oeil du visiteur avec leur arrière plan personnalisé tout en gardant leur design simple et clair. Ce n'est donc pas surprenant si de nombreux artistes et e-boutiques utilisent le design Barcelona.

Ce que nous aimons chez ce design c'est qu'il est vraiment polyvalent - vous pouvez aller d'un style minimaliste à quelque chose de plus sophistiqué en quelques clics, en changeant le fond par exemple. Ainsi, peu importe la thématique de votre site, vous pouvez la sublimer très facilement grâce à cette mise en page !

Ce qui nous plaît particulièrement dans le design Barcelona :

  • Son grand espace pour un logo tout en haut : Si vous avez un logo que vous adorez, ce design est parfait pour le mettre en valeur.
  • La possibilité d'utiliser une image de fond personnalisée qui attire l'oeil : Faites le test avec une belle image de fond en haute qualité (au moins 1800 x 1200px pour un résultat optimal !). Ou utilisez un arrière-fond coloré et le design sera toujours au top.
  • Ses différentes variations de design avec et sans la barre du haut colorée : Cela vous donne le choix entre différents looks avant même de commencer à vous occuper des détails.
  • Sa navigation horizontale au-dessus du logo claire et facile à lire : Vous pouvez utiliser les menus déroulants pour vos sous-pages. Pour un meilleur résultat, nous vous recommandons de limiter votre navigation sur une ligne.
  • Sa structure qui peut gérer de nombreuses pages - ou quelques-unes : Comme vous le verrez dans les exemples ci-dessous, Barcelona est parfait pour tous les formats de sites web, de l'e-boutique avec beaucoup d'articles au petit site avec seulement trois pages.
  • Sa sidebar en bas sous la partie contenu : Le fait de mettre toutes les informations en bas de votre site et non sur le côté vous laisse un grand espace dans la partie centrale pour vos photos, textes, vidéos, etc...

Pour vous montrer ces points forts concrètement, nous avons rassemblé 10 exemples de sites Jimdo créés partout dans le monde utilisant le design Barcelona. Regardez bien et voyez si ce design est fait pour votre site. Vous pouvez cliquez sur les photos pour vous rendre sur les sites.

1. Caroline Bech

Notre premier exemple est le portfolio de Caroline Bech, une actrice d'Amsterdam vivant actuellement à Londres pour vivre son rêve. Elle utilise une police de caractère simple et une palette de couleurs neutres qui va parfaitement avec ses photos, donnant à son site un look clair et pur. En ce moment, elle utilise une photo imposante sur toute sa page d'accueil pour ne pas que son site soit trop simple.

2. Vianne Fotografie

Tout comme le site de Caroline, celui de Vianne Fotografie se concentre sur les photos et peu sur le texte. Même avec le fond blanc, les images donnent exactement la bonne quantité de couleur pour rendre le site vivant - même sa page À propos (About) est composée de jolies images et graphiques pour se présenter de façon originale. Le peu de texte que vous voyez dans sa navigation et sur le blog apporte du caractère grâce à une police originale et graphique (elle utilise la police de caractère "Abel"). 

3. Oh So Pretty Design

Tout comme dans les exemples précédents, le site web du studio de design a lui aussi choisi un style très épuré, très graphique. Ils ont opté pour un fond blanc - leur bas de page est blanc également, pour un style minimaliste. Ce studio se concentre sur l'utilisation de couleurs pastels et d'images inspirées pour faire ressortir leur site. Ils ont également utilisé un mélange des polices serif et sans serif pour faire la différence entre les titres et le corps du texte. Ce site n'est pas complètement terminé mais nous aimons la direction qu'il a choisie. 

4. Sami Garra

La graphiste Sami Garra utilise le design Barcelona pour vendre ses superbes illustrations et goodies. À la place du look blanc vu plus haut, elle a opté pour un fond gris clair et contrebalance avec des couleurs énergiques qui vont avec ses articles et sa personnalité. De plus, elle utilise intelligemment la navigation afin d'avoir son e-boutique en espagnol et en anglais - une superbe utilisation de ce design.

5. La torre di Alice

La Torre Di Alice est un charmant Bed and breakfast utilisant le design Barcelona pour vanter les bienfaits d'une escapade loin de chez soi dans la jolie ville de Bosa, en Sardaigne. Marco et Alice, les sympathiques propriétaires, ont mis l'accent sur des photos de qualité qui reflètent leur univers atypique et leur accueil chaleureux. Le fond blanc est simple, la police Open Sans est sans fioriture, ce qui permet une lecture agréable de leur site et l'accent sur les images.

6. Barber Shop Rosario

Ce site est celui du salon de coiffure de Rosario : avec l'image du salon en fond, il rompt avec l'arrière-plan uni. A première vue, on peut penser que cela risque de distraire le visiteur, mais au contraire cela ajoute un effet de flou et de superposition subtile qui aide le visiteur à se concentrer sur le contenu. Cet exemple montre qu'un site peut être réussi tout en restant simple (il n'a que trois pages !).

7. Eleaxart Shop

Eleaxart est une e-boutique qui vend des vêtements et accessoires pour les adolescents.  Ce site utilise beaucoup d'éléments Jimdo de manière intelligente : pour afficher les images côte à côte, elles ont été insérées dans une galerie d'images. Pour éviter aux clients d'avoir trop à scroller (descendre sur la page), les articles sont placés côte à côte dans un élément Colonne. De plus, les articles les plus récents se trouvent sur la page d'accueil pour donner immédiatement aux clients une idée du style de l'e-boutique.

8. Frei Beutler

Cette e-boutique streetwear a choisi d'afficher les images de fond de manière aléatoire. Au lieu d'utiliser l'image de fond classique sur toute la largeur ou hauteur du site, ils ont simplement ajouté une image en haut du site, comme une image de header. En naviguant sur leur site ou en actualisant votre navigateur, vous verrez qu'ils ont trois images de fond différentes. Superbe ! La police de caractère utilisée, “Advent Pro” aide à parfaire le look.

9. É-sens

Un peu comme sur le site Frei Beutler, le site É-sens utilise un Diaporama d'images en fond - les images changent, mais restent en rapport avec leurs produits : des huiles naturelles relaxantes. Non seulement cet utilisateur a trouvé un moyen efficace d'utiliser la fonction Arrière-plan mais il utilise aussi les couleurs du mode Style pour uniformiser l'ensemble du site : un dégradé de vert se décline au travers des pages et lorsque les images d'arrière plan défilent, elles ne masquent pas les textes pour autant car un jeu de transparence préserve la bonne lisibilité. Subtil et efficace !

10. No pierdas tus libros

Ce dernier exemple montre que vous n'avez pas forcément besoin d'un fond ou de photos très fantaisistes - ce qu'il vous faut c'est une bonne palette de couleurs pour illuminer votre site. Un bel équilibre entre des icônes minimalistes, un jeu de couleurs pétillants et une police (Open Sans Condensed) adaptée ! 

Vous voulez essayer le design Barcelona sur votre site ? Rendez-vous dans la rubrique Designs dans la barre d'administration de votre site et sélectionnez ce design. Ou  bien, vous pouvez consulter notre vidéo tutorielle ci-dessous pour plus de détails :

Mathilde Kurtz

Blogueuse pour la communauté

Écrire commentaire

Commentaires : 11
  • #1

    isabelle vilain (mardi, 27 octobre 2015 10:20)

    un seul mot : bravo !

  • #2

    bleu-arc-en-ciel (mercredi, 28 octobre 2015 14:30)

    Bonjour à toute l'équipe JIMDO!

  • #3

    VERET (samedi, 21 novembre 2015 18:12)

    cela semble intéressant,
    peut on mettre des vidéos et de la musique ?

  • #4

    JimdoFrance (mercredi, 25 novembre 2015 21:33)

    Bonjour @Veret, oui vous pouvez insérer des vidéos sur votre site (tutoriel ici : http://aide.jimdo.com/basiques/%C3%A9l%C3%A9ments/video/) ainsi que de la musique (http://aide.jimdo.com/basiques/questions-fr%C3%A9quentes/comment-ins%C3%A9rer-de-la-musique-sur-mon-site/ et pour Deezer : http://aide.jimdo.com/outils/tutoriels/deezer/) Bonne continuation !

  • #5

    bDom (lundi, 30 novembre 2015 14:38)

    St Petersbourg, Chicago et Madrid ont ma préférence

  • #6

    iSteph (lundi, 30 novembre 2015 17:04)

    Intéressant… mais pourquoi la copie d'écran du site d'é-sens n'est-elle pas en français ??? Pourtant le site est bien en français !?

  • #7

    Ponctuel (lundi, 30 novembre 2015 22:11)

    Chicago est parfait. Seul inconvénient la partie droite qui reste vierge à cause du menu, pourtant situé bien plus haut ! Dommage.

  • #8

    fredvig (mardi, 01 décembre 2015 11:30)

    Ces sites sont remarqués régulièrement, en particulier É-sens, qui se démarque par sa direction artistique globale. L'avantage du design Barcelone (comme de nombreux "flat design" proposés par Jimdo) est de pouvoir disparaître derrière une identité visuelle originale.
    Concrètement, enlevez les superbes photographies de Caroline Bech, supprimez le logo de Barber Shop, renoncez au concept graphique bicolore de "no pierdas tus libros" (…) et vous n'aurez plus rien de remarquable. Le contenu prime sur le contenant. Le Modèle Jimdo doit surtout faire preuve de souplesse, d'être une architecture utile et discrète. En ce qui concerne Barcelona, le "gros" logo peut être utile pour la page d'accueil, mais devient gênant en consultation. Des adaptations en code personnalisés permettent de palier à ce "défaut".

  • #9

    Mania26 (samedi, 05 décembre 2015 07:16)

    Sur mon site, j'utilise aussi le thème Barcelona, mais je n'arrive pas avoir que l'image en haut comme dans le exemple du site de la boutique Frei Beutler !

  • #10

    Dina (jeudi, 24 décembre 2015 15:34)

    Je suis à 100% d'accord. Après avoir essayé plusieurs designs, le Design Barcelona est celui qui m'a le plus séduite. J'ai laissé mon arrière plan assez sobre et jouer surtout sur les couleurs du logo, de la barre de menu et des images mises en avant. C'est mon 1er site web et j'ai vraiment trouvé que ce design permet beaucoup de choses. Je laisse un lien pour ceux que le rendu intéresserait:

    www.kadolindo.com

  • #11

    Casquette Nets (vendredi, 29 janvier 2016 03:53)

    Le Modèle Jimdo doit surtout faire preuve de souplesse, d'être une architecture utile et discrète.