The client wanted the website to bring in most of the company's new business. The goal was to present Artis as a modern, experienced company that delivers high-quality work.
Content strategy
We needed content that explains the company's philosophy, its vision, and what Artis can do for a visitor. Once I had the content, I started on the wireframes. (Also, I created an information architecture, but unfortunately, I didn’t capture any of it for this particular project.)
Wireframes
I created a couple of wireframe versions where I would put the needed content.
Since company’s name isn’t so self-explanatory, the landing section has a short, clear title saying what the company does, a description below the title that will
explain a little more about company, image, and of course, call to action buttons, one “GET YOUR PROJECT DONE” that will send visitor to the contact page,
and “WHY ARTIS” that will send a visitor to “WHY ARTIS” page.
The last wireframe is the most similar to the final website.
As visitors scroll through the home page, they come across the about section, philosophy section, services section, and CTA or contact section. As you can see,
the final order of sections is different from the wireframe. After thinking it through, I concluded it's better to present to the visitor the company’s
vision before we show them all the services they can get.
As we can see, creating a website is never a straight and complete process, we can always think of something that will potentially improve the experience.
Design
The next step is the actual design. In this step, we first talked about the style of the website. We talked about the colors and style. Since we want Artis to have artistic, modern kind of vibe, that is the direction we took.
Color Scheme
Starting with the landing section, we needed something simple, artistic and modern, with a metal image. Artis isn't an ordinary company; it thinks outside the box, and we wanted the image to do the same, slightly breaking out of its box over the neighboring section.
We want a client to be able to contact the company directly from the header, so we have “mail” icon that will open a mail client on click with predefined e- mail. We also want visitors to be able to call easily from their phones, so in the mobile menu, we have “make a call” button.
Artis is clean, fresh, modern, so section about Artis needs to be clean, fresh, and modern.
We need to tell our philosophy, it’s not just about metalwork, it’s about something much bigger!
After the design is “done” (You can see full landing page design at the bottom of the page), I presented it to the client, to find if there is something to edit or change. The client approved it very quickly so I moved to the next step, development.
Development
Website needs to be rich in animation, parallax effects and nice looking on all devices. This part is pretty straightforward: the design is approved,
so development follows the design specs.
I built it with Jekyll and jQuery, with styles coded from scratch. Jekyll is a static site generator, and with some integration you can have a CMS with
only static files and no database.
You can see website online at this link.
