POPKISS – cultura

A cultura POPular é universalmente reconhecida como uma presença contínua, constante em todas as sociedades e, transversal a qualquer género, idade ou crença político-religiosa. O POPular é a assunção universal dos nossos hábitos passados ou hábitos adquiridos.

A linguagem, a força tipográfica e o entendimento universal desde a vibração do discurso visual, do instantâneo, do que é simples, do genérico são elementos demonstrativos de como a POPKISS se apodera da cultura POP.

Sérgio Miguel Magalhães, autor polímata studium
Catarina Rodrigues, diretora criativa studium

POPKISS – menu mobile

A POPKISS tem a ousadia de apresentar o menu mobile em ambiente integral, de fundo preto. A par dessa opção que permite um maior foco do utilizador, o menu da loja online apresenta alto contraste com as cores sazonais da marca – amarelo, fuschia e branco. Esta relação cromática afirma a importância da navegação feita através do menu, pela afirmação de cada um dos componentes – a tipografia, identidade, elementos de apoio e ainda emojis.

Sérgio Miguel Magalhães, autor polímata studium
Catarina Rodrigues, diretora criativa studium

Série Purpose . Web Design . 2º Post

homepage (palavra inglesa, de home, casa + page, página) – geralmente é a primeira página de qualquer website apresentado aos utilizadores. É composta por 01 ou mais secções e tem como objetivo apresentar a temática do site. É uma das páginas mais importantes senão, mesmo a mais importante ao criar o primeiro impacto com o público, influenciando diretamente a opção de continuar ou não no site. É por isso vital que esta página seja alvo de atualizações e melhorias pontuais para responder de forma positiva ao seu público e objetivos.

Banner – Primeiro elemento visível ao aceder ao site studium. Tem o objetivo de transmitir o conceito de chave do estúdio.

Footer – Elemento essencial em qualquer website, regra geral está localizado como rodapé. A informação disponível nessa secção é geralmente : contactos, informações complementares, links úteis, políticas e condições do site. Deve ser uma secção de fácil acesso.

O objetivo é redesenhar os elementos acima descritos, inspirado na trend 2019/2020 . stupopium, reorganizar a informação, adicionar elementos/ações e apresentar elementos resultantes da exploração de novas abordagens e projetos comerciais.

Através da aplicação do nosso sistema metodológico é analisada a estrutura existente e pesquisada inspirações gráficas e boas práticas. A delimitação do toolkit através do desenho dos conteúdos para o banner, enquanto o departamento de web design consolida o desenvolvimento de wireframes a integração de elementos gráficos na homepage.

A intenção é proliferar e amplificar a trend stupopium através dos nosso canais de comunicação, sem abdicar dos fundamentos de acessibilidade e performance que aplicamos em todos os nosso projetos.

Wireframe do banner e footer site studium— Projeto Purpose WEB

Brian Oliveira . web designer

Série Purpose . Web Design . 1º Post

Purpose /ˈpəːpəs/ noun – why you do something or why something exists

Projeto dedicado ao aumento da exigência pessoal e profissional de cada área de intervenção do studium. Momento baseado na experimentação e investigação de abordagens profissionais. A posição disruptiva com o dia-a-dia profissional, aumentando o potencial crítico, convergindo num argumento final. São experiências aplicadas desde as ferramentas internas de trabalho do estúdio, através de ações imediatas e ações a longo prazo. O purpose tem o objetivo de testar e validar novos métodos e abordagens, um contributo nos projetos desenvolvidos e na cultura interna do estúdio.

notas de intenções — Projeto Purpose WEB — Brian Oliveira, web designer studium

 

Brian Oliveira . designer web

workflow sketch + zeplin


As an assertive blend of rigorous vision, passion and oddity, we studium use a transversal method, supported by the best tools.
The UX/UI creative team starts with the context of the project, then its conceptualisation and finally, ends up with its materialisation. This is the base for ever single project.

We use 02 tools as starting points to build our component library: SKETCH and ZEPLIN.
These tools are vital to allow the contribution from every team member, as well as a optimisation of our work.
Tools like SKETCH and ZEPLIN are part of daily basis and helps us explain web design in a very efficient and quick way, with maximum detail.

01. flowchart
We structure the work on a functional level saving time with the use of a flowchart that processes all the information.
The perception of layout differentiation and navigation between pages is easy with our flowchart.

02. wireframes
Wireframing works as a tool, with the specific goal of improvement the user experience: design structure and compromising design decisions along with the client.

After establishing some initial UI requirements, we begin handmade  wireframing some key pages. Then we make them digital.

03. interface design
Layouts are consistent and concise.
We design layouts based on a style guide and we create a well-structured SKETCH system of components. Once completed, we migrate the toolkit to ZEPLIN.

04. high fidelity prototype
Simple and interactive prototypes.

ZEPLIN is a great tool for us, the creative studio. It’s high fidelity guarantees refined results in our projects.
The communication between designers and developers becomes agile and effective and the margin of error of the migration between layouts and development is highly reduced.

So, live long SKETCH  and ZEPLIN.

fábrica de cervejas portuense @ sá da bandeira

O projeto #Fábrica de Cervejas Portuense pensado, desenhado, projetado, criado pelo #studium constrói-se e cresce a cada dia que passa. Já falta pouco para beber uma cerveja #nortada num espaço sem igual.
Muito em breve no coração do #Porto!


Rua do Ateneu Comercial do Porto


Direção ao norte


O novo telhado


Áreas exteriores


Vestígios do passado


Plataforma de carga


A afinar o puzzle


Temáticas e branding


Força de braços


Tesoura hidraúlica


Vistas da cidade


Reutilizar


Reaproveitar


Reabilitar


Escala e geometrias


Camadas de planos


Os vizinhos


As entranhas da máquina

#O autor.