WebdesignerDepot opnieuw ontworpen!
En hier is het ... Na veel te veel oponthoud, talloze mock-ups en ideeën, het nieuwe {$lang_domain} is eindelijk hier! Dit was een ongelooflijk complex herontwerpproces voor het hele WDD-team, maar we zijn buitengewoon trots op de resultaten en we hopen dat je er net zoveel van zult houden als wij.
We hebben het nieuwe ontwerp gisteren gelanceerd en de Twittersphere heeft ons goede feedback gegeven en geholpen om enkele bugs te identificeren. We hebben de afgelopen dag bugs opgelost en doen dit nog steeds, dus excuseer een paar technische problemen die je de komende dagen nog steeds tegen kunt komen.
Het was belangrijk voor ons dat het nieuwe ontwerp de ziel van de oude site om zo te zeggen houdt, terwijl het tegelijkertijd onze bezoekers inspireert en het up-to-date brengt volgens de huidige web-ontwerpstandaarden en -technieken.
Met name de nieuwe startpagina doet een beter werk bij het introduceren van nieuwe bezoekers op onze site. U zult merken dat de navigatie- en informatiestructuur nu veel schoner en duidelijker is.
In dit bericht gaan we dieper in op wat er nieuw is en wat er achter de schermen gebeurde om je deze nieuwe versie van WDD te brengen. Dus, laten we er meteen in duiken!
Als u de afgelopen jaren een van onze 40 miljoen bezoekers (!) Bent geweest, zult u merken dat het ontwerp goed is, hoe te zeggen? Radicaal anders! In feite is geen van de oude ontwerpen bewaard. We gooiden alles weg en begonnen vers van de grond te komen. Dit is zo radicaal als je kunt krijgen met een herontwerp en het houdt bepaalde risico's in voor ons, omdat we onze eerdere brandingvoordelen verliezen ten gunste van wat naar onze mening een betere keuze is voor onze site, de inhoud en vooral: JIJ, onze geweldige lezers !
Laten we beginnen met wat credits om te zien wie er achter dit alles zit ...
- Kunst: Radim Malinic
- Logo: Steven Bonner
- Web ontwerp: Walter Apai
- Code: WDD-team
- Sommige ontwerpelementen door Matthew Skiles
- Ontwerp citaten: Citaten over ontwerp
Dus dit is wat nieuw is in dit ontwerp:
Hybride lay-out: tijdschrift en traditionele blogstijl
Hoewel het oude ontwerp een traditionele blogindeling had, met de nieuwste berichten altijd bovenaan, is de opnieuw ontworpen versie een kruising tussen een tijdschriftstijl en een traditionele bloglayout. We vinden dat dit vrij goed werkt voor onze inhoud. Door de bredere lay-out konden we veel meer inhoud meenemen naar de startpagina, terwijl de twee kolommen op de startpagina het gemakkelijker maken om te lezen dan sommige traditionele blogs in tijdschriftstijlen, waar de inhoud soms overweldigend kan zijn.
Aanbevolen inhoud
De blogberichten worden afgewisseld door drie aanbevolen gebieden: 2 verticaal en 1 horizontaal. De verticale gebieden bevatten enkele van de populairste onderwerpen op de site (responsief ontwerp, jQuery, enz.), Terwijl het horizontale gebied wordt gebruikt om de nieuwste deals van onze site MightyDeals.com te tonen. In totaal kunnen we meer dan 10 berichten posten die we in het vorige ontwerp hebben gebruikt zonder onze lezers te overmeesteren.
Evenwicht en gewicht
Homepage: wegens de zware beelden probeerden we een evenwichtige weergave te behouden tussen tekst en afbeeldingen door voldoende voorbeeldtekstinhoud weer te geven voor elk bericht. Voor de daadwerkelijke artikelpagina's hebben we ervoor gekozen om afbeeldingen en codefragmenten op de volledige breedte te hebben, terwijl de tekst in het midden op een smallere breedte dan de afbeeldingen wordt weergegeven. Hierdoor is de site sneller en gemakkelijker te lezen (of te scannen) en worden de afbeeldingen in de grootst mogelijke grootte weergegeven voor maximale impact. Voor de afbeeldingen in oudere berichten en andere smallere afbeeldingen hebben we ervoor gekozen grijze balken aan de zijkant weer te geven, die doen denken aan de zwarte balken die u ziet bij het bekijken van een standaarddefinitievoorstelling op een HD-tv. Dit was het beste compromis dat we konden vinden om die oudere berichten te integreren in de nieuwe look van de site zonder honderden posts aan te passen!
Reagerend ontwerp
De nieuwe site is nu volledig responsief en ziet er geweldig uit, of je nu op een desktopcomputer, laptop, tablet of smartphone zit. Bekijk de smartphone-versie zoals deze eruit ziet en voelt meer als een app dan een website en we zijn erg trots op de manier waarop deze is uitgekomen. Het laadt ook snel!
Retina-afbeeldingen
Nu Apple meer retina-apparaten heeft uitgerold, worden schermen met een hogere resolutie steeds relevanter voor websites. De nieuwe WDD dient waar mogelijk retina-afbeeldingen. Het ontwerp van de site ziet er perfect helder uit op retina-apparaten. In de toekomst zullen we waar mogelijk geoptimaliseerde afbeeldingen in het netvlies in al onze berichten hebben. Dit is gemakkelijker gezegd dan gedaan, omdat het web nog niet helemaal klaar is voor het netvlies, in feite zijn er op dit moment maar heel weinig sites die grote afbeeldingen met hoge resolutie weergeven. Sommige van onze laatste berichten zijn al gedeeltelijk klaar voor het netvlies en sommige zullen dit in de toekomst dragen. We hebben ook gehoord dat retina-advertenties misschien niet al te ver in de toekomst zijn.
Verbeterde navigatie 
U ziet een plusteken aan de rechterkant van uw browsers (niet op mobiele apparaten) bij het bekijken van artikelen. Wanneer erop wordt geklikt, opent dit een mini-browser waarmee u door het huidige artikel kunt bladeren, zoals bladeren door de inhoudsopgave van een eBoek. U kunt het huidige artikel ook delen via de mini-browser, of gerelateerde artikelen bekijken, evenals de volgende en vorige berichten lezen.
De kunst
Wederom hebben we samengewerkt met über getalenteerde illustrator Radim Malinic om de kunst voor onze nieuwe site te maken. Radim is een bekroond art director en grafisch ontwerper, gevestigd in Londen, Engeland. Onder de naam van Merk Nu hij werkt met toonaangevende huismerken. Sinds het oorspronkelijke ontwerp van de WDD-website is hij gaan werken met Goldman Sachs, Bacardi, Blistex, London Film Museum en nog veel meer. Zijn stijl van werken is een van de meest uiteenlopende in de industrie. Zijn gedurfde en kleurrijke ontwerpen inspireren veel mensen die ze zien. We hebben Radim gevraagd om zijn ontwerp deze keer te richten op cirkels, omdat dit een tijdloze vorm is die extreem populair en favoriet is in de huidige websiteontwerpen.
Parallax
De nieuwe kunst en het logo op de koptekst worden tot leven gebracht met een parallaxeffect met 5 lagen (verplaatsen met verschillende snelheden) in het kopgedeelte van de website. Om het te zien, beweeg je je muis eenvoudig door het header-gebied (niet op mobiele apparaten). We denken dat het er best cool uitziet en voegt een element van plezier toe aan de site! [UPDATE] Het parallax-effect was bij de meeste geliefd, maar sommige mensen hielden er niet van, daarom hebben we de optie toegevoegd om het uit te schakelen door rechts te klikken op het effectgebied.
Logo
Hoewel het oude logo ons goed van pas kwam en goed werd bevonden, omdat dit een compleet nieuw ontwerp was, was een nieuw logo in orde! We hebben deze keer samengewerkt met Steven Bonner om ons logo opnieuw te ontwerpen. Hij is een zeer getalenteerde typograaf met hoofdkantoor in Schotland, met een benijdenswaardige portfolio van typegedreven illustraties voor enkele van de grootste merken ter wereld. We denken dat het geweldig is en brengt de site op een evenwichtige manier in balans met een persoonlijke handgetekende aanraking, terwijl hij tegelijkertijd professioneel en gepolijst oogt.
Typografie
Uiteindelijk hebben we de oude saaie systeemlettertypen verwijderd ten gunste van typekit-weblettertypen, die uitsluitend op de hele site worden gebruikt. We gebruiken Kulturista voor de alle headers die er geweldig uitziet en een mooie persoonlijkheid en een uniek gevoel heeft. Voor de hoofdtekst hebben we gekozen Proxima Nova met een uitstekende leesbaarheid en is geweldig voor grote hoeveelheden tekst. Voor kopteksten hebben we ook overwogen Adelle , en voor lichaamstekst hebben we ook Museo Sans overwogen, Adelle Sans , myriade en Helvetica .
Pictos Icon lettertype
We gebruiken veel pictogrammen in dit nieuwe ontwerp. De iconen maken deel uit van het geweldige Pictos pictogram lettertype ontworpen door Drew Wilson . We gebruiken het zelfs voor onze geanimeerde sociale pictogrammen onderaan de site.
footer
We hebben twee voetteksten aan de onderkant van de site. De eerste benadrukt enkele gebieden waarvan we vinden dat ze belangrijk zijn om te benadrukken en dan heb je een meer traditioneel ogende voettekst helemaal onderaan met voornamelijk tekstlinks en enkele geanimeerde sociale pictogrammen.
Sociale integratie
We wilden onze lezers op een grotere manier laten zien, dus de nieuwe WDD is veel socialer dan voorheen. We plaatsen nu uw opmerkingen en retweets direct onder elk bericht op de startpagina. Dus, als je een klein beetje bekendheid wilt, kun je nu je avatar hier vinden voor de hele wereld om te zien! Wel, dat is een beetje overdreven!
Minder advertenties
Oké, wat goed en slecht nieuws. Sommige van onze advertenties zijn groter geworden, maar we hebben ook het aantal advertenties verminderd dat op de site wordt weergegeven. We geven toe dat onze site in de loop der jaren een beetje te vol is geweest met advertenties, dus dit was een geweldige kans om dingen op te ruimen. Dit heeft de layout schoner en esthetischer gemaakt om te navigeren, terwijl je toch in staat bent om de huur te betalen - vergeet niet om onze vriendelijke sponsors te steunen :)
Depot.ly
Deze is eigenlijk een paar weken oud: we zijn begonnen met het gebruik van de depot.ly korte URL voor onze tweets, zodat je onze berichten kunt herkennen in alle sociale kanalen die je gebruikt. Best handig, denken we!
Meer inhoud
Zoals je misschien hebt gemerkt, zijn we onlangs begonnen met het plaatsen van meer artikelen per dag. Hoewel redactionele berichten de essentie van onze inhoud zijn en blijven, omvatten we nu ook relevant nieuws en miniposten die geschikt zijn voor de ontwerpers en ontwikkelaars die onze site bezoeken. We zijn van mening dat dit de site actueler houdt en in contact staat met wat er momenteel in de wereld gebeurt, zonder gebruik te maken van volledige editorials voor elk bericht.
We hebben veel problemen ondervonden om dit ontwerp in alle browsers en apparaten te laten werken (en nog steeds doen!). In feite was dit de oorzaak van enkele van de last minute vertragingen die we hebben ervaren. We waren van plan om vorige week te lanceren, maar veel browserproblemen hebben ons vertraagd. Sorry daarvoor! Firefox was bijzonder uitdagend, maar IE 8 bleek het erger te zijn en de oorzaak van veel hoofdpijn en frustraties voor onze coders. Sinds onze lancering gisteren, hebben we via Twitter veel extra info ontvangen over zaken die nog moeten worden opgelost. Bedankt voor uw geduld terwijl we deze behandelen.
Wat je vandaag ziet, is het nieuwe ontwerp, maar dat is niet alles. We zijn van plan binnenkort wat nieuwe dingen toe te voegen. Hier kom je de komende weken meer over te weten.
We houden allemaal persoonlijk van het nieuwe ontwerp en we verwachten dat het blijft evolueren op basis van uw feedback. We stellen het zeer op prijs als u ons nog iets zou laten weten over dingen waarvan u wilt dat wij het verbeteren. Laat het ons ook weten als u problemen ondervindt met browsercompatibiliteit of problemen op een bepaald mobiel apparaat dat u gebruikt, zodat we deze snel kunnen verhelpen.
Zoals altijd zijn we enorm en enorm dankbaar voor jullie allemaal voor het ondersteunen van WDD voor al die jaren. Van het hele team hier bij WDD, iedereen heel erg bedankt en we hopen dat dit nieuwe ontwerp u inspireert en u goed van pas komt terwijl u onze site bezoekt.
Wat denk je van het nieuwe WDD-herontwerp? Wij verwelkomen uw feedback!