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.
Starting to go through ore searching for gold. Studying typical users of the website and their needs.
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.
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.
The resulting lists of mock-ups are added to the designers’ queue. They are tracked using a regular spreadsheet.
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.
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.
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.
What if we create background covers for each university chair that would display relevant materials and research fields?
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.
It would also make sense to create a single media library that would host all videos, lecture audios and documents.
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.
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.
Keeping only the most important items in the main menu.
Hiding everything else in the Entire Website menu.
All created mock-ups are permanently gathered in the prototype. This allows us to see the big picture and evaluate various hypotheses.
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.
Keeping in mind the project deadline, deciding to launch the website in stages starting with the main page and key sections.
