Overview
It is a CRM that has usability as its main feature, so it is imperative that the html and css are perfectly reproduced. Some subscreens are marked with a red square. Total of 17 main screens and 19 variations.
Technology
- Responsive
- css 3
- html 5
- javascript
forms
- on / off, checkbok, radio button stylized with css
- do not use select input. On filters and selections, use javascript, to show new content and screens as well as in the corrector image (07 - desk -
filtro-data.jpg)
- Use datapicker for date selection
About the project
- CSS avatars (with initials)
- Tablet follows is similar to mobile, showing only the same things
- Do not use images anywhere in the project, only SVG (Logo and icons)
- Lines at the background of the header please disregard eg: "01 - desk - home-pa"
- Filters on mobile always 100% width as (06 - desk - filtro-data)
- In some cases on mobile, the option appears to click on the down arrow to see more according to the file (admin 02 - mob - pedidos)
- Set Mouse Over, PlaceHolder, of Header Items as (nav)
- Set Menu Mouse Over (Linke in layout "Meus Dados, Meus Pedidos, Configurações" etc ...) Always with blue rounded corners as layout
- Set Mouse Over where there are gray icons to blue icons eg Whatsapp, phone, message icons
- The other links (Texts in blue with the exception of the header in the yellow part) receive underline as mouse over.
- Pay attention to the active state in the filter buttons
Screens in "
Final.zip"
- Login (00 - desk -
login.fw)
- home first access (01 - desk - home-pa)
- - - - home alerts (01 1 - desk - alertas)
- - - - home search (01 2 - desk - busca)
- - - - home menu (01 3 - desk - menu)
- home (02 - desk - home)
- Contacts - Make js and css the option to open and close a contact, as well as the 4th contact (05 - desk - contatos)
- - - - negative option (05 2 - desk - contatos)
- - - - data filter (06 - desk - filtro-data)
- - - - custom date filter (07 - desk - filtro-personalizado)
- - - - status filter (08 - desk - filtro-status)
- - - - other filters (09 - desk - filtro-outros)
- - - - mass action (10 - desk - acao-em-massa) desktop only
- add contact (03 - desk - adicionar-contato) desktop only
- internal contact (11 - desk - contatos-interna)
- - - - edit filter activities (12 - filtro)
- - - - edit basic data (13 - desk - editar-dados-basicos) desktop only
- - - - edit company data (14 - desk - dados-da-empresa) desktop only
- - - - edit location (15 - desk - localizacao) desktop only
- - - - edit social networks (16 - desk - redes-sociais) desktop only
- - - - edit source (17 - desk - origem) desktop only
- - - - edit task (18 - desk - editar-tarefa) desktop only
- - - - edit task data picker (19 - desk - editar-tarefa-data-picker) desktop only
- - - - edit comment (20 - desk - editar-comentario) desktop only
- - - - contact added (05 - desk - adicionar-contato) desktop only
- my data (21 - desk - meus-dados-com-gestor)
- my orders (22 - desk - meus-pedidos)
- settings (23 - desk - configuracao-sem-gestor) desktop only
- users (24 - desk - usuarios)
- internal user (25 - desk - usuario-interna)
- add user (desk - 19 - adicionar-usuarios) desktop only
- admin home (admin 01 - desk - home)
- orders (admin 02 - desk - pedidos)
- contacts queue (admin 03 - desk - fila-de-contatos)
- campaigns (admin 04 - desk - campanhas)
- settings (admin 05 - configuracoes) desktop only
------------------------------
visão geral
se trata de um crm que tem como principal característica a usabilidade, por esse motivo é imperativo que o html e css sejam perfeitamente reproduzidos. Algumas subtelas estão marcadas com um quadrado vermelho para ver onde é a modificação. Total de 17 telas principais e 19 variações.
Tecnologia
- Responsivo
- css 3
- html 5
- javascript
formulários
- on/off, checkbok, radio button estilizados com css
- não usar select, filtros e seleções, usar javascript, para mostrar novos conteúdos e telas bem como na imagem corretor (07 - desk -
filtro-data.jpg)
- Usar datapicker para seleção de data
Características
- Avatars (Com letras) em CSS
- Tablet segue ideia de visualização do mobile, mostrando apenas as mesmas coisas
- Não usar imagens em parte alguma do projeto, apenas SVG (Logo e ícones)
- linhas no fundo do cabeçalho favor desconsiderar ex.: "01 - desk - home-pa"
- Filtros no mobile sempre 100% largura conforme (06 - desk - filtro-data)
- Em alguns casos no mobile aparece a opção de clicar na seta para baixo para ver mais conforme arquivo ( admin 02 - mob - pedidos )
- Definir Mouse Over, PlaceHolder, dos Itens do cabeçalho conforme (nav)
- Definir Mouse Over do Menu (Meus Dados, Meus Pedidos, Configurações etc...) Sempre com cantos arredondados em azul conforme layout
- Definir Mouse Over onde estão apenas ícones do cinza para o azul ex.: Whatsapp, phone, message icons
- Os demais links (Textos em azul com exceção do cabeçalho na parte amarela) recebem underline como mouse over.
- Ficar atento para o estado de ativo nos botões de filtro
Telas
- Login (00 - desk -
login.fw)
- home primeiro acesso (01 - desk - home-pa)
- - - - home alertas (01 1 - desk - alertas)
- - - - home busca (01 2 - desk - busca)
- - - - home menu (01 3 - desk - menu)
- home (02 - desk - home)
- Contatos - Fazer com JS e CSS a opção de abrir e fechar um contato, bem como o 4º contato (05 - desk - contatos)
- - - - Opção Negativado (05 2 - desk - contatos)
- - - - Filtro Data (06 - desk - filtro-data)
- - - - Filtro Data Personalizado (07 - desk - filtro-personalizado)
- - - - Filtro Status (08 - desk - filtro-status)
- - - - Outros Filtros (09 - desk - filtro-outros )
- - - - Ação em Massa (10 - desk - acao-em-massa ) Somente Desktop
- Adicionar Contato (03 - desk - adicionar-contato) Somente Desktop
- Contato Interna ( 11 - desk - contatos-interna)
- - - - Editar Filtro Atividades (12 - filtro)
- - - - Editar Dados Básicos (13 - desk - editar-dados-basicos) Somente Desktop
- - - - Editar Dados da Empresa (14 - desk - dados-da-empresa) Somente Desktop
- - - - Editar Localização (15 - desk - localizacao) Somente Desktop
- - - - Editar Redes Sociais (16 - desk - redes-sociais) Somente Desktop
- - - - Editar Origem (17 - desk - origem) Somente Desktop
- - - - Editar Tarefa ( 18 - desk - editar-tarefa) Somente Desktop
- - - - Editar Tarefa Data Picker (19 - desk - editar-tarefa-data-picker) Somente Desktop
- - - - Editar Comentário (20 - desk - editar-comentario) Somente Desktop
- - - - Contato Adicionado (05 - desk - contato-adicionado) Somente Desktop
- Meus Dados (21 - desk - meus-dados-com-gestor)
- Meus Pedidos (22 - desk - meus-pedidos)
- Configurações (23 - desk - configuracao-sem-gestor) Somente Desktop
- Usuários (24 - desk - usuarios)
- Usuário Interna (25 - desk - usuario-interna)
- Adicionar Usuário (desk - 19 - adicionar-usuarios) Somente Desktop
- Admin Home (admin 01 - desk - home)
- Pedidos (admin 02 - desk - pedidos)
- Fila de Contatos (admin 03 - desk - fila-de-contatos)
- Campanhas (admin 04 - desk - campanha)
- Configurações (admin 05 - configuracoes)Somente Desktop
Delivery term: March 19, 2020