Quando você começa como designer da web, faz tudo o que pode para entender os princípios básicos de design, para ter uma base sólida para iniciar sua jornada. À medida que você se torna mais proficiente em seu ofício, você começa a aprender técnicas mais avançadas e começa a implementar coisas maiores e melhores em seu trabalho até chegar a um ponto em que se sente muito confortável para sair dos limites do comum. O que mais você pode fazer para levar seus designs da web para o próximo nível?
Aqui estão apenas algumas idéias que você pode considerar se quiser levar seus designs da web para o próximo nível.
Definir detalhes do design
Se você olhar para os sites mais lindamente projetados, notará que eles geralmente são separados, não por causa de grandes coisas, mas os pequenos detalhes que informam que o designer tomou muito cuidado e atenção até das menores das coisas. Muitos desses aprimoramentos sutis são inspirados em tendências emergentes de web design, que ultrapassam continuamente os limites da criatividade e da experiência do usuário. Esses pequenos toques não precisam estar na sua cara para serem poderosos e eficazes; Os detalhes podem incluir um golpe de cabelo para profundidade adicional, um gradiente fraco para superfícies mais interessantes, pequenos ícones para apelo visual adicional e para ajudar a cognição visual e assim por diante.
Aqui estão três bons exemplos de designs da web que se aprofundam nos detalhes.
Fundação Seis
Este site é com muitos detalhes pequenos que contribuem para um ótimo design geral. O banner atrás do logotipo F6 no canto superior esquerdo do layout tem uma leve sombra, criando profundidade e chamando a atenção através da distinção. As sombras por trás do grande site miniaturas no meio também são agradáveis para criar profundidade.
Pequenas sombras podem ser vistas em vários lugares, se você olhar de perto, além de destaques também. Ícones únicos e outros pequenos detalhes fazem esse design realmente brilhar.
Tnvacation
Este design de site mostra grande personalidade através de muitas texturas, cores brilhantes e ótimas tipografia. O banner de navegação tem muitos detalhes, incluindo linhas divisórias exclusivas, uma fita de embrulho com profundidade e linhas extras na parte superior e inferior que completam a aparência.
O padrão pontilhado de metalone pode ser visto em todo o site, não apenas mostrando consistência, mas também a impressão de que o designer presta atenção aos detalhes.
Capo
Este site é sutil em cores, mas ainda poderoso e carregado de detalhes. Sombras leves podem ser encontradas em todos os lugares do site: na orla do conteúdo, manchetes, linhas divisórias e assim por diante. Essas sombras sutis são maneiras maravilhosas de adicionar pequenos detalhes.
O brilho suave no centro superior da página inicial também é um bom detalhe adicional.
Aprenda jQuery para funcionalidade adicional
Menciono o jQuery aqui porque é o meu desenvolvimento na web de front-end/ajax javascript biblioteca de escolha e porque é conhecido por ser amigável para web designers – No entanto, existem muitas outras bibliotecas de JavaScript, como MooTools, Yui e Dojo, que estão igualmente prontos para a tarefa. As bibliotecas JS podem dar aos designers uma maneira fácil de implementar efeitos de animação e interatividade em seu design e, se você é o tipo mais corajoso de designer da web, utilitários do Ajax e manipulação dinâmica de marcação. Vejamos alguns ótimos designs da web que foram levados para o próximo nível por causa das bibliotecas de desenvolvimento da Web JavaScript.
Hull Digital Live 10
Você pode encontrar muitos exemplos excelentes de uso do jQuery neste design do site.
Mais notavelmente, confira a animação de navegação, o gráfico do cabeçalho que foi funcionado com o uso de eventos de pairar e o feed de rolagem do Twitter perto da parte inferior. Essas adições ao site são elegantes e profissionais, adicionando muita bondade ao design.
8 rostos
Este site projetado de maneira limpa possui alguns recursos jQuery para aumentar a experiência do usuário. Confira a caixa “Preview” na página inicial, que é uma apresentação de slides baseada em jQuery que faz a transição entre fotos.
Além disso, confira a interessante ação de rolagem que mantém a navegação na barra lateral e o logotipo do site fixado no lugar. O tema do site, minimalista e limpo, faz as peças interativas realmente se destacarem.
Drexler
Uma caixa sutil solicita os usuários a “usar suas setas” nesse design e, embora possa ser um pouco experimental demais como o recurso de navegação primária, eles têm um backup (o menu principal de navegação). Ter um backup para a interatividade JavaScript – e garantir que seu trabalho se degrada graciosamente para que funcione sem JavaScript – é uma boa prática que você deve ter em mente ao trabalhar com JS.
Além disso, você também pode clicar nas setas que aparecem sobre o banner de imagens, que rola através de uma apresentação de slides de imagens. Clique no site e você verá outros boatos jQuery no trabalho.
Use fontes exclusivas
Ótima tipografia certamente pode fazer um bom site até o Awesomer. Existem várias maneiras de usar fontes divertidas e fora do ordens em seus designs fora das fontes seguras da Web (por exemplo,
Arial, Geórgia, Verdana). Meus dois métodos favoritos são a propriedade @font-face css e Cugee. Ambos os métodos são diferentes – @font-face Usa CSS enquanto Cufon usa JavaScript – mas eles permitem expandir suas opções de fonte como designer.
Você também pode até usar o serviço gratuito do Google Font API (que também usa @font-face) não apenas trazer os designs do seu site para o próximo nível, mas também aproveitar a poderosa infraestrutura do Google para servir seus arquivos de fonte. Vamos dar uma olhada em alguns sites com ótima tipografia alimentada por fontes da web.
Marie Catribs
Este design de site tem tipografia notável, incluindo o uso da fonte Steinem para algumas manchetes (renderizadas usando @font-face). Eles também usaram fontes bonitas como substituições de imagem de texto de fundo CSS, onde as fontes da Web não eram possíveis, adicionando mais estilo e personalidade ao design.
Web: // Contato
Este site usa @font-face Para exibir a fonte do Museo, que é utilizada por todas as manchetes.
A fonte é distinta o suficiente para se destacar, mas não tanto que está no topo “Olhe para mim, estou usando @font-face“.
BBQWAR
Cufon está alimentando as fontes neste site, incluindo manchetes e algumas frases de destaque. O uso de uma fonte especial no design do site oferece um pouco de algo extra. Este site é tão único em aparência e estilo – a fonte se encaixa bem – aumentando o tema rústico que eles têm.
Brinque com guloseimas CSS3
O CSS3 trouxe toneladas de novas opções para os designers da web para estilizar seus projetos sem esforço.
O CSS3 ainda não é suportado em todos os navegadores (principalmente o IE8 e abaixo), mas isso não significa que não podemos brincar com ele e criar designs que são progressivamente aprimorados. Vamos conferir alguns designs da Web de ponta que utilizam CSS3.
Antetipo
Existem alguns presentes do CSS3 em jogo neste web design. Eles implementaram alguns cantos e gradientes arredondados através do CSS.
Clique no site para conferir os elementos que eles trouxeram para elevar o design do site ao próximo nível.
New Adventures in Web Design Conference
Este site que atende a web designers aproveita alguns CSS3. Eles usaram o border-radius propriedade, bem como o box-shadow Propriedade para vários elementos para dar a eles uma aparência distinta. Confira também a ótima tipografia e o uso de transformações do Webkit CSS.
Eu amo poeira
As imagens na página inicial usam o opacity Propriedade CSS em :hover. É um pequeno efeito que acrescenta muita atenção aos detalhes.
Levando para o próximo nível
Como você pode ver pelas idéias que destaquei, você não precisa adicionar muito – apenas um pensamento extra e cuidar e prestar atenção ao artesanato de nosso trabalho, além de manter o crescimento com nosso crescimento como designer da web e ficar à frente da curva.
Tem mais dicas para levar web design para o próximo nível? Compartilhe -os nos comentários.
Conteúdo relacionado
FAQ sobre Levar seus Designs da Web para o Próximo Nível
1. Como posso incorporar pequenos detalhes no design da minha página web?
Para adicionar pequenos detalhes que fazem a diferença no design da sua página web, você pode considerar usar sombras sutis, gradientes fracos, ícones únicos e outros elementos que contribuam para a estética e usabilidade do site.
2. Qual é a importância de aprender jQuery para melhorar a funcionalidade do design da web?
Aprender jQuery pode ajudar a adicionar efeitos de animação e interatividade ao design da sua página web, tornando-a mais dinâmica e atraente para os usuários. Além disso, bibliotecas de JavaScript como jQuery facilitam a implementação de recursos avançados no seu design.
3. Como posso usar fontes exclusivas para melhorar a tipografia do meu design da web?
Para melhorar a tipografia do seu design da web, você pode explorar opções como a propriedade @font-face do CSS, o uso de serviços como o Google Font API ou a utilização de bibliotecas como Cufon para incorporar fontes exclusivas e diferenciadas no seu site.
4. Quais são algumas maneiras de brincar com as guloseimas do CSS3 no design da web?
O CSS3 oferece diversas opções para estilizar o design da sua página web, como cantos arredondados, gradientes, sombras e transformações. Experimente esses recursos para adicionar um toque moderno e sofisticado ao seu design.
5. Como posso levar meu design da web para o próximo nível?
Além de incorporar pequenos detalhes, aprender jQuery, usar fontes exclusivas e explorar o CSS3, levar seu design da web para o próximo nível requer prática, criatividade e atenção aos detalhes. Mantenha-se atualizado com as tendências do design e busque constantemente aprimorar suas habilidades para criar designs excepcionais.
