SlideShare uma empresa Scribd logo
1 de 63
Baixar para ler offline
Hyojun Guideline
Marcelo Miranda Carneiro
04/04/2014
F.biz|COMPANYCONFIDENTIAL
O que é?
• Metodologia de trabalho
• Site com todos os módulos e páginas mock-up do projeto
• Documento com explicações de funcionamento ou
construção, variações e estados dos módulos
• O “ambiente de trabalho do front-end”
01F.biz|COMPANYCONFIDENTIAL
Por que usar?
• Incentiva análise mais detalhada do projeto
• Melhora qualidade, flexibilidade e manutenção do código
• Cria legado, pois ajuda designers e desenvolvedores em
novas implementações
• Testes dos módulos são mais fáceis
• Páginas mock-up ajudam a trabalhar com variações em
páginas dinâmicas
02F.biz|COMPANYCONFIDENTIAL
Conceitos principais
• Construção modular ou o bom e velho “Atomic design”
• Comportamento visual do módulo por escopo
• Módulos primeiro, páginas por último / o trabalho começa
pela guideline
• “Menos é mais” — descrição apenas do que é necessário
• Testes ocorrem na guideline
03F.biz|COMPANYCONFIDENTIAL
Atomic design
F.biz|COMPANYCONFIDENTIAL
Atomic design
Objetivos principais no desenvolvimento modular:
• Análise dos elementos e do projeto como um todo
• Abstração
• Flexibilidade
• Melhor manutenção e qualidade do código
04F.biz|COMPANYCONFIDENTIAL
Atomic design
Tudo é módulo, alguns com nível mais baixo ou alto.
Roubando a explicação do Brad Frost sobre Atomic
Design, metáfora organizada em:
• átomos - nível mais baixo do módulo, maior abstração
• moléculas - nível intermediário, pequenos módulos
• organismos - agrupamento ou “componentes” standalone
• templates - layouts ou “páginas”
05F.biz|COMPANYCONFIDENTIAL
Atomic design
Exemplos de cada “nível”:
• átomo - título, texto, botão, link
• molécula - input + label + botão, paginação, breadcrumb
• organismo - header, footer, galeria de foto
• template - estrutura de diagramação
06F.biz|COMPANYCONFIDENTIAL
Hyojun Guideline
Hyojun Guideline
Hyojun Guideline
Layouts
F.biz|COMPANYCONFIDENTIAL
Layouts
• Layouts ou templates contém as regras de diagramação
de uma página do projeto
• Espaços definidos no template podem ser consideradas
como “escopos” para comportamento visual de um
módulo, ex.: width, margin, float, position, etc.
• No final, módulos são apenas “inseridos” nestes espaços
• Normalmente temos um template por área do projeto
07F.biz|COMPANYCONFIDENTIAL
Hyojun Guideline
Hyojun Guideline
Análise
F.biz|COMPANYCONFIDENTIAL
Análise
Análise de exemplo com a home de netshoes.com.br:
• Identificação da grid
• Identificação dos módulos
• Definição de cores
• Definição de unidades e espaçamentos
08F.biz|COMPANYCONFIDENTIAL
Grids
F.biz|COMPANYCONFIDENTIAL
Hyojun Guideline
Hyojun Guideline
Hyojun Guideline
Hyojun Guideline
Hyojun Guideline
Módulos
F.biz|COMPANYCONFIDENTIAL
Hyojun Guideline
Hyojun Guideline
Hyojun Guideline
Hyojun Guideline
Cores
F.biz|COMPANYCONFIDENTIAL
Hyojun Guideline
Hyojun Guideline
Hyojun Guideline
Unidades
F.biz|COMPANYCONFIDENTIAL
Hyojun Guideline
Hyojun Guideline
Hyojun Guideline
Hyojun Guideline
Como usar
F.biz|COMPANYCONFIDENTIAL
Configuração inicial
• Faça download do Hyojun.bootstrap em:
bitbucket.org/fbiz/hyojun.bootstrap
• Utilize o bower para baixar o Hyojun.Guideline:
bowerinstall
• Caso ache necessário, configure as cores base e as grids
de acordo com o seu projeto
09F.biz|COMPANYCONFIDENTIAL
Configuração inicial
Para sobrepor a grid padrão da guideline, customize em
source/common/core/config/_grids.scss:
$gl-do-override-grids:true;
@mixingl-override-grids(){
@includegs-clear-grid-list();
@includegs-register-grid(gl-wide,960px,10,10px,auto);
@includegs-register-grid(gl-normal,960px,10,10px,auto);
@includegs-register-grid(gl-mobile,100%,4,10px,959px);
}
01.
02.
03.
04.
05.
06.
07.
10F.biz|COMPANYCONFIDENTIAL
Configuração inicial
Para sobrepor as cores da guideline, customize em
source/common/core/config/_colors.scss:
$gl-do-override-theme-colors:true;
@mixingl-override-theme-colors{
$gl-theme-main-color:#808078;
$gl-theme-neutral-color:#333;
$gl-theme-highlight-color:#3A87AD;
$gl-theme-code-color:#C7254E;
}
01.
02.
03.
04.
05.
06.
07.
11F.biz|COMPANYCONFIDENTIAL
Elementos da guideline
• O CSS da guideline é standalone para evitar que
influencie os estilos do projeto
• Todos os elementos que fazem parte do Hyojun.Guideline
recebem classes
• Na maioria dos casos, apenas a classe glé
necessária. Alguns casos específicos levam gl-e
um prefixo, como gl-header, gl-legend, etc.
12F.biz|COMPANYCONFIDENTIAL
Elementos mais usados
• Texto: h2.gl-header e h3.gl, p.gl
• Holder para módulos: div.gl-example, div.gl-example-full
• Código fonte: pre.gl>code
• Notas no código: .gl-note-1, .gl-note-2 …
• Listas: ul.gl, ol.gl
• Mensagem importante: div.gl-callout
13F.biz|COMPANYCONFIDENTIAL
Organização
Existem algumas áreas com elementos pré-definidos na
guideline:
• Tipografia - com famílias, tamanhos e pesos
• Cores - com a listagem de cores
• Grids - com a listagem de grids
• Forms - com elementos de formulário
• Módulos - com espaçamentos, z-index
14F.biz|COMPANYCONFIDENTIAL
Tipografia
Os elementos padrões da página de tipografia utilizam
HTML Helpers para serem escritos mais facilmente:
• Família tipográfica com todos os glyphs utilizados
• Lista de ícones
• Lista de tamanhos de fontes
• Lista de pesos (normalização dos valores)
15F.biz|COMPANYCONFIDENTIAL
Hyojun Guideline
Hyojun Guideline
Hyojun Guideline
Cores
• A página lê todas as cores listadas no arquivo
source/common/core/config/_colors.scsse lista em
forma de paleta
• Para evitar duplicadas ou valores desnecessários, existe
uma ferramenta para comparar as cores
• Para criar uma cor nova, utilize a mesma ferramenta
• Todas as cores são criadas com valores relativos
16F.biz|COMPANYCONFIDENTIAL
Hyojun Guideline
Hyojun Guideline
Grids e Forms
• Todas as grids listadas nesta página são inseridas
utilizando HTML Helper
• Como a maioria dos projetos podem ter formulários, já
existe uma página feita com texto explicativo e os
elementos montados, sendo necessário apenas estilizar
• A página de forms pode ser apagada, alterada ou
complementada, existe apenas como uma referência
17F.biz|COMPANYCONFIDENTIAL
Hyojun Guideline
Hyojun Guideline
Hyojun Guideline
Módulos
• Lista de espaçamentos
• Lista de z-index
• Todos os módulos globais do projeto
• Módulos específicos podem ser categorizados e
separados em outras páginas
18F.biz|COMPANYCONFIDENTIAL
Hyojun Guideline
Hyojun Guideline
Como colaborar?
F.biz|COMPANYCONFIDENTIAL
Como colaborar?
• O projeto Hyojun.guideline está hospedado em:
bitbucket.org/fbiz/hyojun.guideline
• A página de exemplo está em:
fbiz.bitbucket.org/hyojun.guideline
19F.biz|COMPANYCONFIDENTIAL
Como colaborar?
Formas de ajudar com o projeto:
• Identifique e sinalize problemas
• Abra issues com bugs, idéias de melhorias, etc.
• Leia, revise e ajude com a documentação
• Dê um watch no Bitbucket e discuta sobre os novos
recursos, funcionalidades, organização, layout, etc.
20F.biz|COMPANYCONFIDENTIAL
Como colaborar?
• Faça um fork, crie um branch e envie um pull request
deste branch
• Envie referências
• Participe!
21F.biz|COMPANYCONFIDENTIAL
A WPP Company
/ thank you

Mais conteúdo relacionado

Semelhante a Hyojun Guideline

Web components para o seu design system
Web components para o seu design systemWeb components para o seu design system
Web components para o seu design systemNicole Oliveira
 
Revit 2013 pt_introdução_ao_revit _interface_do_usuário
Revit 2013 pt_introdução_ao_revit _interface_do_usuárioRevit 2013 pt_introdução_ao_revit _interface_do_usuário
Revit 2013 pt_introdução_ao_revit _interface_do_usuárioRicardo Brito Júnior
 
Práticas de Desenvolvimento de Software
Práticas de Desenvolvimento de SoftwarePráticas de Desenvolvimento de Software
Práticas de Desenvolvimento de SoftwareTiago Barros
 
Aula 06 projetos multimídia
Aula 06   projetos multimídiaAula 06   projetos multimídia
Aula 06 projetos multimídiaFábio Costa
 
Aula 06 projetos multimídia
Aula 06   projetos multimídiaAula 06   projetos multimídia
Aula 06 projetos multimídiaFábio Costa
 
Como escolher o tema ideal para o seu projeto
Como escolher o tema ideal para o seu projetoComo escolher o tema ideal para o seu projeto
Como escolher o tema ideal para o seu projetoMarcos Alexandre
 
Criando temas em PSD pensando no Front-end e Back-end
Criando temas em PSD pensando no Front-end e Back-endCriando temas em PSD pensando no Front-end e Back-end
Criando temas em PSD pensando no Front-end e Back-end@cristianoweb
 
eSeminars - Plan & Profile Generator
eSeminars - Plan & Profile Generator eSeminars - Plan & Profile Generator
eSeminars - Plan & Profile Generator Carlos Galeano
 
Criação de sites Joomla com CCKs e frameworks de template - Joomla Day Ribeir...
Criação de sites Joomla com CCKs e frameworks de template - Joomla Day Ribeir...Criação de sites Joomla com CCKs e frameworks de template - Joomla Day Ribeir...
Criação de sites Joomla com CCKs e frameworks de template - Joomla Day Ribeir...jCursos
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designerRoney Sousa
 
Desenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) DrupalDesenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) DrupalEmerson Barros
 
Revit architecture 2012_pt_guia_do_iniciante
Revit architecture 2012_pt_guia_do_inicianteRevit architecture 2012_pt_guia_do_iniciante
Revit architecture 2012_pt_guia_do_inicianteVivaldo Chagas
 
20 temas wordpress para blog's
20 temas wordpress para blog's20 temas wordpress para blog's
20 temas wordpress para blog'sIrineu Migotto
 
Programa curso broffice
Programa curso brofficePrograma curso broffice
Programa curso broffice3jinformatica
 
Componentizando a Web com Polymer
Componentizando a Web com PolymerComponentizando a Web com Polymer
Componentizando a Web com PolymerStefan Horochovec
 
Guia do usuã¡rio makemoney
Guia do usuã¡rio makemoneyGuia do usuã¡rio makemoney
Guia do usuã¡rio makemoneyCleverson Leite
 
WordPress para Gestores de Conteúdo - WordCamp BH 2015
WordPress para Gestores de Conteúdo - WordCamp BH 2015WordPress para Gestores de Conteúdo - WordCamp BH 2015
WordPress para Gestores de Conteúdo - WordCamp BH 2015Nauweb
 

Semelhante a Hyojun Guideline (20)

Web components para o seu design system
Web components para o seu design systemWeb components para o seu design system
Web components para o seu design system
 
Aplicativo aula03
Aplicativo aula03Aplicativo aula03
Aplicativo aula03
 
Revit 2013 pt_introdução_ao_revit _interface_do_usuário
Revit 2013 pt_introdução_ao_revit _interface_do_usuárioRevit 2013 pt_introdução_ao_revit _interface_do_usuário
Revit 2013 pt_introdução_ao_revit _interface_do_usuário
 
Práticas de Desenvolvimento de Software
Práticas de Desenvolvimento de SoftwarePráticas de Desenvolvimento de Software
Práticas de Desenvolvimento de Software
 
Aula 06 projetos multimídia
Aula 06   projetos multimídiaAula 06   projetos multimídia
Aula 06 projetos multimídia
 
Aula 06 projetos multimídia
Aula 06   projetos multimídiaAula 06   projetos multimídia
Aula 06 projetos multimídia
 
Como escolher o tema ideal para o seu projeto
Como escolher o tema ideal para o seu projetoComo escolher o tema ideal para o seu projeto
Como escolher o tema ideal para o seu projeto
 
Criando temas em PSD pensando no Front-end e Back-end
Criando temas em PSD pensando no Front-end e Back-endCriando temas em PSD pensando no Front-end e Back-end
Criando temas em PSD pensando no Front-end e Back-end
 
Solid works 2007
Solid works 2007Solid works 2007
Solid works 2007
 
eSeminars - Plan & Profile Generator
eSeminars - Plan & Profile Generator eSeminars - Plan & Profile Generator
eSeminars - Plan & Profile Generator
 
Criação de sites Joomla com CCKs e frameworks de template - Joomla Day Ribeir...
Criação de sites Joomla com CCKs e frameworks de template - Joomla Day Ribeir...Criação de sites Joomla com CCKs e frameworks de template - Joomla Day Ribeir...
Criação de sites Joomla com CCKs e frameworks de template - Joomla Day Ribeir...
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
 
Desenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) DrupalDesenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) Drupal
 
Revit architecture 2012_pt_guia_do_iniciante
Revit architecture 2012_pt_guia_do_inicianteRevit architecture 2012_pt_guia_do_iniciante
Revit architecture 2012_pt_guia_do_iniciante
 
20 temas wordpress para blog's
20 temas wordpress para blog's20 temas wordpress para blog's
20 temas wordpress para blog's
 
Programa curso broffice
Programa curso brofficePrograma curso broffice
Programa curso broffice
 
Componentizando a Web com Polymer
Componentizando a Web com PolymerComponentizando a Web com Polymer
Componentizando a Web com Polymer
 
Guia do usuã¡rio makemoney
Guia do usuã¡rio makemoneyGuia do usuã¡rio makemoney
Guia do usuã¡rio makemoney
 
WordPress para Gestores de Conteúdo - WordCamp BH 2015
WordPress para Gestores de Conteúdo - WordCamp BH 2015WordPress para Gestores de Conteúdo - WordCamp BH 2015
WordPress para Gestores de Conteúdo - WordCamp BH 2015
 
Escalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLIDEscalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLID
 

Hyojun Guideline

  • 1. Hyojun Guideline Marcelo Miranda Carneiro 04/04/2014 F.biz|COMPANYCONFIDENTIAL
  • 2. O que é? • Metodologia de trabalho • Site com todos os módulos e páginas mock-up do projeto • Documento com explicações de funcionamento ou construção, variações e estados dos módulos • O “ambiente de trabalho do front-end” 01F.biz|COMPANYCONFIDENTIAL
  • 3. Por que usar? • Incentiva análise mais detalhada do projeto • Melhora qualidade, flexibilidade e manutenção do código • Cria legado, pois ajuda designers e desenvolvedores em novas implementações • Testes dos módulos são mais fáceis • Páginas mock-up ajudam a trabalhar com variações em páginas dinâmicas 02F.biz|COMPANYCONFIDENTIAL
  • 4. Conceitos principais • Construção modular ou o bom e velho “Atomic design” • Comportamento visual do módulo por escopo • Módulos primeiro, páginas por último / o trabalho começa pela guideline • “Menos é mais” — descrição apenas do que é necessário • Testes ocorrem na guideline 03F.biz|COMPANYCONFIDENTIAL
  • 6. Atomic design Objetivos principais no desenvolvimento modular: • Análise dos elementos e do projeto como um todo • Abstração • Flexibilidade • Melhor manutenção e qualidade do código 04F.biz|COMPANYCONFIDENTIAL
  • 7. Atomic design Tudo é módulo, alguns com nível mais baixo ou alto. Roubando a explicação do Brad Frost sobre Atomic Design, metáfora organizada em: • átomos - nível mais baixo do módulo, maior abstração • moléculas - nível intermediário, pequenos módulos • organismos - agrupamento ou “componentes” standalone • templates - layouts ou “páginas” 05F.biz|COMPANYCONFIDENTIAL
  • 8. Atomic design Exemplos de cada “nível”: • átomo - título, texto, botão, link • molécula - input + label + botão, paginação, breadcrumb • organismo - header, footer, galeria de foto • template - estrutura de diagramação 06F.biz|COMPANYCONFIDENTIAL
  • 13. Layouts • Layouts ou templates contém as regras de diagramação de uma página do projeto • Espaços definidos no template podem ser consideradas como “escopos” para comportamento visual de um módulo, ex.: width, margin, float, position, etc. • No final, módulos são apenas “inseridos” nestes espaços • Normalmente temos um template por área do projeto 07F.biz|COMPANYCONFIDENTIAL
  • 17. Análise Análise de exemplo com a home de netshoes.com.br: • Identificação da grid • Identificação dos módulos • Definição de cores • Definição de unidades e espaçamentos 08F.biz|COMPANYCONFIDENTIAL
  • 39. Configuração inicial • Faça download do Hyojun.bootstrap em: bitbucket.org/fbiz/hyojun.bootstrap • Utilize o bower para baixar o Hyojun.Guideline: bowerinstall • Caso ache necessário, configure as cores base e as grids de acordo com o seu projeto 09F.biz|COMPANYCONFIDENTIAL
  • 40. Configuração inicial Para sobrepor a grid padrão da guideline, customize em source/common/core/config/_grids.scss: $gl-do-override-grids:true; @mixingl-override-grids(){ @includegs-clear-grid-list(); @includegs-register-grid(gl-wide,960px,10,10px,auto); @includegs-register-grid(gl-normal,960px,10,10px,auto); @includegs-register-grid(gl-mobile,100%,4,10px,959px); } 01. 02. 03. 04. 05. 06. 07. 10F.biz|COMPANYCONFIDENTIAL
  • 41. Configuração inicial Para sobrepor as cores da guideline, customize em source/common/core/config/_colors.scss: $gl-do-override-theme-colors:true; @mixingl-override-theme-colors{ $gl-theme-main-color:#808078; $gl-theme-neutral-color:#333; $gl-theme-highlight-color:#3A87AD; $gl-theme-code-color:#C7254E; } 01. 02. 03. 04. 05. 06. 07. 11F.biz|COMPANYCONFIDENTIAL
  • 42. Elementos da guideline • O CSS da guideline é standalone para evitar que influencie os estilos do projeto • Todos os elementos que fazem parte do Hyojun.Guideline recebem classes • Na maioria dos casos, apenas a classe glé necessária. Alguns casos específicos levam gl-e um prefixo, como gl-header, gl-legend, etc. 12F.biz|COMPANYCONFIDENTIAL
  • 43. Elementos mais usados • Texto: h2.gl-header e h3.gl, p.gl • Holder para módulos: div.gl-example, div.gl-example-full • Código fonte: pre.gl>code • Notas no código: .gl-note-1, .gl-note-2 … • Listas: ul.gl, ol.gl • Mensagem importante: div.gl-callout 13F.biz|COMPANYCONFIDENTIAL
  • 44. Organização Existem algumas áreas com elementos pré-definidos na guideline: • Tipografia - com famílias, tamanhos e pesos • Cores - com a listagem de cores • Grids - com a listagem de grids • Forms - com elementos de formulário • Módulos - com espaçamentos, z-index 14F.biz|COMPANYCONFIDENTIAL
  • 45. Tipografia Os elementos padrões da página de tipografia utilizam HTML Helpers para serem escritos mais facilmente: • Família tipográfica com todos os glyphs utilizados • Lista de ícones • Lista de tamanhos de fontes • Lista de pesos (normalização dos valores) 15F.biz|COMPANYCONFIDENTIAL
  • 49. Cores • A página lê todas as cores listadas no arquivo source/common/core/config/_colors.scsse lista em forma de paleta • Para evitar duplicadas ou valores desnecessários, existe uma ferramenta para comparar as cores • Para criar uma cor nova, utilize a mesma ferramenta • Todas as cores são criadas com valores relativos 16F.biz|COMPANYCONFIDENTIAL
  • 52. Grids e Forms • Todas as grids listadas nesta página são inseridas utilizando HTML Helper • Como a maioria dos projetos podem ter formulários, já existe uma página feita com texto explicativo e os elementos montados, sendo necessário apenas estilizar • A página de forms pode ser apagada, alterada ou complementada, existe apenas como uma referência 17F.biz|COMPANYCONFIDENTIAL
  • 56. Módulos • Lista de espaçamentos • Lista de z-index • Todos os módulos globais do projeto • Módulos específicos podem ser categorizados e separados em outras páginas 18F.biz|COMPANYCONFIDENTIAL
  • 60. Como colaborar? • O projeto Hyojun.guideline está hospedado em: bitbucket.org/fbiz/hyojun.guideline • A página de exemplo está em: fbiz.bitbucket.org/hyojun.guideline 19F.biz|COMPANYCONFIDENTIAL
  • 61. Como colaborar? Formas de ajudar com o projeto: • Identifique e sinalize problemas • Abra issues com bugs, idéias de melhorias, etc. • Leia, revise e ajude com a documentação • Dê um watch no Bitbucket e discuta sobre os novos recursos, funcionalidades, organização, layout, etc. 20F.biz|COMPANYCONFIDENTIAL
  • 62. Como colaborar? • Faça um fork, crie um branch e envie um pull request deste branch • Envie referências • Participe! 21F.biz|COMPANYCONFIDENTIAL
  • 63. A WPP Company / thank you