Yarah and Yared

Bonjour,
Voici un site qui présente le travail de Gabriel Yared,
un compositeur de renommée mondiale qui a écrit un certain nombre de films
(Betty blue, l’Amant, Le Patient Anglais, La Cité des Ange…) pour lesquels il a reçu des prix.
Ce site présente l’album « Yara and Yared » qui est un duo dans l’optique de créer des chansons intemporelles et qui représente la quintessence de son univers musical.

La navigation discrète permet d’en apprendre plus sur les acteurs de ce projet, on trouve aussi des photos prisent lors des enregistrements. En fond, le clip (réalisé en motion design) et un des titres de l’album tournent à l’infini, mais il suffit d’un clic pour stopper la musique. L’atmosphère dégagée est particulière et en accords avec l’esprit minimaliste et sobre
du site. On y trouve que le strict minimum une page avec une petite navigation épurée,
le logo de l’album, le clip vidéo, quelques photos et un court descriptif.

Je trouve intéressant de présenter ce genre de travail, cela apporte une fraîcheur nouvelle, c’est dans l’air du temps, cela prouve qu’un site ne sert pas qu’au E-commerce
ou à présenter des entreprises, mais bien que le web englobe tous les domaines
et peux apporter beaucoup pourvu que l’on travaille avec qualité.

Je vous laisse découvrir le site dans le lien ci-dessous :
Yara and Yared

2

3

Loreleï

 

Publicités

La pierre qui tourne

Bonjour,
Voici le site d’une fabrique de biscuit bio absolument atypique et graphique.
On y trouve des illustrations vintage magnifiques et colorées.
Le site est très dynamique, prégnant et agréable à visiter.
C’est une one page en parallaxe, avec une navigation fluide et efficace.

Je vous invite à trouver ce site dans le lien ci-dessous :
www.lapierrequitourne.com

1

Loreleï

smole studio___

Bonjour,
Voici un site réalisé par un petit studio, constitué d’une petite équipe mixte
composée 
d’un graphiste illustrateur et d’une web designer. 

Tout d’abord, leur site est un modèle de sobriété, de flat design et de prégnance.
C’est une one page, animée par une navigation simple et efficace.
Ils n’utilisent que trois couleurs, le blanc, le noir et le vert, ce qui donne une dynamique
au site et de la prégnance, crée de forts contrastes qui attirent les visiteurs
de la one page. Ces couleurs sont l’image de leur entreprise.

De plus, le studio présente ses travaux print, il compose des logos, carte de visite, flyers, affiches, plaquettes et illustration. Leurs travaux sont toujours dans un esprit de sobriété et simplicité.

Je vous laisse découvrir leur site dans le lien ci-dessous :
Smole Studio

6

 

 

89

Loreleï

 

TypoTi_TypoTa_Helvetica___

Bonjour,
Voici un site conçu spécialement pour la marque Swiss Swatch, pour présenter
leur nouvelle montre et son histoire. Le nombre 1 de la typo Helvetica, avec sa célèbre barre incurvée a été utilisé comme un modèle pour les pattes de la montre appelée Mondaine.
Le cadrant de celle-ci reprend également la typographie.

Trois variantes ont été conçues, la N°1 Light, la N°1 Regular et la N°1 Bold.
Le concepteur suisse utilise trois graisse de cette typographie si représentative de son esprit de perfection et de sobriété. La Helvetica est ici la source d’inspiration du design
de ses montres qui ont toutes une identité forte et délicate.
C’est avec intelligence qu’ils ont pris comme modèle cette typo tellement unique,
visible à tous les coins de rue, on ne la remarque plus, mais son absence causerait un réelle vide. Je vous laisse apprécier ces créations Suisse, et l’utilisation parfaite de l’Helvetica
dans le lien ci-dessous :

mondaine-helvetica.com

1

2

3

 

Loreleï

Créer un effet parallaxe___

Bonjour,
Voici un tutoriel qui vous expliquera comment réaliser un effet parallaxe qui fonctionne
avec le mouvement de la souris, pour un haut de page par exemple, à vous d’adapter le tuto à vos attentes et de créer des sites très impactant.
Je me suis référée à www.webdesignweb.fr pour apprendre moi-même
a faire du parallaxe et à animé mon site, c’est sur ce site qu’il vous faudra chercher les fichiers JavaScript et Css pour pouvoir faire l’effet voulu.
J’espère que vous arriverez à faire la manipulation, voici le tuto :

Dans un premier temps télécharger les fichiers sources sur le site www.webdesignweb.fr, trouverer dans le dossier compressé, deux fichier JavaScript ainsi qu’un fichier Css. Trouverer aussi les images utilisées pour le site
modèle ainsi que le fichier Html qui peut servir de base.

Une fois les fichiers sur votre bureau, créer un nouveau dossier, nommer le comme votre site. Glisser le dossier js et le dossier css téléchargés au par avant. Créer dans votre dossier site, un dossier image, placer vos visuel à l’intérieur.

Ouvrer le logiciel Dreamwaver, (vous pouvez très bien coder dans un autre logiciel),
créer un fichier Html, nommer-le index pour que votre site fonctionne.
Dans ce fichier, placer un titre dans la balise <title>, c’est le nom de votre site,
on verra ce nom au-dessus de la barre de navigation.

Taper le code :

Dans la partie <head>

  • <link rel= »stylesheet » href= »style.css » type= »text/css » media= »screen »/>
    Pour lier le fichier Html au fichier Css, remplacer par votre fichier Css la partie noire du code.
  • <script type= »text/javascript » src= »js/jquery.js« ></script>
    <script type= »text/javascript » src= »js/jquery.jparallax.js« ></script>
    Pour lier les fichiers JavaScript, procéder à la même manipulation.
  • <script type= »text/javascript »>
    $(document).ready(function () {
    $(‘#parallax’).jparallax();
    });
    </script>
    Ce morceau de code sert à faire fonctionner l’effet parallaxe, copier coller ce code directement dans votre fichier Html sans le modifier pour que tout marche bien.
    Voilà le code que vous avez saisie jusqu’à présent :
    02_htmlDans la partie <body>
  • <div class= »conteneur »><div id= »parallax »>
    Créer une div conteneur et une div parallaxe à l’intérieur, c’est dans cette dernière
    qu’il faudra placer tous les éléments qui seront en mouvement.
  • <p style= »text-align:center; width:970px;height:470px;padding-top:350px; »><img src= »img/bande.png« /></p>
    <p style= »text-align:center; width:975px;height:460px;padding-top:350px; »><img src= »img/bande.png« /></p>
    <p style= »text-align:center; width:980px;height:450px;padding-top:350px; »><img src= »img/bande.png« /></p>
    Dans la div parallaxe, saisir le code ci dessus en remplaçant la partie noire par votre image. Ici utiliser une balise <p> dans laquelle mettre l’image afin de pouvoir régler la taille sans déformer l’image ou sans même devoir passer par Photoshop pour régler
    la taille de l’image. Dans les trois div <p> on observe des valeurs différents
    qui vont permettre de faire bouger l’élément de manière différente.
    Ici on cherche à faire bouger une bande de couleur, de manière
    à ce que l’on ai l’impression que son mouvement se découpe
    lors ce que l’on bouge la souris.
  • <p style= »text-align:center; width:940px;height:490px;padding-top:0px; »><img src= »img/rond-violet.png« /></p>
    <p style= »text-align:center; width:780px;height:465px;padding-top:0px; »><img src= »img/trait-1.png« /></p>
    <p style= »text-align:center; width:680px;height:445px;padding-left:100px; »><img src= »
    img/trait-2.png« /></p>
    <p style= »text-align:center;
    width:580px;height:465px;padding-top:0px; »><img src= »img/trait-3.png« /></p>
    <p style= »text-align:left; width:800px;height:365px;padding-left:100px; »><img src= »img/branche-1.png« /></p>
    <p style= »text-align:right; width:800px;height:395px;padding-top:0px; »><img src= »img/branche-2.png« /></p>
    <p style= »text-align:center; width:970px;height:470px;padding-top:90px; »><img src= »img/logo-AL.png« /></p>
    Comme au par avant remplacer par vos images les parties noires du code,
    et fermer les deux balise parallaxe et conteneur.
    Pour la partie footer :
  • <div id= »footer »>
    Créer une div footer
  • <div class= »conteneur »></div>
    Créer un div conteneur pour pouvoir appliquer une couleur à votre footer
    ou bien y inclure du texte.Dans mon cas dans la div conteneur :
    <p> <br/><br/>Voici un expemple d’effet parallaxe réalisé par <span class= »color1″>Angelique</span> et <span class= »color2″>Loreleï.</span></p>
    J’ai utilisé des span pour appliquer une couleur à un endroit précis du texte.
    Fermer la div footer.
    Voici le résultat :
    03_html
    04_htmlDans le Css:
  • body {
    background: url(img/etoile.png) repeat;
    margin: 0;
    padding: 0;
    }
    Dans cette section du code Css, remplacer l’image du backround
    par une de votre choix ou par une couleur selon vos envies

  • p{ font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
    color: #FFFFFF;
    text-align:center;
    }
    Dans la div <p>, modifier les attributs du texte (typographie, corps, graisse,
    interlignage, couleur, alignement).

  • .color1{ color:#FF6A00;
    }
    .color2{color:#9D162E;
    }
    Voici les div que j’ai utilisé pour coloré juste un mot, modifier la couleur,
    ajouter des styles si vous le trouvez nécessaire.

  • #footer {
    width: 100%;
    background: black;
    height: 280px;
    }
    Dans le footer, changer la couleur, la hauteur la largeur comme vous souhaitez.

Voici ce que vous obtenez au final dans le Css:
04_css

Une fois le Html et le Css près, enregistrer et essayer sur votre navigateur,
passez la souris au dessus du footer, si vos image bougent en suivant
votre mouvement vous avez réussi ! Sinon replongez vous dans vos fichiers,
vérifier vos liens, un espace en trop peut tout bloquer.

Voilà le résultat final de se tutoriel, si vous n’y arrivez pas n’hésitez pas
à vous rendre sur le site dont je me suis inspirée : www.webdesignweb.fr

fin

Loreleï

Glitch___

Bonjour,
Voici une one page pour l’agence de publicité, « Glitch » qui vous emmène
dans une ballade à travers leur espace de bureau en utilisant une technologie appelée « séquence d’images progressive « .
Le temps de charge est long,mais le résultat
en vaux la peine. Pour le visiter , il faut scroller, si l’on garde une constance,
le site s’anime et devient un petit film d’animation.
Je vous invite à tout découvrir dans le lien ci-dessous:

theglitch

67

Loreleï

Robert Richter___

Bonjour,
Voici le book de l’illustrateur Robert Richter. On évolue dans son site à l’aide de boutons
qui nous emmène à d’autres illustrations ou travaux. C’est un site composé de plusieurs pages avec une navigation horizontale qui présente les différents types de travaux,
des textes explicatifs sur le graphiste et son travail. Je trouve ses œuvres magnifiques,
il utilise l’art digital en prenant la nature comme modèle.
Je vous invite à découvrir ce site dans le lien ci-dessous :

robertrichter

5

Loreleï