Published
October 12, 2019
Category
Development \ Design \ Branding
client
Ulties
CASE STUDY
DESIGN
DROP
Engagement
Front End Development
Back End Development
Design
Frameworks
Laravel
Laravel Spark
Vue
Nuxt
Challenges
Design Development
User Upload Management
SERVICES
- Development
- Branding
- Logo Design
- Dashboard Design
- CRM Development
- Corporate Identity Development
DELIVERABLES
- 10+ Pages
- 10+ Modules
- Illustrations
- Icons
- Style guide
- Landing Page
OTHER
- UX Research
- UX Psychology Development
- General Competition Research
- Identity and Brand Research
01. About the Project
D
Design drop is a fun project that we decided to create to contribute to the open source graphic design community.
The project was initially an idea to make a simple database for our own corporate needs and store digital assets that are relative to our design needs. This afterwards turned into a bigger idea to create a simple free opensource graphic resources library with amazing salability options.
The project itself is still ongoing and in development, with future plans to onboard content creators with payment opportunities and marketing strategies.
02. Development
We builded the backend system from a Laravel Spark codebase, allowing us to later turn this into a profitable business with subscription plans and download limitations. however for now it all remains free. With Laravel Spark we also got features such as authentication and user management out of the box.
Additionally we added Laravel Nova to allow us to manage the content of the site and our users within a simple admin interface. Laravel Nova allows us to develop simple admin interface without much trouble, their interface allows easily creation of management pages for resources, categories and users without having to use too much time on the frontend, since it’s for internal usage.
Within our development process we did some automatic unit tests for some of the sites core functionality, this way we ensure that those functions always work, even if we go ahead and refactor the code or adding new functionality.
Laravel
Laravel attempts to take the pain out of development by easing common tasks used in the majority of web projects, due to our many years of experience with Laravel, doing the functionality in Laravel was the optimal choice.
Nuxt
For the frontend development, we decided to challenge us self with another framework. We decided to integrate Nuxt frontend framework into Laravel to get another feeling to the visual part of the application.
02. Design
The design language was derived from relative inspirational UI UX concepts and converted into a functional and relatively clean design prototype, which was later on deployed. We chose to go for a dark and simplistic representation style in order to allow a more highlighted focus on glossary items and some key accents and aspects of the website. This was done to ensure ease of use and a relatively seamless and eye focus friendly design.
Color Choices
#FFFFFF
#424346
#0B0C11
#111218
#00FFD1
CLEAN LAYOUT
Simple and Functional
We chose to design a simplistic layout and use experience in order to provide a snappy and speedy feel to the user. Fundamentally the main user experience focus of the platform is speed and ease of usage. Although, there might be a demand for large changes in the future as we move to a more open source version of the project that is publicly available for content upload and re distribution by the everyday user. The overall dark visual representation is key to achieving that execution, as it creates a natural focus on colors and colorful thumbnails, which would be on focus throughout the entire website, excluding the profile and settings pages.
PRODUCT
Representation
The design core of the project is all about digital product presentation. In which case we had to create different tile styles and modules that represent all that one product stands for, so its user friendly to read and only takes a few seconds.
PRODUCT TILES
Interactive
It was hard to figure out how to pack all the important information in a single square tile. But the end result turned out quite fantastic and super clean. Rather than having tiles directly link to product pages, we decided to make interactive tiles with two sides, in order to have more content displayed and a more easy user experience. Also have some space for future updates and features to be added.
FONT CHOICE
Typography Choice
For typography we chose Inter.
Inter features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate “0” from “o”, tabular numbers, etc.
