https://hackdesign.org/ (curso gratuito)
ALISTAPART.COM Key Opinion Leader
Google Design
- visible narratives - percepcionamos as coisas pelo todo (o elemento pior define o todo)
- dois elementos próximos são identificados como um grupo
- principios básicos de um site
ATOMIC DESIGN (http://patternlab.io/)
dribbble (twiter para designers)
- UI Kits
- frameworks (http://getbootstrap.com/, fondation)
AWWWARDS
- sites premiados
Fonts
- google fonts
- typekit adobe (30$/ano)
- adobe edge fonts (gratuita)
Fotos gratuitas
icons
- iconic
- entypo (gratis)
prototipos
-wireframe (wirify.com)
- mockups (http://bohemiancoding.com/
Passos
- analise da concorrencia
- prototipo
- integração do frontend
- publicação e teste
tudo o que está no <head> não é apresentado ao utilizador, inclui o <title> </title> + <meta description>
viewport - escala da página
CSS reference (css dinamicos por pre-processador LESS SASS)
<body>
<header>
<nav>
<ul> - lista não ordenada
<li><a href='#teste'>item 1</a></li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</nav>
</header>
<div> elemento de bloco, elementos ID identificadores que só podem ser usados uma vez numa página / os CLASS podem ser usado mais vezes
<Main>
<section id='teste'>
<article>
<header>
<h3> Este é o header do artigo</h3>
</header>
</article>
<aside>
Isto está relacionado com o artigo
</aside>
Secção 1</section>
<section> Secção 1</section>
<section> Secção 1</section>
<section> Secção 1</section>
<Footer>
hyperlink para um Div "#Footer"
<nav> NAVEGAÇÃO
<spam> elemento inline
<a> ancoras
</body>
HTML5 elements list MDN
Editor HTML
- atom gratuito
- sublime text semigratuito
- coda2 for mac - pago
- brackets gratuito
normalize.css - estilo base para tudo o que não for definido pelo meu CSS para garantir que abre igual em todos os browsers
