Website for IT courses on WordPress
About the project and task
Webnauts Academy is an educational project of our company aimed at training and improving the skills of beginners and novice IT specialists.
Webnauts has long been engaged in internal training of employees, as it feels a constant staff shortage. And an attempt to bring the training center to the outside was successful and showed the unprecedented relevance of IT education among the residents of our industrial city.
Having organized the educational process in many areas and convinced of the usefulness and importance of the project, we decided to create a modern IT course website with a minimalistic interface, clear navigation and adjusted for a large amount of content: training programs, video reviews, teachers and graduate cards.
Design
Visual analysis
Before we started designing layouts, we started visual analysis, highlighting more than 10 exemplary sites in the field of IT education. After evaluating the basic design principles of such projects (grids, shapes, colors, fonts and media), we managed to create our own unique design concept.
Website prototyping
Based on the results of visual analysis, the designers carefully thought out the structure of the IT academy website, namely: what will the main screen look like, what blocks will be used to appeal to users’ trust, and how to talk about the benefits of educational products? This stage is the creation of a black and white sketch of the site, in which designers focus on UX (User Experience) as much as possible, that is how the interface will work and whether it will be user-friendly.
As you can see, the work of UI/UX designers is not only a creative, but also an analytical process, during which the user experience is carefully studied. This research allowed us to create an effective digital product that turns views into training applications.
Grid in web design
Even though the site contains a lot of information, it looks neat, intuitive, and visually appealing. This effect is created by the grid – the basics of the basics when creating a prototype of any site. But in our case, this is not just an invisible skeleton of the site, but an integral part of the design, and together with large typography, arrows and other signs, it evokes His Majesty the Swiss style.
We can see how thin gray lines permeate all pages, artfully structuring and separating content. Thus, all text, photos, forms and widgets are neatly inscribed in rectangles with clearly defined borders. Thanks to the block structure, we have created an organized and user-friendly interface:
Brand colors and hover animation
At the initial design stage, the designers already had a logo in the Bauhaus color style: white, black and muted red for accents.
So, the design of the site was made in accordance with the existing corporate colors. We used white as the background color: it gives the interface a sufficient amount of space, and at the same time, contrast for other important elements. These are black buttons and drop-down list icons that change their color to red when hovered over. Headings and text boxes with important information are also highlighted in accent red, completely capturing the user’s attention:
Layout and navigation
As soon as the design concept is ready, the project moves on to the next stage — the actual development of the educational courses website. The front-ender starts first: he codes layouts using HTML, JS, and CSS (SCSS/Sass) languages, and sets the site in motion by animating widgets using GSAP (GreenSock Animation Platform) technology. Let’s break down the site and see what we got.
Website first screen
The first screen forms the user’s first impression. It is important to remember that it only takes a few seconds to form it, but at the same time, you should not overload the main section with content. Based on these considerations, we placed the most important on the first screen:
- a large and understandable title that fully reflects the theme of the site;
- a horizontal version of the logo with a concise menu in the header;
- a dynamic video telling the user about the main advantage and location of the training center: «Study at the best IT company in Krivoy Rog»;
- a banner with a current offer and a button «All promotions of the academy»;
- main conversion button «Choose a course»:
Block «About us»
It plays an important role in building customer loyalty and trust. But this does not mean at all that it should take up a lot of space or even a separate page. We did without a lot of text full of victories, and limited ourselves to a photograph and really important information that fit in just a couple of sentences:
We are sure that users will appreciate the saving of their precious time, and in the meantime we will try to strengthen their confidence in the reliability of the company with the help of other important blocks and pages.
Educational Products
The main product of the company is a course, and there are no less than 17 of them. We have combined them into 7 categories for individual IT areas and presented them in the form of a drop-down list.
Each course leads to a separate page and introduces more detailed information:
- title, brief content and the beginning of classes with the «Register» button,
- photo gallery showing the educational process,
- the benefits of learning with the button «Full course program»,
- information about the teacher with a photo,
- learning conditions,
- application form with conversion button.
The page is easy to navigate, and all the important and necessary information is at a glance:
It is worth noting that thanks to the use of the grid, not only the design has become more beautiful, but also the code, in the literal sense of the word. And translated from the language of developers, beautiful means working, structured and readable.
Communication methods
We thought of many different options for the user to contact the company, and even dedicated a separate screen of the main page to this. The goal is obvious to absolutely everyone, but what a presentation! The section captivates with an original individual approach. So, introverts are invited to write, extroverts — to call, and those who doubt — to attend any class of their choice for free:
Company advantages
This section reinforces the «About us» block of the site and is a concise list of 4 points, neatly placed in a table:
Reviews
Video reviews of graduates, or to be more precise, of employed graduates, reinforces the previous text block and inspires even more user confidence. The media section is designed as a circular gallery with black and white photos, numbering and arrows. When you hover over the photo, the photo comes to life, and when you click on it, the full video from Youtube is played.
This block was one of the most interesting and challenging in terms of development, and the result met our expectations. Here is an example of how a fairly minimalistic interface can create a truly unique user experience:
Catalog of graduates
This is another advantage of the company, embodied in a separate landing page. It is dedicated to graduates who have successfully completed their studies and are ready to start new IT projects. The page is a catalog with cards of young professionals. In turn, the card contains a photo of the graduate, brief information and a link to the portfolio, contacts for communication and a button with a resume. The page also has a simple navigation in the form of a horizontal list of 3 lines and allows you to filter candidates by specialization:
The graduates section can be accessed from the main page block or from the menu item in the site header «About Us — Graduates».
As for the development, we are ready to sing the praises of the grid layout again, because thanks to its horizontal and vertical lines, the coding of the cards was faster, eliminating such a programming phenomenon as «code duplication».
Photo gallery
The importance of photos on the site is difficult to overestimate: real informative photos arouse interest and describe services instead of a thousand words. We designed the photo in the form of a compact ring gallery, which perfectly reflects the educational process in the creative atmosphere of a modern IT company:
FAQ
The Frequently Asked Questions block is designed to cover common customer objections, thereby reducing the load on managers. In our case, the visitor closes the question of interest, revealing the desired answer. And yes, the drop-down list is still relevant today due to its compactness and ease of use:
Form and contacts
The application form is as simple as possible and includes only one field for entering a mobile number. A funny large button that changes its color on hover and sends the request for processing adds to the mood.
Users who are used to taking the initiative in their own hands can contact the company at any contact listed in the footer of the site:
Responsiveness
In addition to the desktop version of the site, Webnauts designers have worked hard to create layouts for tablets and mobile devices. All blocks and widgets automatically adjust to any screen size, and as a result, the site is convenient to use both on a smartphone and on a desktop computer.
Site functionality
«Not only external, but also internal beauty is important», said the back-end developer and masterfully set up the software-server part of the IT course site on WordPress, in particular:
- custom fields using the ACF plugin (Advanced Custom Fields);
- custom record types Graduates and Courses;
- Ajax forms that allow you to exchange browser data with a web server in the background;
- graduates page with Ajax filters and pagination.
The developer also installed the Loco Translate plugin on the site, which makes it possible to translate all strings wrapped in code, and then converted static strings using the __() function, which can return the original text in the absence of translation or loading of the text domain.
All these complex manipulations made it possible to set up the most convenient and understandable admin panel of the site, in which it is easy to manage the appearance and content of pages without the help of a developer:
The result
The effectiveness of any site is measured by a first-class user experience, and the creation of such a site requires effective interaction between designers and developers. Thanks to the well-coordinated work of the team at every stage — from visual analysis to setting up the system control panel — we managed to implement a convenient and attractive IT course website, both inside and out.
