selected projects / Case study

Math and IT department (one page website)

Summary

Odjel za matematiku i informatiku na Sveučilištu J.J. Strossmayera u Osijeku is one page website mockup created for attracting potential new students and for students who are already attending studies at the department.

Project was an assignment for a job application.

Images used in the project had been taken from free stock images websites: Unsplash, Pexels, Pixabay.

Download project below:

Project

Project idea for a new site for the Math and IT department within the J.J. Strossmayer University in Osijek. One page site with all the necessary information easily accessible for existing and future students.

Goals and challenges

GOAL was to create easy and accessible one page website that stands out with an overall design and experience.

Also, it was important to display all the necessary information to keep searching for anything and everything simple and easy enough without stress or confusion.

CHALLENGE was choosing modern and professional typeface/s that are easily readable and the ones which support Croatian letters (čšćđž). I went with the sans-serif and serif combination (Montserrat typeface for titles and subtitles and PT Serif for body text) to keep it professional enough and at the same time modern for aimed audience (students).

I also used the combination of colors which represents informational technology (dark blue #1A4180 and golden poppy #FFC600 as primary colors) and their variations.


Persona research - proto persona

The site is part of the J.J. Strossmayer University in Osijek, department for math and informational technologies, mainly aimed for student population who are interested in applying to study math and informational technologies in the city of Osijek.

Aimed first and foremost for younger students (ages 19 to 21), it also provides programmes for older population who are unable to attend lectures because of work or other forms of obligations.

persona

Marko

Highschool graduate, 19 years old, tech savy, wants to become a computer engineer or a programmer.

Persona

Website one page design

Landing page is created in a way students can easily engage and find all the links for necessary information in one place (in this case on a landing page). The usage of concept and real-life images was the easiest way to keep students engaged and to make the experience easy and memorable.


Iconography

Search icon
Arrow down icon
Arrow up icon
Arrow right icon
Arrow left icon
Facebook icon
Twitter icon
Instagram icon
Arrow down icon
Arrow up icon
Info icon
Tree icon
Personel icon
Menu icon

Color palettes


Primary colors

#1A4180

#FFC600


Secondary colors

#444444

#FBFBFB

#FFFFFF

#D6A831

#3D6099


Logo design


Components

Button 1

Button 2

Button 3

Text fields


Typography

Montserrat light

AaBbCcDdEeFfEeGgHhIi JjKkLlMmNnOoPpQqRrSs TtUuVvWwXxYyZz 0123456789 !@#$%^&*/)

Montserrat bold

AaBbCcDdEeFfEeGgHhIi JjKkLlMmNnOoPpQqRrSs TtUuVvWwXxYyZz 0123456789 !@#$%^&*/)

Montserrat black

AaBbCcDdEeFfEeGgHhIi JjKkLlMmNnOoPpQqRrSs TtUuVvWwXxYyZz 0123456789 !@#$%^&*/)

PT Serif regular

AaBbCcDdEeFfEeGgHhIi JjKkLlMmNnOoPpQqRrSs TtUuVvWwXxYyZz 0123456789 !@#$%^&*/)

PT Serif regular italic

AaBbCcDdEeFfEeGgHhIi JjKkLlMmNnOoPpQqRrSs TtUuVvWwXxYyZz 0123456789 !@#$%^&*/)

PT Serif bold italic

AaBbCcDdEeFfEeGgHhIi JjKkLlMmNnOoPpQqRrSs TtUuVvWwXxYyZz 0123456789 !@#$%^&*/)

Explore other projects

Contact