SlideShare ist ein Scribd-Unternehmen logo
1 von 10
Downloaden Sie, um offline zu lesen
Première apparition dans les jeux vidéo avec un défilement latéral 2D qui utilisaient
différentes vitesses de déplacement de l'image de fond pour créer l'illusion de
profondeur pendant le jeu. Donc dans le design web le même principe est appliqué
au background qui défile a une vitesse différente des éléments du site.
Source : http://www.unleashed-technologies.com/blog/2013/08/15/what-parallaxweb-design-%E2%80%93-definitions-tips-considerations
Exemple : http://supportkyoto.org/
L’utilisation des pixels dans le design web permet d’avoir un contrôle sur la
précision de la disposition des éléments, ils vont être placer ou l’on veut qu’ils le
soient donc si la taille de la fenêtre de navigation est changer, les éléments on
gardes leur position, taille etc…
Avantages : Précision de la position des éléments
Désavantage: N’est pas responsive au design mobile et au différente résolution.
Source: http://www.peachpit.com/blogs/blog.aspx?uk=Pixels-or-Ems-in-Your-WebDesigns
Exemple : http://99designs.com/designer-blog/2012/08/15/11-illustrator-tips-forphotoshop-web-designers/
Le flat ui designe est l’oppose du design artificiel. Le flat ui est en faveur d'une
esthétique numérique classique plus simplifiée.C’est aussi l’utilisation de couleurs
clair, des contours net et met l’aspect sur le 2D .
Source: http://www.creativebloq.com/graphic-design/what-flat-design-3132112
Exemple : http://designmodo.github.io/Flat-UI/
Le design static(headers) c’est le fait d’avoir des entête de menu/table static, donc
quand l’utilisateur parcours la page verticalement les entêtes sont toujours
présentes.
Source: http://blog.templatemonster.com/2013/10/31/web-designs-with-fixedheader-no-glue-was-used/
Exemple : http://www.fhoke.com/
La typographie est la conception et l'utilisation de polices de caractères comme un
moyen de communication. La typographie englobe tout, de la calligraphie à travers
le type et le type numérique sur les pages Web. Il comprend également des
typographes qui créent de nouvelles formes de lettres ainsi que des designers et
des calligraphie les lettres qui utilisent dans le cadre de leurs conceptions.
Trop long a lire ? L’art de le typographie c’est d’utiliser des fonts personnaliser lors
du design du site web.
Source: http://webdesign.about.com/od/fonts/qt/typography-basics.htm
Exemple: http://forefathersgroup.com/
Exemple : http://www.google.com/fonts
C’est le fait de metre peu de texte et plus de video pour presenter le site.
Source : Aucune
Exemple: https://www.apple.com/ca/
C’est le fait d’utiliser 2 a 3 couleurs dans le design des pages web.
Source : Aucune
Exemple: http://getbootstrap.com/
C’est pour simplifier la navifation pour un site qui contient beaucoups de page.
Les breadcrumbs sont un historique de navigation.
Source : Aucune
Exemple: http://www.target.com/c/humidifiers-home-appliances/-/N5xtuj#?lnk=gnav_home_5_23&intc=829636|null
Les dashbords sont des interfaces de gestion d’administrateurs pour des
applications web. Les dashboards contiennent des informations liées aux
performances du produit.
Source: Aucune
Exemple: https://demo.geckoboard.com/dashboard/DE3F67171D0589D7
Le glyphicons font partie des design moderne de la plupart des site
monochromatique. Ils apportent de la consistance au site et peuvent être manipulés
facilement pour changer leur taille. Finalement les glyphicons sont des icônes de
qualités pour un site/application.
Source : http://glyphicons.com/motivation-behind-icons/
Exemple : http://glyphicons.com/

Weitere ähnliche Inhalte

Andere mochten auch

Ds 287-2014-ef
Ds 287-2014-efDs 287-2014-ef
Ds 287-2014-efvibenilco
 
Tarea crónica de tit@ profe nancy
Tarea crónica de tit@ profe nancyTarea crónica de tit@ profe nancy
Tarea crónica de tit@ profe nancychavelatita
 
Dd projet de production starbucks
Dd projet de production starbucksDd projet de production starbucks
Dd projet de production starbucksRomaink05
 
Discours Bernard Cazeneuve congrès 2014 fnspf
Discours Bernard Cazeneuve congrès 2014 fnspfDiscours Bernard Cazeneuve congrès 2014 fnspf
Discours Bernard Cazeneuve congrès 2014 fnspfFrancis Mené
 
Performance durable - Dossier de production - Groupe 41
Performance durable - Dossier de production - Groupe 41Performance durable - Dossier de production - Groupe 41
Performance durable - Dossier de production - Groupe 41Justine Criquet
 
Memoire toustou laurent Internationalisation des musées
Memoire toustou laurent Internationalisation des muséesMemoire toustou laurent Internationalisation des musées
Memoire toustou laurent Internationalisation des muséesFS1234567890
 
Chu reunion classe hpp volemie
Chu reunion classe hpp  volemieChu reunion classe hpp  volemie
Chu reunion classe hpp volemieClaude GINDREY
 
Fundamento del computador_tarea_4
Fundamento del computador_tarea_4Fundamento del computador_tarea_4
Fundamento del computador_tarea_4saokirito10
 
Le football en Mauritanie
Le football en MauritanieLe football en Mauritanie
Le football en MauritanieAfricaNews
 

Andere mochten auch (20)

Frederick2
Frederick2Frederick2
Frederick2
 
Premium Insight Juin 2013 fr
Premium Insight Juin 2013 frPremium Insight Juin 2013 fr
Premium Insight Juin 2013 fr
 
Ds 287-2014-ef
Ds 287-2014-efDs 287-2014-ef
Ds 287-2014-ef
 
Tarea crónica de tit@ profe nancy
Tarea crónica de tit@ profe nancyTarea crónica de tit@ profe nancy
Tarea crónica de tit@ profe nancy
 
Meiosis
MeiosisMeiosis
Meiosis
 
Redes
RedesRedes
Redes
 
La Contabilidad
La Contabilidad La Contabilidad
La Contabilidad
 
Dd projet de production starbucks
Dd projet de production starbucksDd projet de production starbucks
Dd projet de production starbucks
 
Discours Bernard Cazeneuve congrès 2014 fnspf
Discours Bernard Cazeneuve congrès 2014 fnspfDiscours Bernard Cazeneuve congrès 2014 fnspf
Discours Bernard Cazeneuve congrès 2014 fnspf
 
Uso educativo de las redes sociales
Uso educativo de las redes socialesUso educativo de las redes sociales
Uso educativo de las redes sociales
 
Performance durable - Dossier de production - Groupe 41
Performance durable - Dossier de production - Groupe 41Performance durable - Dossier de production - Groupe 41
Performance durable - Dossier de production - Groupe 41
 
Memoire toustou laurent Internationalisation des musées
Memoire toustou laurent Internationalisation des muséesMemoire toustou laurent Internationalisation des musées
Memoire toustou laurent Internationalisation des musées
 
Presentación1111
Presentación1111Presentación1111
Presentación1111
 
Chu reunion classe hpp volemie
Chu reunion classe hpp  volemieChu reunion classe hpp  volemie
Chu reunion classe hpp volemie
 
Thesis-Abstract-Borges
Thesis-Abstract-BorgesThesis-Abstract-Borges
Thesis-Abstract-Borges
 
Eco5072 aut2014
Eco5072 aut2014Eco5072 aut2014
Eco5072 aut2014
 
Fundamento del computador_tarea_4
Fundamento del computador_tarea_4Fundamento del computador_tarea_4
Fundamento del computador_tarea_4
 
Le football en Mauritanie
Le football en MauritanieLe football en Mauritanie
Le football en Mauritanie
 
La web
La webLa web
La web
 
Evaluacion
EvaluacionEvaluacion
Evaluacion
 

Ähnlich wie Webtreendsgab

Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Mohammed JAITI
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Olivier Dommange
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphiqueIdean France
 
Intégration #1 : introduction
Intégration #1 : introductionIntégration #1 : introduction
Intégration #1 : introductionJean Michel
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxGeorges59
 
Desig formation-design-web-avec-photoshop-et-illustrator
Desig formation-design-web-avec-photoshop-et-illustratorDesig formation-design-web-avec-photoshop-et-illustrator
Desig formation-design-web-avec-photoshop-et-illustratorCERTyou Formation
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1bduverneuil
 
Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...
Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...
Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...Ahmed BACHIR CHERIF
 
Cours de Web Design part.1
Cours de Web Design part.1Cours de Web Design part.1
Cours de Web Design part.1MC Casal
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)Khaled Djebloun
 
It project
It projectIt project
It projectlucsau
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignFrédéric Harper
 
Responsive design, Canvas et SVG
Responsive design, Canvas et SVGResponsive design, Canvas et SVG
Responsive design, Canvas et SVGChristian SUMBANG
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015Vincent Pereira
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projetlaureno
 
Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirConcept Image
 

Ähnlich wie Webtreendsgab (20)

Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphique
 
Webdesign
WebdesignWebdesign
Webdesign
 
Intégration #1 : introduction
Intégration #1 : introductionIntégration #1 : introduction
Intégration #1 : introduction
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docx
 
Desig formation-design-web-avec-photoshop-et-illustrator
Desig formation-design-web-avec-photoshop-et-illustratorDesig formation-design-web-avec-photoshop-et-illustrator
Desig formation-design-web-avec-photoshop-et-illustrator
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1
 
Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...
Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...
Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...
 
Webdesign, UX et UCD #1
Webdesign, UX et UCD #1Webdesign, UX et UCD #1
Webdesign, UX et UCD #1
 
Cours de Web Design part.1
Cours de Web Design part.1Cours de Web Design part.1
Cours de Web Design part.1
 
titre
titretitre
titre
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
It project
It projectIt project
It project
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web Design
 
It project
It projectIt project
It project
 
Responsive design, Canvas et SVG
Responsive design, Canvas et SVGResponsive design, Canvas et SVG
Responsive design, Canvas et SVG
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projet
 
Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenir
 

Webtreendsgab

  • 1. Première apparition dans les jeux vidéo avec un défilement latéral 2D qui utilisaient différentes vitesses de déplacement de l'image de fond pour créer l'illusion de profondeur pendant le jeu. Donc dans le design web le même principe est appliqué au background qui défile a une vitesse différente des éléments du site. Source : http://www.unleashed-technologies.com/blog/2013/08/15/what-parallaxweb-design-%E2%80%93-definitions-tips-considerations Exemple : http://supportkyoto.org/
  • 2. L’utilisation des pixels dans le design web permet d’avoir un contrôle sur la précision de la disposition des éléments, ils vont être placer ou l’on veut qu’ils le soient donc si la taille de la fenêtre de navigation est changer, les éléments on gardes leur position, taille etc… Avantages : Précision de la position des éléments Désavantage: N’est pas responsive au design mobile et au différente résolution. Source: http://www.peachpit.com/blogs/blog.aspx?uk=Pixels-or-Ems-in-Your-WebDesigns Exemple : http://99designs.com/designer-blog/2012/08/15/11-illustrator-tips-forphotoshop-web-designers/
  • 3. Le flat ui designe est l’oppose du design artificiel. Le flat ui est en faveur d'une esthétique numérique classique plus simplifiée.C’est aussi l’utilisation de couleurs clair, des contours net et met l’aspect sur le 2D . Source: http://www.creativebloq.com/graphic-design/what-flat-design-3132112 Exemple : http://designmodo.github.io/Flat-UI/
  • 4. Le design static(headers) c’est le fait d’avoir des entête de menu/table static, donc quand l’utilisateur parcours la page verticalement les entêtes sont toujours présentes. Source: http://blog.templatemonster.com/2013/10/31/web-designs-with-fixedheader-no-glue-was-used/ Exemple : http://www.fhoke.com/
  • 5. La typographie est la conception et l'utilisation de polices de caractères comme un moyen de communication. La typographie englobe tout, de la calligraphie à travers le type et le type numérique sur les pages Web. Il comprend également des typographes qui créent de nouvelles formes de lettres ainsi que des designers et des calligraphie les lettres qui utilisent dans le cadre de leurs conceptions. Trop long a lire ? L’art de le typographie c’est d’utiliser des fonts personnaliser lors du design du site web. Source: http://webdesign.about.com/od/fonts/qt/typography-basics.htm Exemple: http://forefathersgroup.com/ Exemple : http://www.google.com/fonts
  • 6. C’est le fait de metre peu de texte et plus de video pour presenter le site. Source : Aucune Exemple: https://www.apple.com/ca/
  • 7. C’est le fait d’utiliser 2 a 3 couleurs dans le design des pages web. Source : Aucune Exemple: http://getbootstrap.com/
  • 8. C’est pour simplifier la navifation pour un site qui contient beaucoups de page. Les breadcrumbs sont un historique de navigation. Source : Aucune Exemple: http://www.target.com/c/humidifiers-home-appliances/-/N5xtuj#?lnk=gnav_home_5_23&intc=829636|null
  • 9. Les dashbords sont des interfaces de gestion d’administrateurs pour des applications web. Les dashboards contiennent des informations liées aux performances du produit. Source: Aucune Exemple: https://demo.geckoboard.com/dashboard/DE3F67171D0589D7
  • 10. Le glyphicons font partie des design moderne de la plupart des site monochromatique. Ils apportent de la consistance au site et peuvent être manipulés facilement pour changer leur taille. Finalement les glyphicons sont des icônes de qualités pour un site/application. Source : http://glyphicons.com/motivation-behind-icons/ Exemple : http://glyphicons.com/