Design Interativo

WebdesignerDepot Redesenhado!

E aqui está ... Depois de muitos atrasos, incontáveis ​​mock-ups e idéias, o novo {$lang_domain} está finalmente aqui! Este foi um processo de redesenho incrivelmente complexo para toda a equipe do WDD, mas estamos extremamente orgulhosos dos resultados e esperamos que você goste tanto quanto nós.

Lançamos o novo design ontem e o Twittersphere tem nos dado um ótimo feedback e ajudado a identificar alguns bugs. Estamos corrigindo bugs para o dia anterior e ainda estamos fazendo isso, então, por favor, desculpe algumas falhas de tecnologia que você ainda pode encontrar nos próximos dias.

Foi importante para nós que o novo design mantenha a alma do antigo site, por assim dizer, enquanto ao mesmo tempo inspira nossos visitantes e os atualiza para os padrões e técnicas atuais de web design.

A nova homepage, em particular, faz um trabalho melhor na introdução de novos visitantes em nosso site. Você notará que a estrutura de navegação e informação está muito mais limpa e clara agora.

Neste post, entraremos em mais alguns detalhes sobre o que há de novo e o que aconteceu nos bastidores para trazer a você esta nova versão do WDD. Então, vamos mergulhar direto!

Se você foi um dos nossos 40 milhões de visitantes (!) Nos últimos anos, perceberá que o design é, bem, como dizê-lo? Radicalmente diferente! Na verdade, nenhum dos designs antigos foi mantido. Nós jogamos tudo fora e começamos de novo a partir do zero. Isso é tão radical quanto possível com um redesenho e traz certos riscos para nós, pois perdemos nossos benefícios de branding anteriores em favor do que acreditamos ser uma escolha melhor para nosso site, seu conteúdo e, o mais importante: VOCÊ, nossos incríveis leitores !

Vamos começar com alguns créditos para ver quem está por trás de tudo isso…

Então, aqui está o que há de novo neste design:

Layout híbrido: revista e estilo tradicional de blog

Enquanto o design antigo tinha um layout de blog tradicional, com os posts mais recentes sempre aparecendo no topo, a versão redesenhada é um híbrido entre um estilo de revista e um layout de blog tradicional. Achamos que isso funciona muito bem para o nosso conteúdo. O layout mais amplo nos permitiu trazer muito mais conteúdo para a página inicial, enquanto as duas colunas da página inicial facilitam a leitura do que alguns blogs tradicionais de estilo de revista, onde o conteúdo às vezes pode ser esmagador.

Conteúdo em destaque

Os posts do blog são intercalados por três áreas: 2 verticais e 1 horizontal. As áreas verticais apresentam alguns dos tópicos mais quentes no site (design responsivo, jQuery, etc), enquanto a área horizontal é usada para mostrar as últimas ofertas do nosso site MightyDeals.com. No total, podemos destacar mais 10 postagens do que costumávamos no design anterior, sem sobrecarregar nossos leitores.

Equilíbrio e peso

Página inicial: devido às imagens pesadas, tentamos manter um equilíbrio entre o texto e as imagens, exibindo suficiente conteúdo de texto de visualização para cada postagem. Para as páginas reais do artigo, optamos por ter imagens e trechos de código em largura total, enquanto o texto é exibido centrado em uma largura menor para as imagens. Isso torna o site mais rápido e fácil de ler (ou digitalizar) e exibe as imagens em seus maiores tamanhos possíveis para um impacto máximo. Para as imagens em postagens mais antigas e outras imagens mais estreitas, optamos por exibir barras cinza na lateral, lembrando as barras pretas que você vê ao assistir a um programa de definição padrão em uma TV HD. Este foi o melhor compromisso que conseguimos encontrar para integrar essas postagens mais antigas no novo visual do site sem atualizar centenas de postagens!

Design responsivo

O novo site agora é totalmente responsivo e parece ótimo se você está em um computador desktop, laptop, tablet ou smartphone. Confira a versão do smartphone como parece e se parece mais com um aplicativo do que com um site, e estamos realmente orgulhosos da forma como este se tornou. Ele carrega rápido também!

Ilustrações de Retina

Com a Apple lançando mais dispositivos de retina, telas de maior resolução estão se tornando mais relevantes para websites. O novo WDD está servindo gráficos de retina sempre que possível. O design do site parece perfeitamente nítido em dispositivos de retina. No futuro, teremos gráficos otimizados de retina em todos os nossos posts sempre que possível. Isso é mais fácil de dizer do que fazer, já que a Web ainda não está pronta para a retina, de fato, poucos sites estão oferecendo grandes gráficos de alta resolução no momento. Alguns dos nossos posts mais recentes já estão parcialmente prontos para a retina e outros serão carregados no futuro. Também ouvimos que os anúncios de retina podem não estar muito longe no futuro.

Navegação aprimorada

Você notará um sinal de adição no lado direito de seus navegadores (não em dispositivos móveis) ao visualizar artigos. Quando clicado, isso abre um mini navegador que permite navegar pelo artigo atual, como navegar pelo índice de um eBook. Você também pode compartilhar o artigo atual por meio do mini-navegador ou ver artigos relacionados, além de ler as postagens seguinte e anterior.

A arte

Mais uma vez, colaboramos com o talentoso ilustrador Radim Malinic para criar a arte do nosso novo site. Radim é um premiado diretor de arte e designer gráfico, com sede em Londres, Inglaterra. Sob o nome de Marca Nu ele trabalha com marcas domésticas líderes. Desde o design original do site WDD, ele passou a trabalhar com a Goldman Sachs, a Bacardi, a Blistex, o London Film Museum e muito mais. Seu estilo de trabalho é um dos mais diversos do setor. Seus designs arrojados e coloridos inspiram muitas pessoas que os veem. Pedimos a Radim para focar seu design nos círculos desta vez, já que esta é uma forma atemporal que é extremamente popular e favorecida nos projetos atuais de websites.

Paralaxe

A nova arte e logotipo no cabeçalho são trazidos à vida com um efeito de paralaxe de 5 camadas (movendo-se em taxas diferentes) na seção de cabeçalho do site. Para vê-lo, basta mover o mouse pela área do cabeçalho (não em dispositivos móveis). Achamos que parece muito legal e adiciona um elemento de diversão ao site! [UPDATE] O efeito parallax foi amado pela maioria, mas algumas pessoas não gostaram, então adicionamos a opção de desativá-lo clicando com o botão direito do mouse na área de efeitos.

Logotipo

Embora o logotipo antigo nos servisse bem e fosse muito apreciado, já que este era um redesenho completo, um novo logotipo estava em ordem! Nós colaboramos desta vez com Steven Bonner para redesenhar nosso logotipo. Ele é um tipógrafo muito talentoso baseado na Escócia com um invejável portfólio de ilustrações lideradas por tipos para algumas das maiores marcas do mundo. Achamos que ficou ótimo e equilibra bem o site com um toque pessoal desenhado à mão, enquanto parece profissional e polido ao mesmo tempo.

Tipografia

Finalmente abandonamos as antigas fontes chatas do sistema em favor das fontes da Web Typekit, usadas exclusivamente em todo o site. Nós usamos Kulturista para todos os cabeçalhos que parece ótimo e tem uma personalidade agradável e sensação única. Para o texto do corpo, escolhemos Proxima Nova que tem excelente legibilidade e é ótimo para grandes blocos de texto. Para os cabeçalhos, também consideramos Adelle , e para o corpo do texto também consideramos o Museo Sans, Adelle Sans , Miríade e helvética .

Fonte Pictos Icon

Nós usamos muitos ícones neste novo design. Os ícones fazem parte do incrível Fonte do ícone Pictos projetado por Drew Wilson . Nós até usamos nossos ícones sociais animados na parte inferior do site.

Rodapé

Temos duas áreas de rodapé na parte inferior do site. O primeiro destaca algumas áreas que consideramos importantes enfatizar e, em seguida, você tem um rodapé com aparência mais tradicional na parte inferior, com principalmente links de texto e alguns ícones sociais animados.

Integração social

Queríamos mostrar nossos leitores de uma maneira maior, então o novo WDD é muito mais social do que antes. Agora, apresentamos seus comentários e retweets diretamente abaixo de cada postagem na página inicial. Então, se você quer um pouco de fama, agora você pode obter o seu avatar para todo o mundo ver! Bem, isso é um pouco exagerado!

Menos anúncios

Tudo bem, algumas boas e más notícias. Alguns de nossos anúncios ficaram maiores, mas também reduzimos o número de anúncios em exibição no site. Admitimos que, com o passar dos anos, nosso site ficou inchado demais com anúncios, por isso foi uma ótima oportunidade para limpar as coisas. Isso tornou o layout mais limpo e esteticamente mais agradável de navegar, enquanto ainda é capaz de pagar o aluguel - não se esqueça de apoiar os nossos patrocinadores amáveis ​​:)

Depot.ly

Este é na verdade um par de semanas: começamos a usar o URL depot.ly curto para nossos tweets, para que você possa reconhecer nossas postagens em qualquer canal social que você usa. Muito útil nós pensamos!

Mais conteúdo

Como você deve ter notado, recentemente começamos a postar mais artigos por dia. Embora os posts editoriais tenham sido e continuem a ser a essência do nosso conteúdo, agora também abordamos notícias relevantes e mini postagens que serão adequadas para os designers e desenvolvedores que visitam nosso site. Achamos que isso mantém o site mais atual e em contato com o que está acontecendo no mundo atualmente, sem recorrer a editoriais completos para cada postagem.

Encontramos muitos problemas para que esse design funcionasse em todos os navegadores e dispositivos (e ainda o fazem!). Na verdade, essa foi a causa de alguns dos atrasos de última hora que passamos. Nós estávamos destinados a lançar na semana passada, mas muitos problemas de navegadores nos atrasaram. Desculpe por isso! O Firefox foi particularmente desafiador, mas o IE 8 provou ser o pior e a causa de muitas dores de cabeça e frustrações para nossos codificadores. Desde o nosso lançamento de ontem, recebemos muitas informações adicionais via Twitter sobre problemas que ainda precisam ser resolvidos. Obrigado pela sua paciência enquanto abordamos isso.

O que você vê hoje é o novo design, mas isso não é tudo. Estamos planejando adicionar algumas novidades em breve. Você aprenderá mais sobre isso nas próximas semanas.

Todos nós amamos pessoalmente o novo design e esperamos que ele continue evoluindo com base no seu feedback. Nós realmente apreciaremos se você ainda puder nos informar sobre qualquer coisa que você gostaria que melhorássemos. Além disso, informe-nos caso encontre algum problema de compatibilidade com o navegador ou problemas em qualquer dispositivo móvel específico que você use, para que possamos resolvê-los rapidamente.

Como sempre, estamos profundamente e imensamente gratos a todos vocês pelo apoio ao WDD durante todos esses anos. Da equipe inteira aqui no WDD, um grande obrigado a cada um de vocês e esperamos que este novo design inspire você e sirva bem enquanto você navega em nosso site.

O que você acha do novo redesenho do WDD? Congratulamo-nos com o seu feedback!

design responsivo Designer de Web redesenhar wdd ilustrações de retina webdesignerdepot