Ambience

Goals and objectives of implementation

‍

Creating a 'simple' website, loading at a cosmic rate. Is it simple to implement ? Unfortunately, it is not that simple at all.

We have ways, and the answer is encapsulated in proper technical optimization and Frontend coding.

Learn about the process of creating a website for Krakow-based architect Ambience.

‍

Our role

‍

Designing a visually appealing, usable and intuitive site. At the same time, the task of the site was to create an unusual 'mask effect' transition of layers on the home page.

At the same time, the site performing a WOW effect is to be memorable with the graphics made and the visual concept of the UI layer.

Implementation of the site in an intuitive CMS Wordpress system in such a way that the Client could easily add more projects and blog.

‍

Implementation stages

‍

Why, what and how ?

‍

In order to meet the expectations for the style and character of the site, we began with a stage of moodboard preparation and competitor research. The solutions found were used to work with the client and determine the style for the site.

Our main goal was to inspire a sense of modernity and professionalism in our services. We know how important this aspect is for every designer.

‍

UX / UI design

Having the material ready, together with the client we analyzed the collected material. Assumptions were made, functionalities were defined and direction was chosen to work on prototype and UX mockups.

‍

When designing each section at the UX prototyping stage, we tried to answer the question: for what purpose is the section created, does it justify its place on the site ?

‍

As a result, we have created an intuitive communication flow.

After the analysis phase, we proceeded to design the site's UI and content design.

‍

Development

The final step was to do html, css, js coding, that is, to build an html template with fast execution time and semantically correct.

‍

Implementing the site's backend layer is to implement the WordPress platform.

Realizing the main goal of space loading, we delved into its maximum acceleration, since it is the speed of loading the page that affects its usability and the desire to travel deep into the offer.

‍

In order to make the site work really fast, we made the whole package of technical optimization, analysis with programs : gtmetrix, Lighthouse. It was made, among other things :

‍

• adjust images to the screen size in terms of size for the base responsive sizes, so as not to load too large images to the page,
• Compress photos losslessly with programs like iocompressor,
• the use of the lazy loading function that relies on loading images as the page scrolls, rather than at the start of all which definitely slows down the process of loading the page,
• setting to load the page on the system fonts, further to load the target fonts,
• Optimize and reduce the number of queries to the Wordpress database,
• minification of css and js code, that is, the implementation of a process aimed at reducing the source code ( removing unnecessary lines of code ),
• enable page caching, which involves setting a static version of the page,

‍