Design interactif

WebdesignerDepot redessiné!

Et la voici ... Après trop de retards, d'innombrables maquettes et idées, la nouvelle {$lang_domain} est enfin là! Ce processus de reconception a été incroyablement complexe pour l’ensemble de l’équipe de WDD, mais nous sommes extrêmement fiers des résultats et nous espérons que vous l’aimerez autant que nous.

Nous avons lancé le nouveau design hier et la Twittersphere nous a donné de bons retours et nous a aidés à identifier certains bugs. Nous avons corrigé des bugs pour la journée écoulée et nous le faisons toujours, alors veuillez excuser certains problèmes techniques que vous pourriez encore rencontrer au cours des prochains jours.

Il était important pour nous que la nouvelle conception garde l’âme de l’ancien site pour ainsi dire, tout en inspirant nos visiteurs et en les mettant à jour avec les normes et les techniques actuelles de conception de sites Web.

La nouvelle page d'accueil, en particulier, fait un meilleur travail pour présenter de nouveaux visiteurs à notre site. Vous remarquerez que la structure de navigation et d'information est maintenant beaucoup plus claire et nette.

Dans ce post, nous allons entrer dans quelques détails sur ce qui est nouveau et ce qui s'est passé dans les coulisses pour vous apporter cette nouvelle version de WDD. Alors, allons droit au but!

Si vous avez été l'un de nos 40 millions de visiteurs (!) Au cours des dernières années, vous remarquerez que le design est, comment le dire? Radicalement différent! En fait, aucun des anciens modèles n'a été conservé. Nous avons tout jeté et recommencé à zéro. Ceci est aussi radical que vous pouvez obtenir avec une refonte et il comporte certains risques pour nous car nous perdons nos avantages de marque précédents en faveur de ce que nous pensons être un meilleur choix pour notre site, son contenu et le plus important: VOUS, nos lecteurs incroyables !

Commençons par quelques crédits pour voir qui est derrière tout ça ...

Alors, voici ce qui est nouveau dans cette conception:

Disposition hybride: Magazine et style de blog traditionnel

Alors que l’ancien design avait un format de blog traditionnel, avec les derniers articles apparaissant toujours sur le dessus, la version remaniée est un hybride entre un style magazine et une mise en page de blog traditionnelle. Nous trouvons que cela fonctionne assez bien pour notre contenu. La présentation plus large nous a permis d’apporter beaucoup plus de contenu sur la page d’accueil, tandis que les deux colonnes de la page d’accueil la rendent plus lisible que certains blogs traditionnels de type magazine où le contenu peut parfois être écrasant.

Contenu en vedette

Les articles du blog sont entrecoupés de trois zones: 2 verticales et 1 horizontale. Les zones verticales présentent certains des sujets les plus en vogue actuellement sur le site (responsive design, jQuery, etc.), tandis que la zone horizontale est utilisée pour présenter les dernières offres sur notre site MightyDeals.com. Au total, nous pouvons présenter 10 messages supplémentaires par rapport à la conception précédente, sans vaincre nos lecteurs.

Équilibre et poids

Page d'accueil: En raison de l'imagerie lourde, nous avons essayé de maintenir un équilibre entre le texte et les images en affichant un contenu de texte d'aperçu suffisant pour chaque article. Pour les pages d'articles proprement dites, nous avons choisi des images et des extraits de code en pleine largeur, tandis que le texte est affiché centré sur une largeur plus étroite que les images. Cela rend le site plus rapide et plus facile à lire (ou à numériser) et affiche les images à leur taille maximale pour un impact maximal. Pour les images d'anciens messages et d'autres images plus étroites, nous avons choisi d'afficher des barres grises sur le côté, rappelant les barres noires que vous voyez lorsque vous regardez une émission en définition standard sur un téléviseur HD. C'était le meilleur compromis que nous puissions trouver pour intégrer ces anciens messages dans le nouveau look du site sans avoir à mettre à niveau des centaines de messages!

Design réactif

Le nouveau site est maintenant entièrement réactif et que vous soyez sur un ordinateur de bureau, un ordinateur portable, une tablette ou un téléphone intelligent. Jetez un coup d'œil à la version du téléphone intelligent qui ressemble plus à une application qu'à un site Web et nous en sommes très fiers. Il se charge aussi vite!

Graphiques Retina

Avec Apple qui déploie davantage d'appareils rétiniens, les écrans haute résolution deviennent de plus en plus pertinents pour les sites Web. Le nouveau WDD sert des graphiques de la rétine dans la mesure du possible. La conception du site est parfaitement nette sur les appareils de rétine. À l'avenir, nous aurons des graphiques optimisés pour la rétine dans tous nos messages, dans la mesure du possible. Cela est plus facile à dire qu'à faire car le web n'est pas encore prêt pour la rétine, en fait, très peu de sites proposent actuellement des graphiques haute résolution volumineux. Certains de nos derniers messages sont déjà en partie prêts pour la rétine et certains le porteront à l'avenir. Nous avons également entendu dire que les annonces sur la rétine ne seraient peut-être pas trop loin dans le futur.

Navigation améliorée

Vous remarquerez un signe plus sur le côté droit de vos navigateurs (pas sur les appareils mobiles) lors de la visualisation d'articles. Lorsque vous cliquez dessus, un mini navigateur s'ouvre pour vous permettre de naviguer dans l'article en cours, comme parcourir la table des matières d'un livre électronique. Vous pouvez également partager l'article actuel via le mini-navigateur ou consulter des articles connexes, ainsi que lire les articles suivants et précédents.

L'art

Une fois de plus, nous avons collaboré avec le célèbre illustrateur Radim Malinic pour créer l’art de notre nouveau site. Radim est un directeur artistique et graphiste primé, basé à Londres, en Angleterre. Sous le nom de Marque Nu il travaille avec les grandes marques de ménage. Depuis la conception initiale du site Web WDD, il a travaillé avec Goldman Sachs, Bacardi, Blistex, le London Film Museum et bien d'autres. Son style de travail est l'un des plus diversifiés de l'industrie. Ses designs audacieux et colorés inspirent beaucoup de gens qui les voient. Nous avons demandé à Radim de centrer son design sur des cercles cette fois-ci, car il s’agit d’une forme intemporelle extrêmement populaire et privilégiée dans les designs de sites Web actuels.

Parallaxe

Le nouvel art et le nouveau logo sur l’en-tête prennent vie avec un effet de parallaxe à 5 couches (se déplaçant à des rythmes différents) dans la section en-tête du site Web. Pour le voir, déplacez simplement votre souris sur la zone d'en-tête (pas sur les appareils mobiles). Nous pensons que c'est très cool et ajoute un élément de plaisir au site! [MISE À JOUR] L'effet de parallaxe était apprécié par la plupart des gens, mais certaines personnes ne l'aimaient pas. Nous avons donc ajouté la possibilité de le désactiver en cliquant avec le bouton droit sur la zone d'effet.

Logo

Bien que l’ancien logo nous ait bien servi et qu’il ait été apprécié, car il s’agissait d’une refonte complète, un nouveau logo était en ordre! Nous avons collaboré cette fois avec Steven Bonner refaire notre logo. Il est un typographe très talentueux basé en Écosse avec un portefeuille enviable d’illustrations pour certaines des plus grandes marques du monde. Nous pensons que cela s'est avéré excellent et que le site est bien équilibré avec une touche personnelle tirée par la main, tout en ayant un aspect professionnel et soigné.

Typographie

Nous avons finalement abandonné les anciennes polices système ennuyeuses en faveur des polices Web Typekit, utilisées exclusivement sur tout le site. Nous utilisons Kulturista pour tous les en-têtes qui a fière allure et a une belle personnalité et une sensation unique. Pour le corps du texte que nous avons choisi Proxima Nova qui a une lisibilité superbe et est idéal pour les gros morceaux de texte. Pour les en-têtes, nous avons également considéré Adelle , et pour le corps du texte, nous avons également considéré Museo Sans, Adelle Sans , Myriade et Helvetica .

Pictos Icon font

Nous utilisons beaucoup d'icônes dans ce nouveau design. Les icônes font partie du génial Pictos icon font conçu par Drew Wilson . Nous l'utilisons même pour nos icônes sociales animées au bas du site.

Bas de page

Nous avons 2 zones de bas de page au bas du site. Le premier met en évidence certains domaines sur lesquels nous pensons qu'il est important de mettre l'accent, puis vous avez un pied de page plus traditionnel avec surtout des liens de texte et des icônes sociales animées.

Intégration sociale

Nous voulions présenter nos lecteurs de manière plus approfondie, de sorte que le nouveau WDD est beaucoup plus social qu'auparavant. Nous présentons maintenant vos commentaires et retweets directement sous chaque article de la page d'accueil. Donc, si vous voulez un peu de gloire, vous pouvez maintenant obtenir votre avatar juste là pour que tout le monde puisse le voir! Eh bien, c'est un peu exagéré!

Moins d'annonces

Bon, des bonnes et des mauvaises nouvelles. Certaines de nos annonces ont pris de l'ampleur, mais nous avons également réduit le nombre d'annonces diffusées sur le site. Nous admettons qu'au fil des années, notre site a été un peu trop rempli de publicités, ce qui a été une excellente occasion de faire le ménage. Cela a rendu la mise en page plus propre et plus esthétique à naviguer, tout en étant capable de payer le loyer - n'oubliez pas de soutenir nos bons sponsors :)

Depot.ly

Celui-ci a en fait quelques semaines: nous avons commencé à utiliser l'URL courte depot.ly pour nos tweets, afin que vous puissiez reconnaître nos messages dans tous les canaux sociaux que vous utilisez. Assez utile nous pensons!

Plus de contenu

Comme vous l'avez peut-être remarqué, nous avons récemment publié plus d'articles chaque jour. Bien que les articles éditoriaux aient été et continuent d’être l’essence même de notre contenu, nous couvrons désormais également les nouvelles pertinentes et les mini messages qui conviendront aux concepteurs et aux développeurs qui visitent notre site. Nous pensons que cela maintient le site plus à jour et en contact avec ce qui se passe actuellement dans le monde sans avoir recours à des éditoriaux complets pour chaque article.

Nous avons rencontré beaucoup de problèmes pour que cette conception fonctionne sur tous les navigateurs et tous les appareils (et cela continue encore). En fait, c’était la cause des retards de dernière minute que nous avons connus. Nous devions lancer la semaine dernière, mais de nombreux problèmes de navigateur nous ont ralentis. Désolé! Firefox était particulièrement difficile, mais IE 8 s'est avéré être la pire et la cause de nombreux problèmes et frustrations pour nos codeurs. Depuis notre lancement hier, nous avons reçu beaucoup d'informations supplémentaires via Twitter sur les problèmes qui doivent encore être résolus. Merci de votre patience pendant que nous abordons ces questions.

Ce que vous voyez aujourd'hui est le nouveau design, mais ce n'est pas tout. Nous prévoyons d’ajouter bientôt de nouveaux éléments. Vous en apprendrez plus à ce sujet dans les prochaines semaines.

Nous aimons tous personnellement le nouveau design et nous attendons à ce qu'il continue d'évoluer en fonction de vos commentaires. Nous apprécierons vraiment si vous pouviez encore nous informer de tout ce que vous aimeriez que nous améliorions. De plus, veuillez nous indiquer si vous rencontrez des problèmes de compatibilité de navigateur ou si vous rencontrez des problèmes sur certains appareils mobiles que vous utilisez afin que nous puissions les résoudre rapidement.

Comme toujours, nous vous remercions sincèrement de votre soutien à WDD pendant toutes ces années. De toute l’équipe ici à WDD, un grand merci à chacun d’entre vous et nous espérons que ce nouveau design vous inspirera et vous servira bien pendant que vous naviguez sur notre site.

Que pensez-vous de la nouvelle conception de WDD? Nous nous réjouissons de vos commentaires!

design réactif création de sites web refonte wdd rétine graphiques webdesignerdepot