Question Everything .is/listening
Written by active / 28.05.2015

FLAG, o futuro nas tuas mãos!

Já descolou, e já está preparado para grandes voos, o novo site da FLAG. Ao encontrar-se já em terra firme o novo site da FLAG está preparado para responder e reforçar da melhor maneira as áreas criativa e tecnológica.

A FLAG é a escola de formação líder em Portugal e, como tal, era importante um avanço e atualização proporcionais ao próprio conhecimento transmitido aos seus formandos, tendo sempre em conta a área de atuação, o target e os canais de comunicação atuais.

FLAG

 

PLANEAMENTO

A diversidade de dispositivos, resoluções e densidades tornou a abordagem responsive essencial ao projeto, estando presente desde o brainstorming ao deploy final e gestão dos conteúdos.

A arquitetura do site foi um ponto muito importante. É por isso que dedicamos grande parte do tempo a esboçar e a iterar sobre múltiplas ideias e abordagens antes de nos colocarmos à frente do ecrã. O wireframing permite-nos abstrairmo-nos dos detalhes e entender a big picture entre múltiplas resoluções.

FLAG

O SITE

O foco na pesquisa, no utilizador e nas suas várias necessidades como o curso, localidade, duração e preço foram a base na organização.

Divididas por ofertas e localidade, são várias as secções que o website apresenta. Os Cursos em que qualquer formando pode inscrever-se e as Academias que se especializam numa área e pressupõem um processo de candidatura, por forma a aferir o perfil do candidato (curricular e motivacional).

Conta ainda com a secção de Webcasts realizados, o Calendário Cursos FLAG com datas para os próximos meses, as Empresas em que a FLAG coloca à disposição dos seus clientes uma variedade de metodologias de formação que se adaptam às várias realidades dos seus formandos e, por fim, a secção do Blog, onde tem acesso a notícias, novidades e promoções.

Secções Flag

DESIGN

O grande ponto de partida do design do site da FLAG foi o seu logótipo e as cores já estabelecidas e bastante familiares do seu público-alvo.

Foi a pensar no target da escola de formação que pegámos nas paletes de cores presentes no logótipo, bem como as anteriormente estabelecidas, e atribuímos uma a cada área de atuação. Esta distinção entre cursos permite diferenciar áreas e facilitar a experiência do utilizador enquanto procura o curso que mais lhe convém.

Os icons seguem uma linha gráfica simples e clara, sendo os dos cursos ilustrados com objetos chave de cada área.

Icons

USER EXPERIENCE

Enquanto líder, a FLAG é uma resposta às necessidades, capacidades e conhecimento de muitos formandos. Razão pela qual, neste projeto, demos bastante ênfase à necessidade e experiência do utilizador.

Definimos as personas, ou seja representámos os vários tipos de utilizador do site da FLAG, de acordo com as suas características, e chegámos às mais importantes para determinar o layout coerente e conciso.

O style guide possui regras de estilo e padronização que assentam no layout responsive, de modo a construir um website FLAG que se adapte ao dispositivo onde está a ser consultado, sendo ele um desktop, um laptop, um tablet ou um smartphone.

No fundo, tinhamos a entidade da marca e quisemos modernizar o site atual para um utilizador cada vez mais moderno, escalando já para um futuro.

Utilizando diferentes recursos técnicos e linguagens de programação (WordPress, HTML5, CSS3, através de Sass, CSS3 animation, JQuery e SVG), a FLAG foi concebida de forma a tornar-se um site bastante objetivo e descomplicado. Deseja conhecer mais alguns detalhes do projeto? Descubra-os nos projetos da Active Media disponíveis no Behance.