YP Interiors
by Yianna Papalli
Web & Digital
Logo Design, Graphic Design, Web Design, Photography, Editing, Photo Manipulation & Retouching
Software used: Photoshop, Illustrator, Acrobat, LightRoom, Wix, Procreate
Background —
A client with no online presence who wanted to build and connect their online shop and collections with their website.
Problem —
The client is somewhat established in their field, how can I create effective web designs that are easy to navigate as well as developing and connecting all their collections within the website to attract the right type of buyers of their designs?
Goal —
Create a high-end branded website and connect online shops to attract buyers, make the collections easy to access within the website, showcase their work in the best possible way and offer a great user experience so that visitors can return to the website time and time again to purchase items from future collections and hire the freelancer for interior design projects.
Approach —
Communicating and getting to know the client to create appropriate logo and branded designs, researching user friendly practises for web design, establishing a website and online presence using Wix Editor manually, and taking and editing professional photos of their work on-site to advertise and showcase on their website.
THE CLIENT.
At the beginning of a new project I always spend time with the client to understand who they are, what they want and what their business values are so I can later reflect it in my work.
The client had a relatively new client base as an Interior Designer, but had been working with artists to develop her furniture and painting collections for years. The client believed that they were passing under the radar of many potential clients because of their lack of an online presence and a professional website. On top of that, the client had created multiple online shops on various websites to sell their products but the sales remained low and they hoped that once an official website was developed and connected with their shops, the online sales would skyrocket too.
To see the final version of the client's website please scroll to the end.
After having done some research on the client's work style, I began to look into other websites of Interior Designers who had a very well established online presence and showcased their work and their collections in a clear manner while staying on brand. Among other great examples of web design of interior designers, was Kelly Wearstler, who had a beautifully laid out website with strategically placed buttons, keywords, slogans and enhanced SEOs.
The client was impressed with the web design and agreed that although this website was only an example, they thought it was an excellent starting point.
This is Kelly Wearstler's embedded website:
LOGO DESIGN.
Even though we had solidified on research and found plenty of examples of web design, the client was very undecided on their personal brand but they felt excited to solidify it soon. At one of our meetings they presented me with rough pencil sketches with what their ideal logo would look like and attempted to describe and paint an image for me so that I can bring it to life.
In their words, they wanted the design to be fashionable, clear and striking, but also elegant and royal. But they were clear that they did not want the design to alter much from their sketches.
At first, I recreated it using Illustrator into a sleek logo, with no background and no other lettering, using medium-thick lines to enhance the element of elegance with elongated lines and curves, almost like a powerful and dignified woman, an empress.
I drew inspiration from high-end fashion houses logos such as Louis Vuitton and Dolce & Gabbana whose logos were clean and modern and attracted a premium clientele.
After the typography design got approved by the client, they insisted that it was missing something, that in its current form it was too plain and needed a strong element to highlight it, without losing its visual potency. I suggested to add a colour background to enhance the main shape and bind it with the interior design business.
I started playing around with colours and backgrounds. The colours I went for had to be elegant, gold and silver hues, red, purples and white. I had a strong feeling however that purple was not representative of my client's work as they had very limited use of this particular colour in their interior design work. Red on the other hand was too strong and although it was a favourite of the client's painting and collection work, it did not bind well with the elegance scheme we aimed for, it almost looked revolutionary. Silvers, whites and gold hues were perfect, as they gave off a metallic undertone but remained relevant to elegance and fashion.
I presented these ideas to the client and they pointed out that in their personal interior design work they prefer to work with silver hues, rather than gold. I suggested that if we keep the silver colour scheme, it could accentuate the logo by choosing a hue that comes into contrast with the white and because silver is a cold, almost grey colour, we could add a warm undertone with their favourite colour, red. After some iterations, the white and silver were the best choices as the design remained elegant and premium.
However, the shape of the logo's background had to be as potent as the colours and the typography itself. Going back to what the client said in our very first meeting, I realised that the design needed to be more striking clear, and firm. Round shapes were too 'soft', and rectangular shapes as they were tall, much like the typography, were taking the focus away from the typography, instead of adding to it. The best option was a succinct and firm square that gathered the attention in the centrepiece of the logo, again much like the energy of an empress would.
So I reversed the white logo against a silver with red undertones background placed against a firm square shape, and I had successfully created a logo that attracted attention, was elegant and royal, and hinted that the services provided are of a high-end standard as appropriate to those who want to live like modern day royals.
.png)
.png)
.png)
PHOTOGRAPHY.
Once the logo was ready, I had a foundation on which I could build and create the website. I chose to use Wix as it was a website developing tool I had used in the past and had knowledge in and my user experience was amazing, but most importantly, It was not as rigid as GoDaddy, instead I could move elements and adjust everything however I saw fit.
Starting with the home page, which had to be immediately engaging and show off the beauty of the designs and modern, high-end energy of the Interior Designer's work, I knew I had to complement the web design with high quality photography that showcased their work.
So my next step was to visit the locations where they had worked and designed the interior spaces, while asking them to attend the session with me to explain the philosophy, practical uses, hidden details and ornamental work of the interior spaces.
I took my professional DSLR camera and under the direction of the Interior Designer who knew the spaces inside out, I took plenty of pictures that showcased everything from close ups of textures used on their furniture, handcrafted items from their collections, wide shots of the rooms, inside and outside spaces, still life of seemingly ordinary objects in their designed background, their paintings etc. I experimented with angles, lighting, shapes and composition to bring forth stunning images that could be used for their website. I also took pictures of all the items in their shop, taking care to include close ups of details as well as wider shots so that I can update their shop and collections with professional images.
Taking care to shoot in .exr so as not to lose details, I used LightRoom to fix the lighting and enhance certain elements in the photos through saturation and contrast and bringing out the gold and silver metallic hues, the vibrant colours and the contrast of the natural textured elements against the fabrics. Then, using my photo manipulation and retouching knowledge, I used Photoshop to camouflage any unwanted elements in the scene, such as a random passer-by, or a phone that was left on the table by accident etc. I then exported everything in .jpeg format, sorted them out using a filing system that separated each place into rooms and items that belonged to different collections.
THE HOMEPAGE DESIGN, USER EXPERIENCE, INTERACTION & ACCESSIBILITY.
With all this amazing work, I knew that I had to structure the homepage around the beautiful images of the interior spaces which showcased a range of projects the client worked on.
I chose a landscape image with striking lighting, bold and warm colours and easy-to-read composition that offered depth into the work of the Interior Designer as a landing page. The logo was strategically placed in the header in a relatively big, but not overwhelming format. Followed by the full name of the Interior Designer typeset in the corner of the website to engage the visitor with the professional's full name, as well as framed on top of the landscape image, formatted with white, 'firm and elegant' lettering. Putting the logo and the images together, the brand of the Interior Designer now looks official, premium quality and intrigues the visitor to keep scrolling, wanting to find out more.
Next, the visitor can read about the Interior Designer's work ethic, values, education and experiences by including a succinct description of what they can offer with their specialised knowledge and craft. I formatted the text so that it is aligned in the centre of the page with ample paragraph spacing to allow for an easy and quick read-through. I know that visitors will probably still choose to skim through the text, so I made sure that they will still get a general idea of what they can expect with the designer's services by keeping the sentences short with key words. I created anchors and linked the page menu titled 'About' to this particular page section, so every time a visitor clicks it they are directed to this paragraph.
Following, is a range of projects/case studies that the Interior Designer worked on, so the visitor can browse through. I made this section with the fact in mind that visitors would like to see the designer's thought process laid out and in a way that showcases and highlights their strengths. I made sure to include not only interior spaces and details, but also events they worked on, digital projects and upcoming releases. In a clear and cohesive manner, the projects are paired in two columns and the visitor can access them by clicking on the images which will take them into the relevant pages. As with the 'About' section, I created an anchor and linked the page menu titled 'Projects' to this particular page section, but I also made a drop down menu in the page menu with a list of all the projects so that visitors can easily access them individually and see the work.
At the bottom of the homepage, I have included all the services the Interior Designer can offer and talked a bit more in depth about their vision and work ethic, again as before, I made sure to keep it short and succinct in the same format to achieve cohesion. I created another anchor and linked the page menu titled 'Services' to this particular page section, so every time a visitor clicks it they are directed to this paragraph. Followed by a subscriber's list prompt, any visitors who wish to keep updated about new collection and product releases and projects can sign up. Including the contact number, email and address of the Interior Designer right after was a strategic decision to make it easy for any visitor to immediately contact them personally, instead of having to submit a contact form. Last but not least, in the footer of all pages, I have grouped the company's details and shop, their work and the contact pages with direct links to pages in case a visitor wants to get involved and learn more, along with links to their Facebook and Instagram pages.
I also included a message chat for easy access to contact and a prompt to encourage visitors to ask questions and engage with the page and show their interest. The message bubble follows their experience around the site and is easily accessed at any point, therefore if a visitor has concerns or immediate answers they can refer to the direct message option. Direct messages are stored in an email inbox I created and are notifying the interior designer as soon as someone makes an enquiry. I also included a prompt to encourage the interior designer to reply as soon as possible to their visitor's request.
THE COLLECTIONS.
In the page menu within the header I created a Collection page with a drop down menu which allows the visitor to see what collections are available for them to browse through. Each link in the drop down menu takes them to a different page with the relevant collection in which they can browse all the items the Interior Designer offers. Using the photographs I took earlier, I created a gallery and listed with all the necessary details and codes the items that can be ordered and provided links to the Interior Designer's stores directly should they wish to purchase.
For a pleasant user experience, I have made the images in the gallery large enough so that the item displayed can be showcased in a non-competitive manner by allowing only 3 items to be listed per row. This could allow the visitor to take time to enjoy viewing the details of each item and if they hover over an image, I made it so that the image is slightly zoomed in to allow for further gazing and inviting the user to click the image and find out more about the item. By adding a title to each item and a short description, the user can get a quick glimpse and read a bit more about the item before clicking the picture, however the description gets cut off on purpose so that the visitor can click the image to find out more.
As the visitor scrolls through the items in the collections I added a quick fade in effect every time a new row comes up to make sure of a smooth and visually pleasant transition from one row of items into the next, almost like enjoying one course after another. The process is meant to be slow, allowing for the visitor to enjoy their time browsing and spend more time looking at details and give them a sense of hand picking the perfect items for their home.
For every item I also allowed the option to like or 'heart' the items they prefer the most and return to them later so that they can narrow down their choices to a few. It is up to the visitor to choose whether they want to buy all of them or choose one design and create multiple copies for their needs.
At the page header I also included a clear link to the Interior Designer's shop which was already set up before I took on the project on a separate website. As per my client's wishes I kept it separate but integrated this very important element among the page menu which can be accessed on every page. Once clicked, a new tab opens on their browser with the shop offering all their stocked up items for sale.
Lastly, the 'Contact Us' page is visible not only in the header, but also at the footer and in every page the visitor can refer back to the 'Contact Us' page. This offers them the chance to get in touch with the designer by filling in a form with their enquiries and their details so that the designer can reply directly. Once submitted, I set up a successful submission message to be displayed so that the visitor knows that the Interior Designer will reply to their message in due time. As with the homepage, the mailing list subscription prompt is available at the end of the page followed by the necessary details of the Interior Designer, email, phone and address for any other sort of direct enquiries the visitor wishes to make.
Below you can interact with the embedded website, or visit it directly, by clicking here.
