background preloader

Le webdesign en blocs - Exemples et ressources

Le webdesign en blocs - Exemples et ressources
Suivant l’avènement des grilles dans le webdesign, la mise en page basée sur des blocs de contenu peut s’avérer une bonne stratégie pour certains design. Petit tour d’horizon des sites du genre, puis des ressources nécessaires pour créer votre site sur une grille modulable. Webdesign en blocs ? La mise en page basée sur des blocs de contenu modulable est devenue incontournable pour les portfolios, les sites d’inspiration, bref ils s’agit souvent de sites présentant un lot important d’images. Rendu populaire par des sites comme Pinterest par exemple ou encore inspiré par des applications comme Flipboard ou le design Metro, la navigation se veux simple et rapide, proposant beaucoup de contenu scanable rapidement. Le responsive webdesign y joue également un rôle crucial : par définition un bloc modulable va s’adapter à la taille du viewport de l’utilisateur. Quelques exemples : Pinterest Pepsized Usain Bolt Red Interactive Agerman Etchapps Everlovinpress Depthcore Bernd Kammerer Neightborhood Studio

Les sites de référence dans le webdesign Sources d'inspiration et compiles de Webdesign Css Nous vous proposons de découvrir ici des sites qui ne manqueront pas de vous apporter de l'inspiration pour construire le vôtre. Css-design est une large vitrine de sites web classés par catégories où les designs sont très riches et très variés. Il y en a pour tous les goûts! En voici d'autres du même genre: Cssmania, Bestwebgallery, Mydesignaward, Webcreme, Cssimpress, Cssburst Si vous cherchez des idées pour présenter un formulaire, un lecteur vidéo ou encore une boutique E-commerce etc... Technique CSS et autres éléments de Webdesign Un aspect plus technique pour mieux comprendre l'articulation Css + XHTML et autres éléments du webdesign. Css 4 design est un site intéressant et agréable à lire pour mieux comprendre le Css. Alsacreations est certainement un incontournable pour celui qui cherche à approfondir la technique du Css. Webdesign.2803 nous propose de nombreux trucs et astuces sur le webdesign et autres techniques d'intégration.

10 conseils d’ergonomie basés sur des études de recherche Internet abonde de conseils utiles sur l’ergonomie de sites Internet. Nous prenons au sérieux ceux qui apparaissent être les plus logiques. Mais il est parfois réconfortant de voir certaines théories qui circulent validées par des recherches sérieuses. Cet article traite des résultats de plusieurs recherches sur l’ergonomie, dont, entre autre, la captation du mouvement des yeux sur une page Web, les analyses et rapports sur l’utilisabilité et la convivialité, et enfin, des idées pour améliorer le design. Beaucoup de ces conseils, tel que mentionné précédemment, semblent de mise, mais ils sont enfin soutenus par des statistiques. 1. L’idée que les utilisateurs seront frustrés s’ils doivent cliquer plus de trois fois pour trouver le contenu qu’ils cherchent sur votre site Web circule depuis bien longtemps déjà. À la base, cette idée semble tout à fait logique, car, bien entendu, un utilisateur sera frustré s’il passe beaucoup de temps à cliquer ici et là pour trouver ce qu’il cherche. 2.

Conception d'un site web Cette page présente quelques considérations sur la conception de sites web. Certaines sont énoncées par des spécialistes et d'autres sont plus personnelles. Je ne prétends pas détenir la Vérité Absolue; je me propose simplement de vous faire profiter de mon expérience en tant que webmaster et surfeur. 1. Questions préliminaires - 2. Les outils - 3. Il convient tout d'abord d'apporter une précision sur les rapports entre "pages web", "site web" et "page d'accueil": un site web est en quelque sorte une publication constituée d'un certain nombre de pages web. 1. Quel est l'objectif visé? 2. Un éditeur de pages web: Claris HomePage, Frontpage, Adobe Golive, Dreamweaver, .... 3. Structurez, hiérarchisez votre site! Faites des croquis de l'aspect qu'auront les pages avant de vous lancer dans la réalisation. 4. Ici vient la phase de création à l'aide de logiciels spécialisés. 5. Vérifiez que tous les liens aboutissent bien sur les pages souhaitées. 6. 7. Références et liens

20 outils pour aider les jeunes développeurs à créer leur site internet Il n'est pas toujours facile quand on débute dans la création de sites internet de trouver les outils et les services qui nous permettent de gagner du temps et de travailler plus efficacement. Nous avons sélectionné 20 utilitaires pour aider les jeunes professionnels du web. Poser les bases de son projet : Choisir son CMS : Il est aujourd'hui de plus en plus fréquent d'avoir recours à un CMS pour créer son site internet. Plus pratique et mieux conçu, c'est souvent une solution de premier plan pour créer un site solide et esthétique. Créer sa charte graphique : Nous vous avons déjà présenté l'outil Kuler, proposé par Adobe. Créer une maquette : Composer une grille : Un site donne toujours une impression plus professionnelle quand son design est structuré sous forme de grille. Prévoir ses espaces publicitaires Choisir ses icônes Si vous n'êtes pas un pro du webdesign, la création d'icônes personnalisées pour votre site risque de poser problème. Développer son site : Débuter en HTML5 :

Mon premier site: les 10 erreurs à éviter | Le Site Internet Des fichiers trop lourd Il est très important de faire attention à la taille des fichiers que l’on utilise sur son site. . Hors l’internaute s’attend à avoir l’information rapidement, si votre page ne s’affiche pas immédiatement ou presque vous perdrez beaucoup de visiteurs. Attention à ne pas tomber dans un piège: tester l’affichage de son site chez soi n’est pas représentatif de l’expérience que vivra un autre internaute. Il est possible de tester le poids des pages de son site sur www.websiteoptimization.com/ . Les images L’erreur fréquente du débutant consiste à prendre une photo avec son appareil photo et à l’utiliser telle quelle sur son site. Les blogs et CMS font souvent ce travail sur les photos automatiquement. Les autres fichiers Il n’y a pas que les images qui soient lourdes. Trop de widgets Depuis quelques années c’est la folie des widgets, on en trouve à toutes les sauces et on peut en coller très simplement sur son site et son blog. . Un design trop agressif Trop de publicité

5 outils en ligne pour tester vos sites Si vous êtes web designer ou développeur Web, alors vous devez savoir à quel point il est important de s’assurer que le produit final est dépourvu de tous bugs ou erreurs. Les cinq sites que voue je vais décrire dans la suite de cet article, vont aider les développeurs et les concepteurs de sites Web à valider et vérifier le code du site Web et ce, afin de déceler toute sorte d’erreurs. Le W3C Markup Validation Service permet aux utilisateurs de valider leurs sites Web soit en fournissant un lien en ligne vers le fichier HTML, XHTML, SMIL, MathML ou soit par le téléchargement du fichier, dans le même format que mentionné précédemment. Si vous avez juste besoin de vérifier une partie spécifique du code, vous pouvez manuellement coller votre portion de code depuis l’onglet « Validate by Direct Input » pour le valider. Note : Un autre service, W3C CSS Validation Service, va réaliser à l’identique le traitement offert par le service « Markup », mais concernant la CSS.

Création d'un design étape par étape - Etape n°1 : Le code xhtml Titre de page, d'article... Elitr fabulas mel ex. Sed admodum detracto an. In vel diam quas exerci, at velit aliquip denique cum. Autre titre de page ou d'article, c'est selon ! Sit voluptaria consequuntur interpretaris ea, salutatus comprehensam usu ea. Sous titre à cet article Lorem ipsum no sit altera forensibus, vix ea veniam fierent molestie. Autre sous-titre Mel etiam oportere ex. Retour à Alsacreations 4 ressources pour bien débuter en webdesign adaptatif | Blog Loriskumo Le responsive webdesign (webdesign adaptatif en français) est bien plus qu’en tendance, c’est l’avenir du web dans bien des cas. Si vous ne vous êtes pas encore lancé dans cette aventure voici quelques ressources pour débuter. Responsive Web Design de Ethan Marcotte Merci A Book Apart pour l’image L’ouvrage parfait si ce n’est indispensable pour débuter. 143 pages qui vous introduiront le sujet, puis vous aideront à débuter. Disponible directement chez A Book Apart → Screenfly Un moyen simple de tester les tailles d’écrans. Screenfly par QuirkTools→ Adaptive Images On a beau prévoir une mise en page mobile, si l’utilisateur doit charger en 3G des images prévues à la base pour un grand écran d’ordinateur en WiFi, son expérience peut s’en trouver gâchée. Adaptives Images → CSS Elastic Videos chez Web Designer Wall Si l’on peut aisément avoir des images fluides dans notre design adaptatif, il en est autre chose pour les vidéos. CSS: Elastic Videos → Ma petite collection Mon Pearltrees: Responsive →

Comment devenir un web-designer professionnel (étape par étape) Bonjour, Dans cet article, je vais vous parler des erreurs que la plupart des webmasters et webdesigners commissent dans la création du thème de leurs sites web. Je vais parler du choix de couleurs et comment les bien choisir, qui peuvent donner de l’inspiration aux visiteurs de votre site dès la première seconde. Je vais vous parler sur la couleur secrète, que seuls les professionnels connaissent ! Pour savoir ces astuces, lisez bien et attentivement cet article ! Comment peut-on savoir si un design est professionnel ou non ? Pour mieux comprendre, je vais utiliser deux images différentes, la première est un exemple d’un site-web qui n’est pas professionnel, dans la deuxième image, une impression d’écran d’un site-web professionnel. NON-Professionnel Voici une impression d’écran d’un site-web que j’ai trouvé en cherchant dans le moteur de recherche Google, seulement pour ne pas parler d’un site d’un webmaster que j’ai choisi cet exemplaire. En effet toutes les couleurs ! Professionnel

Related: