Subscribe to our monthly dose of design. No spamming, we promise.

Back to agilo.co

White space is to be regarded as an active element, not a passive background.—Jan Tschichold

Schiele in Vienna—The Form of a Signature

Array of: Dublin

Type+Vienna, Serving #2

Type+Vienna, Serving #1

Array of: Amsterdam

The Process Behind Designing a Responsive Abis Consulting Website

Posted by | on

After designing Abis Consulting’s website three years ago and achieving great results with it, it was time to do a website redesign based on new goals of the company and its business growth. Here we’ll share with you the process of designing a website.

Background

Abis Consulting is a Croatian company specialized in property consulting and project management. Since 2004, company has successfully finished multiple projects for foreign investors to Croatia real estate market.

We have been providing design and development services to Abis Consulting for the last 3 years. Since the company has significantly grown during that period of time, the moment came to redesign their last website so that it could reflect their business level and follow the latest design and development standards.

Before the beginning of our partnership, the client did not have a meaningful online presence. Gradually, we educated our client and proposed better solutions. The company identity was firstly modernized and then we moved on to website design and development. Their website is their main marketing channel today. They have had great response with their website resulting in reaching target audience and broader market.

Website goals and strategy

Since the first Abis Consulting website achieved excellent results, goals with this redesign were to build further values and add new ones:

  • reach more potential clients
  • provide target audience with necessary information
  • make it easy to understand company values and business
  • add more visual content
  • make the page easy to navigate

Target audience is made of foreigners looking to invest in Croatia real estate market. The website had to be available in five languages (English, French, German, Italian and Russian) and the owner had to be able to administer the website himself by using the WordPress CMS system.

Wireframing

Before we engage in visually designing website pages, we create site architecture and wireframes. With site architecture we define a website structure, the pages in the site and the navigation structure. Creating wireframes provides us a with a detailed schematic sketch of each page. This way we arrange the content that will be on the each page with clear hierarchy between elements of the page and navigation functionality.

We always follow grids when doing any type of design because it gives a solid structure to your work, makes it easy to do responsive websites and makes design elements appear neat and in order. It gives your work consistency. It won’t make your design boring at all, it is up to designer to create a unique and interesting design.

Creating a site architecture and wireframes is very important and actually an inevitable step in the process because it means a good foundation for the further work and we do not begin with visual design of website before the client has approved all of the wireframes and the content has been gathered.

With Abis Consulting wireframing, we wanted their audience to have a clear idea of what the company does as soon as they load the homepage. The main quote is big and apparent, services are right at your reach and language bar is located in the top right menu corner so it is easily reachable. The homepage is created so that gives a glimpse of all the pages on the site yet it creates a total picture of what Abis Consulting does and who the company is.
Below four services, we have three main or new projects and a bit of team info taking viewers on the About page.

  • P1
  • P2
  • P3
  • P4
  • P5

Services are split into separate pages with each page having its own photo and structured information. On the end of each page main content are links to other services. We do this throughout the website- we always keep user engaged by giving him options to follow another links that are kept in the bottom of the page, such as more projects on ‘References’ page.
References and New projects hold a grid list of projects with main photo and name of the project. Each project has its own page with gallery and project information so that viewers can see the building process without having to scroll down the page.
Since we have already set up main elements and characteristics of the website that create its unique identity, About us is also a part of the system carrying company information, team photos and positions and company video.
Blog goes straight to the point gives a list of the articles with each article having its separate page, too.
Contact page is kept simple and clear. There is a map, main contact information and contact form so that user can easily reach the company.

The final design

Once we agreed with the client on wireframe concept, we began with visual design of the website.

The font we chose is sans serif, strong, modern, rounded and resonates well with Abis Consulting’s visual identity. It works well both in large sizes and text sizes. This was important because we have large quotes on the website, but also blog posts where it is important that the font is easy to read in paragraph text.

Throughout the website, we are constantly using distinguishing four blue colors of Abis Consulting’s logo. Since these are their brand colors, we are using these colors to filter main photo and services photos. To make it more serious and firm, we are using dark grey (from logo) in combination with blue ones. Choosing those colors along with font, already brings a strong identity of the company throughout the entire website. There is enough of whitespace on the website to make it clear, modern and fresh but still very solid.

To add more visual content and to personalize the website, we are using more and bigger photo content on each page. Using more photos was crucial for this type of business since they speak a thousand words and helps connecting with target audience.

The website is completely responsive- it adapts to multiple devices with different screen sizes.

  • F1
  • F2
  • F3
  • F4
  • F5

Client’s words

While working with Agilo for the last few years, we have built a high level professional relationship and are very satisfied with the provided web design and development services. Our new official web page has given significant positive results and we are looking forward to working with Agilo on implementing new solutions and technologies in the near future.

About Zrinka Buljubasic

Zrinka Buljubasic

Zrinka is a type designer working as a Lead designer at Agilo. Type@Cooper 2015 graduate. Has BA in Visual Communication Design and MA in Type Design from Art Academy of Split, Croatia.

Read all posts by .