Visual Web Design | Floornap | Adobe XD + Adobe Illustrator | UI/UX Design

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
·@tonac·
0.000 HBD
Visual Web Design | Floornap | Adobe XD + Adobe Illustrator | UI/UX Design
The recent student job I've done before I got a job in my profession. The project was about creating UI/UX design for a client that has a website. At the time I was at the 3rd year on University of Informatic Design.

![Prijelaz_2.png](https://images.hive.blog/DQmQvGWq3sza77eqB3bLLrVvzQWVr1mQozmMobtWgSFQpYr/Prijelaz_2.png)

Primary goal was to create *"Frames"* - Design of the Forms. 
The client started his start-up company named **Floornap** - A platform for a variety of low budget accommodation within 15 euros per person. The goal of the company is to make possible for both - hosts and travelers to make eco-friendly accommodation possible. 


![1.png](https://images.hive.blog/DQmdVDAmrm15umxKS7PhpQcb846pvyoBSXzmNn4kmH4syth/1.png)

- A finalized version of the visual identity I've made for the website. 

As the logo has the darkish blue and orange color combination, I've managed to pick **Sky Blue** for the background color as it makes nice contrast - which means nice visuals and something that user will like to use.

![Prijelaz_2.png](https://images.hive.blog/DQmQvGWq3sza77eqB3bLLrVvzQWVr1mQozmMobtWgSFQpYr/Prijelaz_2.png)
<center>![image.png](https://images.hive.blog/DQmR7tPSF9d5d8qjZX8cg8c1jef4xUnzN6ztmPPYnxBuR49/image.png)</center>
<center><H4> HEX Codes of Logo and Background Colors.</H4> </center>

![Prijelaz_2.png](https://images.hive.blog/DQmQvGWq3sza77eqB3bLLrVvzQWVr1mQozmMobtWgSFQpYr/Prijelaz_2.png)

Every **UI/UX Design process** consist of concentrated elaboration of preparation and ideas. It's not about turning on some of the Adobe Creative Cloud software and making something from the scratch. It's about making a personalized design that will get remembered and subconsciously connected with the brand - in this example - Floornap, and its visual design.

![host_5.png](https://images.hive.blog/DQmcF1NStTPE963DvEd2K4BmdksEX3nfP4ag4h7pmAmDxeA/host_5.png)

- This was already the idea that was constructed well, elements were balanced well and the layout was trasnparent. The thing that was bothering me was I tried to exempt the orange color from the logo. That made the design more serious and at the time I wanted that look. By rethinking, I finally decided to make it more colorful as the theme of the company is **socializing, traveling and discovering new things**.

![Prijelaz_2.png](https://images.hive.blog/DQmQvGWq3sza77eqB3bLLrVvzQWVr1mQozmMobtWgSFQpYr/Prijelaz_2.png)

My actual job in this case was to make a nice UI (stands for User Interface, everything you as a user can see at the layout of the webiste) of the forms of **"Register | Login | Become a Host | Booking"**

All of that 4 elements are visually divided on the main page of the website, but with a nice visual identity and consistency as a user (for example) registering and trying to "Become a Host" should be "looking the same" and making fluid synergy, without our user get distracted or lost.

![Prijelaz_2.png](https://images.hive.blog/DQmQvGWq3sza77eqB3bLLrVvzQWVr1mQozmMobtWgSFQpYr/Prijelaz_2.png)

<center><h2>Completed Project - Examples of the Visuals</h2></center>


![1.png](https://images.hive.blog/DQmdVDAmrm15umxKS7PhpQcb846pvyoBSXzmNn4kmH4syth/1.png)

![2.png](https://images.hive.blog/DQmXGv96vNkdQ1gwNf5NhxnMyrFNiNggSZ2uo4tmBqostVu/2.png)

![3_1.png](https://images.hive.blog/DQmW69f6Mx2uAfr3kEmkGvaY5MEjrD6kgkRPHMzRSXgAfxz/3_1.png)

![3_2.png](https://images.hive.blog/DQmPQyTwpa8PU76ZihEzoU3i8LxFhvvZTev3KJEF2yzGkt1/3_2.png)

![4_1.png](https://images.hive.blog/DQmWeHaTUPwHTRVMk83u9tQCiCfCtfk5XPJAGNAtz4mtT9x/4_1.png)

![4_2.png](https://images.hive.blog/DQmPVBB67XfVpgWjw4Gv6EkDTxM4XXqjwX5HSbm7tvpt7jg/4_2.png)

![5.png](https://images.hive.blog/DQmSUaCiXWEckGpkyK8mmJJgewNKtBsQ562Mo9UDh5Tq9AU/5.png)

![6.png](https://images.hive.blog/DQmXwAWZwveoWyubhxGrDWUMz1cuXhCMNaCAce8jjJFzDAt/6.png)

![7.png](https://images.hive.blog/DQmerG65BAegY43ped7oZHr8jqDpG4d5HGEJVnk6TMCAGkT/7.png)

![book.png](https://images.hive.blog/DQmY7VKjL8A53SMPzE3D1icCVXwuwJJp1UyQS9HySsNPJs3/book.png)

<center>![iphone.png](https://images.hive.blog/DQmNXtJAPp8JqxNFCqbfTXUpDX2tzW1M6bpwJXqbRGWgHi7/iphone.png)</center>

![profil_web.png](https://images.hive.blog/DQmQNiqjasrmReHC6X6Q4uTiVG8RxXWCVLytiMCRPMUX1ps/profil_web.png)

<center>![register.png](https://images.hive.blog/DQmTFYZBNWTtAeUEAkeyV4rcT15Tss9jw7tq5oJj22ZbShT/register.png)</center>

![Prijelaz_2.png](https://images.hive.blog/DQmQvGWq3sza77eqB3bLLrVvzQWVr1mQozmMobtWgSFQpYr/Prijelaz_2.png)

The main intention was to make a design for the website, but I as a designer like to provide to my clients a mobile version in case they want to make mobile application some day - or just for the mobile version website.

![Prijelaz_2.png](https://images.hive.blog/DQmQvGWq3sza77eqB3bLLrVvzQWVr1mQozmMobtWgSFQpYr/Prijelaz_2.png)

<center><h3>© This content is originally made by @tonac</h3></center>

![tip-top-wash-bez-tepiha.png](https://images.hive.blog/DQmW2aX1TDFggXsGSzSABfA4RViNECE3tsUyaHiyx7gdJFL/tip-top-wash-bez-tepiha.png)


<center>**Have a wonderful day - @tonac 💚**</center>
👍 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,