Project introduction

Logoly.Pro is an online pornHub-style Logo generation tool that helps you quickly generate pornHub-style logos.

Sudden inspiration

I often have to do some Side projects, which involves making logos. However, as a programmer with no sense of design, I always make some ugly logos when making logos. So I thought over the pain. Think of any useful tools that can help me generate a nice Logo.

For me, it doesn’t need to be too complicated, just enough to meet my own requirements.

This requires the Logo to have some characteristics:

  1. Simple design: many of the logos with the mascot are not suitable for me, because I have to prepare the pictures of the mascot.
  2. Recognisable: Simple logos don’t do much, they need to be memorable

After some screening, PornHub Logo came into my sight.

Design the product

Before developing, I did some product thinking to see what features I needed to do and what I didn’t, and ended up with a list like this:

Projects to do

  1. The project is developed using Vue because it can go online quickly
  2. The project is deployed using Netlify, which allows you to use your own domain name and use SSL, which is faster than GitHub Pages.
  3. The project should support custom text, which is the most basic functional requirement and must be done.
  4. The project should support custom colors, after all there may be other aspects of the Logo that require a similar style but a different color
  5. The project should support custom text sizes, after all I’m exporting PNG, if you can’t customize the size, it might be confusing.
  6. The project should be added to Google Analytics. If I add statistics, I will know how many people have used my project, which is also a sense of achievement.
  7. The project should include my personal information, used to promote myself, and brush my face.
  8. Social sharing, there should be a convenient way to share, so as to better help the project in the early growth.

Don’t do projects

  1. Custom font: original PH style, how can blind change font?
  2. Export JPG: With PNGS with transparent backgrounds, there is less need for opaque JPGS.

Implemented in subsequent iterations

  1. Other simple logos: Youtube, for example.

Design layout

After completing the functions of the product, I also designed the layout. This time, I used Adobe XD. Recently, I like to use this tool to design the interface of the product, which is very convenient. The final design version is as follows:

Once the design is complete, it’s time to start coding.

Looking for library

At first, I considered using some UI Framework, but since I didn’t introduce the UI Framework in the beginning, I realized that I didn’t need the component library at all, so I just went ahead and used it.

After completing the basic interface, it was time to use some of the libraries involved. Thanks to the flourishing front-end ecosystem, I found the libraries I wanted to use from the source code of Picas and Carbon.

  • Dom-to-image: Converts DOM elements into images for download.
  • File-save: Call the system’s download interface in the Vue component to download the image

The other libraries THAT I use are

  • V-tooltips: User alert. Vue-tour was used before, but was scrapped because it was too jumpy.
  • Vue-analytics: Google Analytics tool under VUE, it is very convenient to call GA for statistics.

online

Once you’re done developing, upload the code to GitHub and get ready to deploy.

As mentioned earlier, I was considering using Netlify for deployment. It is very convenient to create a project directly on Netlify, select your project, and then fill in the command.

And configure the domain name, set their own domain name as the main domain name

Just a moment and it will automatically sign your domain name Let’s Encrypt certificate.

The last

I’ve said all I can think of about the story of this project. If you have anything to say, leave a message.