Ce mois-ci sur le blog, nous prĂ©senterons certains de nos nouveaux modèles prĂ©fĂ©rĂ©s dans le cadre de notre concours du Mois de la rĂ©invention. Le membre de notre Ă©quipe de soutien, Aeramis, a dĂ©fendu la belle Barcelone … cette semaine, je vais contrer avec l'Ă©quipe de Rio de Janeiro.
Si vous cherchez une nouvelle Ă©quipe Jimdo, voici pourquoi je pense que vous devriez essayer l'Ă©blouissante Rio:
- Tout sur les images: Si vous avez de superbes photos, Rio est le modèle parfait pour le montrer.
- Une barre de navigation simple et centrée sur l'utilisateur: Rio n'a rien à cacher, et cela comprend des sous-pages et des menus déroulants. C'est pourquoi cela fonctionne mieux avec une navigation horizontale simple (et des sites Web qui n'ont pas beaucoup de pages).
- Beaucoup d'espace sur chaque page: Avec Rio, la "barre latérale" est vraiment en bas, donc rien ne s'oppose à vos images. Il a une zone de contenu très large avec laquelle travailler, et tous les liens ou icônes dont vous avez besoin peuvent aller en bas de la page.
- Une zone d'en-tête et de logo flexible: Comme vous le verrez dans les exemples ci-dessous, les sites Web utilisent la grande en-tête Rio pour un logo en vedette, un slogan / slogan, ou les deux… et puis certains sites Web laissent la zone complètement vide. Tu décides.
Conseils pour bien vous entendre avec Rio:
L'équipe de Rio est certainement surprenante, mais il y a quelques astuces pour s'entendre. Ci-dessous, j'ai compilé une liste de 10 sites Web Jimdo réels qui fonctionnent très bien. Qu'ils ont en commun? Vous remarquerez quelques pratiques recommandées:
Images de haute qualité:
Rio de Janeiro est conçu pour les images d'arrière-plan pleine largeur, il est donc préférable d'en profiter. D'autres modèles utilisent également des images d'arrière-plan, mais ils affichent souvent une plus petite partie de l'image ou ont une superposition qui en couvre une partie. Ce n'est pas le cas avec Rio: son image est là pour tout le monde à voir, les défauts et tout. Pour cette raison, nous recommandons que les images d'arrière-plan aient une largeur d'au moins 2000 pixels. Si vous n'êtes pas sûr de ce que cela signifie, vérifiez ceci
manuel sur l'optimisation d'image. Si vous n'avez toujours pas les bonnes images, essayez certaines de nos recommandations pour les sites d'images gratuites.
- Présentations générales: Pourquoi se contenter d'une seule photo en arrière-plan alors que vous pouvez en montrer plus? Beaucoup de ces exemples utilisent un diaporama en arrière-plan. Vous pouvez en configurer un vous-même en sélectionnant Arrière-plan dans l'éditeur de style, puis en choisissant l'option Diaporama
- Coloration uniforme: De nombreux sites Web à succès choisissent une couleur d'accent différente et l'utilisent dans les titres, les boutons, les lignes horizontales, les icônes et les liens. Le résultat est un aspect lisse et poli qui se démarque vraiment, surtout lorsque le reste du site est conservé dans des tons simples de noir, blanc et gris.
- Navigation simple sur une ligne: Rio de Janeiro est mieux vu lorsque la navigation horizontale est courte et douce. Si vous avez besoin de beaucoup de menus déroulants, de sous-pages ou si votre navigation est divisée en deux lignes, vous devriez probablement rechercher un modèle différent qui peut contenir plus de contenu, comme Barcelone.
- Utilisation de l'élément de colonne pour le corps du texte: Étant donné que Rio a une zone de contenu si grande, il est utile de diviser le texte en colonnes au lieu de le couvrir sur tout l'écran (les lignes de plus de 60 caractères peuvent être difficiles à lire à l'écran). Pour ce faire, ajoutez un élément Colonnes, puis placez un élément Texte dans chaque colonne.
Sites Web de Real Jimdo utilisant le modèle de Rio de Janeiro
1. Studio 23
La firme de design d'intĂ©rieur Studio 23 a judicieusement choisi les images d'arrière-plan pour leur diaporama – remarquez comment chaque photo complète la belle couleur bleu clair que vous avez choisie pour votre menu, vos titres et vos icĂ´nes. Ils ont Ă©galement veillĂ© Ă ce que leur logo vierge soit toujours clairement visible lorsque chaque image tourne derrière. Une coloration constante tout au long, ainsi que des polices inattendues mais faciles Ă lire ("Text Me One" et "Exo 2") complètent ce look charmant.
2. Unger Music
Au premier coup d'œil sur ce site, vous verrez un logo frappant sur fond orange. Ensuite, il s'estompe dans une belle présentation en noir et blanc de différents musiciens. Comment ont-ils obtenu cet effet? Simple: Leur logo sur fond orange est en fait la première image qu'ils ont téléchargée dans leur diaporama d'arrière-plan. Très intelligent. Remarquez comment ils ont également fait correspondre leurs titres, liens et lignes horizontales à l'orange de leur logo, et ont clairement organisé leurs pages avec des colonnes et un fond blanc pour un look soigné et professionnel. Cet exemple montre que le texte noir sur fond blanc ne peut jamais échouer et seulement une subtile touche de couleur.
3. Ferme de la Moissonnière
Maintenant que je sais qu'il est possible de rester dans une fromagerie en France, je ne veux plus aller ailleurs. La Ferme de la Moissonnière est une entreprise familiale qui produit trois types de fromages et permet également aux voyageurs de rester à la ferme. Son site Web confortable fait grand usage de Rio. La barre de navigation est simple, ils n'utilisent pas beaucoup de texte et ils utilisent une belle police pour les en-têtes ("Alex Brush") qui complète votre logo. J'adore aussi le petit croquis d'un seau de lait qu'ils ont dessiné sur leur photo de fond avant de la télécharger sur leur site. Points bonus pour le favicon mignon de vache!
4. Ella Don Photography
Sur ce site, la photographe Ella Don présente un portfolio qui a un réel impact. Le diaporama des images d'arrière-plan vous donne immédiatement une idée de l'ampleur du travail, des mariages aux événements sportifs (à Steve Wozniak en Segway… qui savait?) Dans cet exemple, le site Web a une navigation qui est Entièrement transparent, mais cela fonctionne car la couleur des liens est facilement visible sur les images d'arrière-plan.
5. Antonio Brown
Ce site Web pour le joueur des Pittsburgh Steelers, Antonio Brown, cache en fait la barre de navigation et développe la plupart du contenu directement sur la page d'accueil. Comment cela fonctionne-t-il sans paraître désordonné ou déroutant? Ils réduisent le texte au minimum et utilisent l'élément de bouton et les graphiques pour guider les visiteurs dans la page. Ce site Web utilise également une marque et une couleur fortes (j'adore le fait que les Steelers soient jaunes!) Pour que tout soit clair et cohérent.
6. Bob Casneuf
Ce site Web pour l'architecte paysagiste Bob Casneuf démarre du bon pied avec un logo créatif et ludique à l'avant et au centre. C'est intéressant pour moi de voir comment il utilise presque le même jaune que le site Web d'Antonio Brown avec le même effet. C'est une excellente couleur pour mettre en évidence les titres et donner au site un aspect cohérent. J'aime aussi la façon dont vous utilisez les colonnes sur votre page d'accueil pour diviser votre texte. Les touches finales incluent le favicon personnalisé et les images de feuilles que vous utilisez comme lignes horizontales (pour cet effet, vous avez chargé un graphique simple comme élément photographique). Leur site Web reflète tout ce qu'un architecte paysagiste souhaiterait: un œil attentif et une attention aux moindres détails.
7. Images de mariage
Bien que ce site Web puisse sembler simple, en y regardant de plus près, vous pouvez voir qu'il a vraiment tout ce dont un photographe a besoin: des galeries, des témoignages, une section À propos et un moyen facile d'entrer en contact. Le résultat est un look minimaliste et moderne, complété par le choix de la police (Advent Pro).
8. U.G. Irajpanah
Ce site Web est si unique que vous devrez peut-être y regarder deux fois pour reconnaître le modèle de Rio de Janeiro. Dans cet exemple, le graphiste U.G. Irajpanah a utilisé une image monochrome saisissante pour l'arrière-plan. Cela fait une première impression qui donne envie d'en savoir plus. En règle générale, le texte d'en-tête est aligné au centre, mais dans ce cas, il est déplacé vers la gauche, ce qui est un mouvement inattendu qui ajoute un intérêt visuel à un site qui serait autrement minimaliste. L'utilisation de la police Courier New complète vraiment cet aspect.
9. Bauernkate Klein Thurow
De belles photos, des couleurs cohĂ©rentes et le choix de la bonne police, ressentez-vous une tendance ici? Ce bed and breakfast en Allemagne a crĂ©Ă© un site Web attrayant qui donne envie de se lever et de rester un moment. Jetez un Ĺ“il Ă la façon dont ils ont utilisĂ© un Ă©lĂ©ment Colonnes, texte et Ă©lĂ©ments photo pour crĂ©er une page variĂ©e avec un intĂ©rĂŞt visuel pour dĂ©crire leurs diffĂ©rentes offres – bien mieux qu'un simple bloc long avec beaucoup de texte! Et il peut ĂŞtre difficile de choisir parmi plus de 600 polices Web Google, mais elles ont fait un excellent travail ici. Ils utilisent Doppio One, Diplomata SC et IM Fell Double Pica.
10. Photographie d'Alina Atzler
Cet exemple vient d'Alina Atzler de Jimdo elle-même, qui travaille comme notre infatigable chef de produit pendant la journée, mais qui est aussi une photographe de mariage accomplie! Une chose que j'aime sur le site Web d'Alina, c'est la façon dont elle a soigneusement choisi ses images d'arrière-plan. Remarquez comment chacun a son point focal sur un côté afin que son logo centré ne bloque jamais les sujets sur la photo. C'est une bonne astuce qui signifie que vos images d'arrière-plan ne distraient ni n'entrent en collision avec le reste de votre site. Avec des photos si jolies à afficher, elle a sagement gardé tout le reste simple. Conserve un fond blanc avec du texte noir et laisse vos galeries de photos et collections parler d'elles-mêmes.
Voulez-vous essayer Rio de Janeiro sur votre propre site Web? Accédez à Modèles dans Site Manager pour ouvrir le sélecteur de modèles, puis choisissez Rio de Janeiro dans la liste. Vous n'avez pas encore de site Jimdo? Créez un site gratuit avec le modèle Rio de Janeiro ici.
