Metodologia para criação de sites • Processos Criativos
Uma das coisas que mais vejo no campo do Web Design, são perguntas como: Como faço para ter sucesso com meu site? Como coloco o meu site no topo do Google? O Design vem antes ou depois do código? Como estruturar meu projeto? Perguntas assim podem parecer bobas, mas elas correspondem a uma grande parte dos problemas enfrentados por inúmeros Designers e agências digitais do mundo inteiro.
Neste vídeo, ensinarei como podemos trabalhar melhor o workflow do nosso projeto, mostrando ferramentas valiosas e um passo a passo inteligente contendo a importância de casa fase, seguindo a ordem do modelo proposto e adaptado pelo Designer John Furness em meados de 2011, e que foi estruturado nas seguintes etapas: Briefing, Usabilidade e Pesquisa, Arquitetura de informação, fluxogramas e sitemaps, wireframes e prototipação, design, codificação, seo e otimização.
// ARQUIVOS E REFERÊNCIAS DO VÍDEO
1. BRIEFING - 01:08
2. USABILIDADE E PESQUISA - 01:40
UsabilityHub - https://usabilityhub.com/
Usabilla - https://usabilla.com/
Morae - https://www.techsmith.com/morae.html
Testaisso - http://www.testaisso.com.br/
Dribbble - https://dribbble.com/
Behance - https://www.behance.net/
MaterialUp - http://www.materialup.com/
Pintrest - https://br.pinterest.com/
3. ARQUITETURA DE INFORMAÇÃO, FLUXOGRAMAS E SITEMAPS - 06:50
Google Draw - https://docs.google.com/drawings/
Draw.io - https://www.draw.io/
Illustrator CC - http://www.adobe.com/br/products/illu...
Gliffy - https://www.gliffy.com/
Axure - http://www.axure.com/
4. WIREFRAMES E PROTOTIPAÇÃO - 09:25
Axure - http://www.axure.com/
QuirkTools - http://quirktools.com/wires/p0njrs/
Pixate - http://www.pixate.com/
Fireworks - http://www.adobe.com/br/products/fire...
Sketch V3 - https://designcode.io/sketch
Invision (Prototipação colaborativa) - http://www.invisionapp.com/
Adobe Experience Design (Preview) - http://www.adobe.com/jp/products/expe...
5. DESIGN (WEB-DESIGN) - 13:57
Photoshop - http://www.adobe.com/br/products/phot...
Fireworks - http://www.adobe.com/br/products/fire...
Illustrator CC - http://www.adobe.com/br/products/illu...
6. CODIFICAÇÃO - 16:11
SublimeText - https://www.sublimetext.com/
Dreamweaver - http://www.adobe.com/br/products/drea...
Visual Studio - https://code.visualstudio.com/
Brackets - http://brackets.io/
7. SEO & OTIMIZAÇÃO - 19:57
Google Webmaster - https://www.google.com/intl/pt-BR/web...
Google Analytics - https://www.google.com/intl/pt-BR/ana...
Good Adwords (Key Planner) - https://adwords.google.com.br/Keyword...
Bing Webmaster - http://www.bing.com/toolbox/webmaster
Woorank - https://www.woorank.com/pt
OpenLinkProfiler - http://openlinkprofiler.org/
Moz - https://moz.com/products/pro
8. INSIGHTS E MELHORAMENTO CONTÍNUO - 20:57
// +++ BONUS +++ - 23:59
Asana - https://app.asana.com/0/1023004816236...
Redepen - https://redpen.io/
GhostLab (Igual ao AdobeEdge) - https://www.vanamco.com/ghostlab/
// INSCREVA-SE NO CANAL
http://adf.ly/1XvuRS
// REDES SOCIAIS
1. Twitter: http://adf.ly/1XvuFL
2. Facebook: http://adf.ly/1XvuIl
3. Google+: http://adf.ly/1XvuLW