1/ Personal photo for each page of the site

A carousel with links to service pages is located on the first screen of the home page. To make the site more memorable, I decided to create a personal visual solution for each service, based on photos from the real world. For example, for the Web Application Development page, I selected a photograph of a manufacturing process at a factory that displays a lot of sparks and industrial equipment. Because the development of any software product combines a lot of sparks from managers and customers. For example, the Enterprise Integration page received a photo with a view of the skyscrapers to visually convey the atmosphere of the industry for which this service is intended.

This approach with photos from the real world is much better perceived instead of regular stock photos, for example, by searching for «Software development» on Shutterstock. Compare yourself two variants:

After approving this concept with the client, I decided to use photo metaphors on the services’ pages as a background image under the page title. Thus, the visitor is formed a sense of integrity of the design of all pages of the site.

For the remaining pages, I also selected background images and photographs to follow the accepted concept.

As a result, to display all the necessary graphics, it was necessary to review, probably, a thousand photographs and about 200 of them I tried to use in the design of the site. This stage took almost a third of the total project work time. It was a real challenge!

2/ Responsive schemes

In the prepared text for the website, there were graphs and diagrams for almost every page. Some of them could be made using sequential cards in the format «Icon + title + text». But for a few pages, I designed completely new options.

I made each circuit readable and understandable on a small mobile screen (only 320 pixels wide).

3/ The concept of sequential text descriptions

The idea of the concept of interconnected text blocks on the page was born in the process of preparing content for the site.

Processes or methodologies for the work of development teams are very often described as successive steps. And here we get a dry plain text — paragraph by paragraph.

My goal was to supplement the description with icons or visuals and to show the semantic connection between paragraphs of text. And besides this, I made these blocks responsive and not losing their meaning even on mobile screens.

For example, the Build vs Buy block on the Custom software solutions page.

For example, an ADA compliance page is all made up of consecutive blocks with large graphic elements.

For example, the Company page and the block with the description of Engagement and Support Models.

4/ Accent blocks

The use of bright background images in the design of the blocks is a technique that adds a cheerful mood to each website page. Such blocks are located at the bottom of the page and focus on the important text or draw attention to other sections of the site.

When creating the first two or three pages, the idea was born to use wildlife photos in these blocks: green plants and leaves. In my opinion, it turned out very interesting and bright, especially for the corporate website of a software developer company.

1/ General website assembly diagram

Automatic site assembly was implemented using the Gulp task manager according to the following scheme:

1. All separate svg icons are automatically collected in a single sprite.svg file (and sprite.png for older browsers).
2. Styles from Sass files are generated and minified into a single CSS file.
3. All files with Javascript code are also collected in one file and minified.
4. A file with critical CSS styles is created for each page of the site.
5. The Mozilla Nunjucks framework generates HTML files with all critical CSS styles and JS code.
6. All other graphics (jpg/png files) are optimized before publication.

2/ Bootstrap + JQuery

At the request of the client, the site layout used the Bootstrap 4.0 library with jQuery. This solution even reduced development time, because I took the blank from the site getbootstrap.com.

Since this is a completely static site, Github statistic shows 70% of the HTML code. The entire site takes up 18.5 MB of server space (of which 14 MB are images).

3/ Web page loading in 0.5 seconds

All external CSS/JS files and images don’t block the rendering of the web page, because I’m used the lazy load method. And also this positively affects the rendering time of the first content and the page load index.

4/ Custom font

5/ How to upload a large background image to the first screen in 0 seconds

I want to tell how was resolved the issue by loading large images on the first screen of each page. The usual lazy load method didn’t work for the images in the first slide on the homepage and the first screen on the internal pages. Because the web page with built-in critical styles was loaded and displayed in the browser almost instantly, but the loading of the main picture lasted a couple of seconds. Because of this, in the first two to three seconds, the page looked blank and not beautiful.

The solution was not difficult at all. In the «src» attribute for these images, I put base64-code, which was generated from the reduced JPG-version of each picture with a quality indicator «0». Thus, it was possible to achieve small sizes of base64 code on each page (about 20-40 KB) and images were shown immediately after loading the webpage.

I wrote a special algorithm for pre-loading photos for neighboring slides in the carousel on the main page. These slides are not yet displayed on the screen, but after loading the webpage they are ready to appear either automatically or by a user click on the link arrow.