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.