About the school

This is one of the most pleasant projects because it involves the place that is part of my design career.

Oops! it is one of the main design schools in Fortaleza and since 2007 it has sought to "supply the market's need, with an approach focused on the realization of graphic products based on theoretical foundations, applying, in practice, the concepts learned in the classroom".


Opa! design school

Layout

It was not difficult to start a design school project. The elements of the school's brand were already well defined and all the stationery material served as a source of inspiration for the page.

Speaking of source, Avenir is a fundamental part that even guided the creation of icons for the website. The typographic family, which, although not purely geometric, has little contrast and greatly favored the construction of a minimalist design.

The main page, and the first to be explored, was the courses page. Dirceu Ximenes and Alberto Gadanha, owners of the school, defined some requirements and told a little more about what were the expectations for the page. Some of these points were:

  • In general, the courses have a dense menu and therefore the sections need to facilitate access to the content;
  • There may be 1 or more classes per course;
  • Information on start, time, price and payment methods are related to the class.

Start of the courses page with information from the Graphic Design course

1: Start of the courses page

As the vacancies in the courses are limited, I decided to place a vacancy counter for the programming section so that the sense of urgency could be explored.

Taking advantage of the greater space available on large devices, I created sidebars for internal page navigation and quick access to contact information.

Projection of the programming section with information on start, prices, time and number of places per class

2: Programming section on the courses page

Mobile site views

3: Mobile site views

Icons

In order to bring even more personality, I developed a set of icons to relate to the proposal of minimalist and geometric design of the page.

Image with the Oops icon set

1: Icon set

Development

I was responsible for creating end to end in this project, so the development phase represented my personal development in the programming.

The entire site was built to work with a CMS in order to give autonomy to school staff and that is why we opted for Wordpress due to the wide use, practicality of use and robustness of its plugin library.

Preview of the content manager in Wordpress

5: Preview of the content manager in Wordpress

Even after 4 years, the site remains functional and meeting the needs of the school.

Company

Opa! escola de design

Project year

2017

Icons for download

The Noun Project