UAIREFRAME

A Uaireframe é uma start-up em construção focada na criação e desenvolvimento de websites e aplicativos mobile. A empresa tem como princípio criar projetos pautados na metodologia de projeto e processos de design thinking no intuito de alcançar resultados satisfatórios que, não só atenda as necessidades dos clientes, mas também seja um referencial para presentes ou futuros desenvolvedores.

Uaireframe is a start-up under construction focused on the creation and development of websites and mobile apps. The company has the principle of creating projects based on the design methodology and design thinking processes in order to achieve satisfactory results that, not only meets the needs of the clients, but being also a reference for present or future developers.



CONCEPT

Um wireframe de site web ou website wireframe é um protótipo usado em design de interface para sugerir a estrutura de um site web. Um wireframe é uma representação visual semelhante à um layout com elementos fundamentais da própria interface. Os elementos visuais comuns presentes em um wireframe foi utilizado de referência visual para a criação do logotipo e dos demais elementos de composição visual.

A wireframe or website wireframe is a prototype used in interface design to suggest the structure of a website. A wireframe is a visual representation similar to a layout with fundamental elements of the interface itself. The common visual elements present in a wireframe was used as a visual reference for the creation of the logo and the other visual elements of composition.​​​​​​​​​​​​​​

O símbolo do logotipo incorpora grafismos icônicos normalmente presentes em wireframes. O quadrado com o "X" ao centro representa as caixas de imagem e as linhas as caixas de texto.

The logo's symbol incorporate iconic graphisms normally presents in wireframes. The square with an "X" in the center represents the image box and the lings the text boxes.

GRID / SYMBOL

O símbolo ou ícone do logotipo foi feito utilizando a técnica de pixel perfect, ideal para uma visualização mais nítida em telas. Foi utilizado um grid de 88 pixels de largura e 120 pixels de altura com uma margem de 1 pixel em torno do próprio ícone.

The logo symbol or icon was made using the pixel perfect technique, ideal for a clearer visualization on screens. A grid of 88 pixels wide and 120 pixels high was used, with a margin of 1 pixel around the icon itself. ​​​​​​​​​​​​​​



LOGOTYPE

O logotipo foi construído utilizando a face tipográfica Geom Graphic como referência visual. A tipografia foi desenvolvida do zero visando manter os aspéctos principais morfológicos da tipografia de base. O arquétipo linear wide da ao logotipo uma característica que remete ao tecnológico e à criação como visávamos alcançar.

The logo was built using the Geom Graphic typeface as a visual reference. The typography was developed from scratch in order to maintain the main morphological aspects of the based typography. The wide linear archetype gives the logo a characteristic that refers to technology and creation as we aimed to achieve.



SUPPORT TYPEFACE

Para os títulos a tipografia escolhida foi a Termina Bold. A característica achatada que se relaciona com o logotipo e o aspecto humanista das minúsculas foram pontos positivos que influenciaram na escolha da família para os títulos. A classica Roboto foi escolhida para preencher os campos de texto, uma tipografia excelente para a visualização em displays/screens muito utilizada pela google.

For the titles, the typography chosen was Termina Bold. The flattened characteristic that relates to the logo and the humanistic aspect of the lowercase letters were a positive points that influenced the choice of family for the titles. The classic Roboto was chosen to fill in the text fields, an excellent typography for visualization on displays widely used by google.



COLORS

As cores do projeto foram escolhidas tendo como referência os primeiros computadores pessoais cuja interface era inexistente e o acesso se dava através de um fundo escuro e linhas de códigos verdes ou brancas. O azul e o verde são cores análogas e o contraste luminoso entre elas caiu bem neste projeto.

The project colors were chosen with reference to the first personal computers when the interface was non-existent and the access was given through a dark background and lines of green or white codes. Blue and green are similar colors and the luminous contrast between them fell well in this project.



PATTERN / VISUAL ELEMENTS

Inspirados nos antigos ícones do Macintosh, foram desenvolvidos ícones especiais para compor os elementos de repetição da marca. Todos os ícones, assim como o símbolo do logotipo, foram feitos em pixel perfect o que dá uma melhor nitidez na visualização em telas digitais.

Inspired by the old Macintosh icons, special icons were developed to compose the brand's pattern elements. All the icons, as well as the logo symbol, were made in pixel perfect which gives a better clarity when viewing on digital screens.​​​​​​​
A P P L I C A T I O N S

T H A N K   Y O U
@paulomartinsdesign

You may also like

Back to Top