The making of the National University of Science and Technology MISiS website

Overview• Process

Before we start working on interface design, we want to find the most convenient way of interacting with the university. All while keeping in mind our main goal: creating a system of gradual improvements that would allow to keep the website updated and solve any arising issues.

Creating a workflow.

misis process steps

Starting to go through ore searching for gold. Studying typical users of the website and their needs.

misis process users

The result of the analysis is a list of pages with a hierarchy of functional blocks. It allows us to create a list of problems the main page has to solve.

misis process page tasks

Now we need to understand what’s important on each of the key pages. Sending the lists of blocks to the university for sorting. All subsequent discussions about the importance of various blocks are substantiated by text lists, not pictures.

misis process prior

The resulting lists of mock-ups are added to the designers’ queue. They are tracked using a regular spreadsheet.

misis process pges

As the analysis progresses, we fantasize about various graphic and visual elements. Right now the university has a set of pictograms, two for each direction of research.

misis process colors

However, the existing icons are not used at all. Suggesting to improve and complement the set by creating simple and clear groups of illustrations and use them as emblems to identify institutes and chairs of the university.

misis process signs

The university’s main activities are related to in-depth research of the properties of materials, including using high-tech equipment. Suggesting using microscopic videos and photos of various materials to excite future students. Such images look interesting and always attract attention.

misis process micro

What if we create background covers for each university chair that would display relevant materials and research fields?

misis process kafedr

Suggesting to film educational and informative videos about each lab in its own style. Getting the first results by combining typography, illustrations and color codes.

misis process video

It would also make sense to create a single media library that would host all videos, lecture audios and documents.

misis process mediateka

Gathering this and other hypotheses on a web-based board. This tool will allow us to quickly add and store all information related to the project: requirements in text, user scenarios, competitor website analysis, graphic language examples, site map, list of mock-ups and order of their development. Giving the client read access to keep them actively updated of any changes.

While the university is busy discarding unsuitable hypotheses, we start working on the website’s main page. The order of blocks on the page flows out of their hierarchy.

misis process mainpage

The mobile optimization requirement dictates the need for all design solutions to be easily adaptable. Which is why we choose modular tile layout for all pages and make it one of the core principles of the website’s graphic language. It will make the behavior of information blocks on mobile devices easily predictable.

misis process grid

Keeping only the most important items in the main menu.

misis process menu

Hiding everything else in the Entire Website menu.

misis process sitemap

All created mock-ups are permanently gathered in the prototype. This allows us to see the big picture and evaluate various hypotheses.

misis process lab

As the website grows, the prototype becomes too cumbersome to maintain, so we start creating new pages using the website’s administrative system and customizing their design using Web Inspector in the browser, subsequently adding new styles to the common CSS file.

misis process code

Keeping in mind the project deadline, deciding to launch the website in stages starting with the main page and key sections.