Interaktives Design

WebdesignerDepot Neu gestaltet!

Und hier ist es ... Nach viel zu vielen Verzögerungen, unzähligen Modellen und Ideen, dem Neuen {$lang_domain} ist endlich da! Dies war ein unglaublich komplexer Redesign-Prozess für das gesamte WDD-Team, aber wir sind sehr stolz auf die Ergebnisse und hoffen, dass Sie es genauso lieben wie wir.

Wir haben gestern das neue Design veröffentlicht und die Twittersphere hat uns großartige Rückmeldungen gegeben und dabei geholfen, einige Bugs zu identifizieren. Wir haben Fehler des letzten Tages behoben und tun dies immer noch, also entschuldigt bitte einige technische Probleme, auf die ihr in den kommenden Tagen noch stoßen könnt.

Für uns war es wichtig, dass das neue Design die Seele des alten Standortes sozusagen behält, während wir gleichzeitig unsere Besucher inspirieren und auf die aktuellen Standards und Techniken des Webdesigns updaten lassen.

Vor allem die neue Homepage macht es besser, neue Besucher auf unsere Seite zu bringen. Sie werden feststellen, dass die Navigations- und Informationsstruktur jetzt viel sauberer und übersichtlicher ist.

In diesem Beitrag erfahren Sie mehr darüber, was neu ist und was hinter den Kulissen passiert ist, um Ihnen diese neue Version von WDD zu präsentieren. Also, lass uns gleich tauchen!

Wenn Sie in den letzten Jahren zu unseren 40 Millionen Besuchern (!) Gehören, werden Sie feststellen, dass das Design, na ja, wie sagt man es? Radikal anders! In der Tat wurde nichts von dem alten Design beibehalten. Wir haben alles weggeworfen und von Grund auf frisch angefangen. Das ist so radikal, wie Sie es mit einem Redesign erreichen können, und es birgt gewisse Risiken für uns, da wir unsere früheren Markenvorteile zugunsten einer unserer Meinung nach besseren Wahl für unsere Website, ihre Inhalte und vor allem: SIE, unsere erstaunlichen Leser, verlieren !

Lassen Sie uns mit einigen Credits beginnen, um zu sehen, wer hinter all dem steht ...

Also, was ist neu in diesem Design:

Hybrid-Layout: Magazin & traditioneller Blog-Stil

Während das alte Design ein traditionelles Blog-Layout hatte, mit den neuesten Posts, die immer an der Spitze erscheinen, ist die neu gestaltete Version eine Kreuzung zwischen einem Magazin-Stil und einem traditionellen Blog-Layout. Wir finden, dass dies für unsere Inhalte recht gut funktioniert. Das größere Layout erlaubte es uns, viel mehr Inhalt in die Homepage zu bringen, während die 2 Spalten auf der Homepage das Lesen einfacher machen als einige traditionelle Blogs im Magazin-Stil, wo der Inhalt manchmal überwältigend sein kann.

Vorgestellter Inhalt

Die Blogposts sind durch drei Bereiche unterteilt: 2 vertikale und 1 horizontale. Die vertikalen Bereiche enthalten einige der heißesten Themen auf der Website (Responsive Design, jQuery, etc.), während der horizontale Bereich verwendet wird, um die neuesten Angebote von unserer Website MightyDeals.com zu präsentieren. Insgesamt können wir 10 Beiträge mehr als im vorherigen Design veröffentlichen, ohne unsere Leser zu überfordern.

Balance und Gewicht

Homepage: Aufgrund der starken Bildsprache haben wir versucht, ein ausgewogenes Verhältnis zwischen Text und Bildern zu gewährleisten, indem wir für jeden Beitrag ausreichend Vorschautext-Inhalt angezeigt haben. Für die eigentlichen Artikelseiten haben wir Bilder und Codeschnipsel in voller Breite ausgewählt, während der Text in einer schmaleren Breite zu den Bildern zentriert angezeigt wird. Dies macht die Website schneller und einfacher zu lesen (oder zu scannen) und zeigt die Bilder in ihrer größtmöglichen Größe für maximale Wirkung an. Für die Bilder in älteren Posts und anderen schmaleren Bildern wählten wir graue Balken an der Seite, die an die schwarzen Balken erinnern, die Sie sehen, wenn Sie eine Standard Definition-Show auf einem HD-Fernseher sehen. Dies war der beste Kompromiss, den wir finden konnten, um diese älteren Beiträge in das neue Aussehen der Website zu integrieren, ohne Hunderte von Posts nachrüsten zu müssen!

Sich anpassendes Design

Die neue Website ist jetzt vollständig reaktionsfähig und sieht gut aus, egal ob Sie auf einem Desktop-Computer, Laptop, Tablet oder Smartphone sind. Sieh dir die Smartphone-Version an, da sie so aussieht und sich eher wie eine App als eine Website anfühlt, und wir sind wirklich stolz auf die Art und Weise, wie sich diese herausstellte. Es lädt auch schnell!

Retina-Grafiken

Mit der Einführung von mehr Retina-Geräten durch Apple werden Anzeigen mit höherer Auflösung für Websites immer relevanter. Die neue WDD dient, wo immer möglich, als Retina-Grafik. Das Design der Website sieht auf Retina-Geräten perfekt aus. In Zukunft werden wir, wenn immer möglich, in allen Posts Retina-optimierte Grafiken haben. Dies ist leichter gesagt als getan, da das Web noch nicht vollständig retinabereit ist. Tatsächlich bieten derzeit nur sehr wenige Websites große hochauflösende Grafiken an. Einige unserer neuesten Posts sind bereits teilweise retinafähig und einige werden dies auch in Zukunft tun. Wir haben auch gehört, dass Retina-Werbung in Zukunft nicht allzu weit weg sein könnte.

Erweiterte Navigation

Sie werden ein Pluszeichen auf der rechten Seite Ihres Browsers sehen (nicht auf mobilen Geräten), wenn Sie Artikel anzeigen. Wenn Sie darauf klicken, öffnet sich ein Minibrowser, mit dem Sie durch den aktuellen Artikel navigieren können, zum Beispiel durch das Inhaltsverzeichnis eines eBooks. Sie können den aktuellen Artikel auch über den Minibrowser freigeben oder verwandte Artikel anzeigen sowie die nächsten und vorherigen Posts lesen.

Die Kunst

Wir haben erneut mit dem talentierten Illustrator Radim Malinic zusammengearbeitet, um die Kunst für unsere neue Website zu schaffen. Radim ist ein preisgekrönter Art Director und Grafikdesigner mit Sitz in London, England. Unter dem Namen Marke Nu Er arbeitet mit führenden Haushaltsmarken zusammen. Seit dem ursprünglichen WDD-Website-Design hat er mit Goldman Sachs, Bacardi, Blistex, dem London Film Museum und vielen anderen zusammengearbeitet. Sein Arbeitsstil ist einer der vielfältigsten in der Branche. Seine kühnen und farbenfrohen Entwürfe inspirieren viele Menschen, die sie sehen. Wir haben Radim gebeten, sein Design diesmal auf Kreise zu fokussieren, da es sich um eine zeitlose Form handelt, die sehr beliebt ist und bei aktuellen Website-Designs beliebt ist.

Parallaxe

Die neue Kunst und das Logo auf der Kopfzeile werden mit einem 5-lagigen Parallax-Effekt (der sich mit unterschiedlichen Geschwindigkeiten bewegt) im Kopfbereich der Website zum Leben erweckt. Um es zu sehen, bewegen Sie einfach Ihre Maus im Kopfbereich (nicht auf mobilen Geräten). Wir denken, es sieht ziemlich cool aus und fügt der Seite eine Menge Spaß hinzu! [UPDATE] Der Parallax-Effekt wurde von den meisten geliebt, aber einigen Leuten gefiel das nicht, also haben wir die Option hinzugefügt, um es auszuschalten, indem wir mit der rechten Maustaste auf den Effektbereich klicken.

Logo

Obwohl uns das alte Logo sehr gut gefiel und es uns gut gefallen hat, da es sich um ein komplettes Redesign handelt, war ein neues Logo in Ordnung! Wir haben dieses Mal mit zusammengearbeitet Steven Bonner um unser Logo neu zu gestalten. Er ist ein sehr talentierter Typograf in Schottland mit einem beneidenswerten Portfolio von typografischen Illustrationen für einige der größten Marken der Welt. Wir denken, dass es großartig geworden ist und balanciert die Seite gut mit einer persönlichen, von Hand gezeichneten Note, während sie gleichzeitig professionell und poliert aussieht.

Typografie

Schließlich haben wir die alten langweiligen Systemschriftarten zugunsten von Typekit-Webschriftarten aufgegeben, die ausschließlich auf der gesamten Website verwendet werden. Wir gebrauchen Kulturista für alle Header, die gut aussieht und eine nette Persönlichkeit und einzigartiges Gefühl hat. Für den Fließtext haben wir uns entschieden Proxima Nova Das hat eine hervorragende Lesbarkeit und eignet sich hervorragend für große Textabschnitte. Für Header haben wir auch überlegt Adelle und für Body Text haben wir auch Museo Sans, Adelle Sans , Myriade und Helvetica .

Picto Icon Schriftart

Wir verwenden viele Symbole in diesem neuen Design. Die Icons sind Teil des Awesome Picto Symbol Schriftart entworfen von Drew Wilson . Wir verwenden es sogar für unsere animierten sozialen Symbole am Ende der Seite.

Fußzeile

Wir haben 2 Fußbereiche am Ende der Seite. Die erste hebt einige Bereiche hervor, die wir für wichtig halten, und dann haben Sie eine traditionellere Fußzeile ganz unten mit meist Textlinks und einigen animierten sozialen Symbolen.

Soziale Integration

Wir wollten unsere Leser in einer größeren Art und Weise präsentieren, also ist die neue WDD viel sozialer als zuvor. Wir zeigen jetzt Ihre Kommentare und Retweets direkt unter jedem Beitrag auf der Startseite. Also, wenn Sie ein wenig Ruhm wollen, können Sie jetzt Ihren Avatar genau dort für die ganze Welt zu sehen bekommen! Nun, das ist ein bisschen übertrieben!

Weniger Anzeigen

In Ordnung, einige gute und einige schlechte Nachrichten. Einige unserer Anzeigen wurden größer, aber wir haben auch die Anzahl der Anzeigen auf der Website reduziert. Wir geben zu, dass unsere Seite im Laufe der Jahre ein bisschen zu aufgebläht mit Werbung wurde, also war dies eine großartige Gelegenheit, Dinge aufzuräumen. Dies hat das Layout sauberer und ästhetisch angenehmer gemacht, während man immer noch in der Lage ist, die Miete zu bezahlen - vergiss nicht unsere freundlichen Sponsoren zu unterstützen :)

Depot.ly

Dieser ist eigentlich ein paar Wochen alt: Wir haben angefangen, die depot.ly kurze URL für unsere Tweets zu verwenden, damit Sie unsere Posts in allen sozialen Kanälen, die Sie verwenden, erkennen können. Ziemlich nützlich, denken wir!

Mehr Inhalt

Wie Sie vielleicht bemerkt haben, haben wir vor kurzem begonnen, jeden Tag mehr Artikel zu veröffentlichen. Obwohl redaktionelle Beiträge die Essenz unserer Inhalte waren und bleiben, decken wir jetzt auch relevante Nachrichten und Mini-Beiträge ab, die sich gut für die Designer und Entwickler eignen, die unsere Website besuchen. Wir glauben, dass dies dazu führt, dass die Seite aktuell bleibt und in Kontakt mit dem ist, was in der Welt gerade passiert, ohne für jeden Beitrag auf Editorials zurückgreifen zu müssen.

Wir sind auf viele Probleme gestoßen, die dazu führten, dass dieses Design über alle Browser und Geräte hinweg funktioniert (und immer noch!). In der Tat war dies der Grund für einige der letzten Verzögerungen, die wir erlebten. Wir sollten letzte Woche starten, aber viele Browser-Probleme verlangsamten uns. Das tut mir leid! Firefox war besonders herausfordernd, aber IE 8 erwies sich als das Schlimmste und die Ursache vieler Kopfschmerzen und Frustrationen für unsere Programmierer. Seit unserer Einführung gestern haben wir viele zusätzliche Informationen über Twitter erhalten, die noch gelöst werden müssen. Vielen Dank für Ihre Geduld.

Was Sie heute sehen, ist das neue Design, aber das ist noch nicht alles. Wir planen bald neue Sachen hinzuzufügen. In den nächsten Wochen erfahren Sie mehr darüber.

Wir alle persönlich lieben das neue Design und wir erwarten, dass es sich aufgrund Ihres Feedbacks weiterentwickelt. Wir werden es wirklich zu schätzen wissen, wenn Sie uns immer noch über alles informieren könnten, was Sie gerne verbessern würden. Bitte lassen Sie uns auch wissen, wenn Sie Probleme mit der Browserkompatibilität oder Probleme auf bestimmten mobilen Geräten haben, die Sie verwenden, damit wir sie schnell beheben können.

Wie immer sind wir Ihnen allen zutiefst und immens dankbar, dass Sie WDD in all den Jahren unterstützt haben. Vielen Dank für das gesamte Team hier bei WDD und wir hoffen, dass dieses neue Design Sie inspiriert und Ihnen beim Surfen auf unserer Website behilflich ist.

Was denkst du über das neue Redesign der WDD? Wir freuen uns auf Ihr Feedback!

sich anpassendes Design Web-Design Redesign wdd Retina-Grafiken webdesignerdepot