Thanks to the themes I develop every now and then people who have bought them contact me to ask me if I can work on some of their projects either designing and developing a custom theme or developing other projects, unfortunately most of the time it is not possible for me because I don't have much free time at the moment as I have a full time job. However a few months ago I received a message from Rie where he invited me to work on a new project that I found interesting as it was not too big and where I would also have the opportunity to use Astro as a framework to create the project's website.

For some time I had heard very good references about Astro and I really wanted to develop a project using this framework, I thought it was an excellent choice because the website should be static, fast and lightweight. In the end I agreed to work on the project and now that it is finished I can write a little about it.

General Data Protection Regulation

Basically the project is focused on creating a website with the complete information of the General Data Protection Regulation which can be consulted by people in a quick and easy way.

At first it may seem that it is a very small or simple project but it is worth remembering that the entire regulation consists of 99 articles organized in 11 chapters in addition to 173 unofficial recitals that can also be consulted on the website, this results in the site having about 300 pages full of legal texts.

Fast, lightweight, appealing and privacy-friendly website

Speed and performance

One of the main requirements was that the website had to be very fast, that is to say that it should load in the shortest time possible, for this obviously the site had to be as light as possible. To satisfy this requirement I chose to use as few assets and libraries as possible, in fact the icons for example are part of a SVG file that weighs only 3.3 KB and for the interactive parts I used Alpinejs which is a very light library compared to others.

The size of the page when loading for the first time is about 663 KB but thanks to being hosted on a CDN and compression the transferred size is reduced to just 284 KB, this makes it load in just one second or sometimes in half a second depending on the connection, super fast 🤯.

Friendly and minimalist design

Perhaps one of the biggest challenges of this project was that the website had to be appealing and friendly even though the content was only text. To achieve this I decided to use a typography that was friendly, easy to read and that would allow the content to stand out and not be tedious to consume, in this case I decided to use Roboto for the body text and Roboto Slab for the headers to give them more personality and make them more interesting.

As far as color is concerned I decided to use very bright and friendly colors on the home page to emphasize the first 5 chapters of the regulation and thus invite the user to read more about it since these are the most important and have a greater relevance. I also used various shades of blue in certain elements to provide a sense of tranquility to the user while reading content on legal issues.

Overall the design of the website is clean and minimalist with a layout focused mainly on reading but without leaving aside some small animations and effects to bring a touch of fun to the site, after all, who said that a site of this type should be boring? 😄

Privacy first

From the very beginning Rie made a lot of emphasis that the website should respect people's privacy, after all this is a site containing data protection information 🙈. To meet this important requirement I had to ensure that both the CDN, Astro and the third party libraries used did not violate users' privacy through the use of cookies, logging of IP addresses or sending certain information to third party sites.

At this point it is worth noting that the site does not use any analytics or advertising plugins that could compromise the privacy of users, this consequently also helped to maintain a fast loading site and improve the SEO of the site.

Final thoughts

I am glad to have had the opportunity to work on this project because in this case it is always nice to be able to design a site from scratch and then develop it, I love to participate in the process from the conception of the idea to the release of the final product.

Also this project allowed me to learn a lot about Astro and now I can say that I feel confident to use it in any future project as it is a great framework that offers a nice development experience.

Finally I would like to thank Rie for trusting me and my work, I am very honored that she is happy and delighted with the result 😍.

The Ghost theme marketplace has a wide variety of templates, all of them focused on different types of content and different types of customers. However I realized that there was practically no theme that focused 100% on images, there was a need for a theme that would be useful for marketing companies or for photographers or simply for publications whose main content were images or photographs.

The idea of creating a theme whose main content would be images seemed very interesting to me so I decided to go ahead with it. I also thought that it would be an important challenge since both the design and the code must be prepared to adapt appropriately to the wide variety of situations offered by a content management system like Ghost.

Design principles

To give emphasis to the images of the articles on the home page I decided to create a layout made up of tiles of different sizes resulting in a mosaic which adapts according to the width of the screen. On the article pages, images can be displayed in various types of layouts and complete galleries can also be viewed in full screen.

Typography is a crucial element of this theme, that's why I decided to use Atkinson Hyperlegible which is a typeface that focuses on letterform distinction to increase character recognition, ultimately improving readability.

On almost every page Galerie makes intensive use of white space so that the content can breathe, and also uses a well-defined color palette to give it a touch of elegance and personality.

Responsive design

Galerie's responsive design allows it to adapt correctly to any device, no matter the size or aspect ratio, the content and images are always displayed correctly.

Other very important aspects that were taken into account at the time of design and implementation are accessibility and usability. The theme uses contrasting colors allowing for easy reading, it also makes correct use of semantic elements and the necessary attributes so that people can consume the content and navigate easily, even with a keyboard.

Galerie responds and takes into account the user's preferences, and also has many optimizations for the site that uses it to load quickly and for optimal performance.

Launching and learnings

Galerie is now available in the Ghost theme marketplace and has been well received, so far I have received valuable feedback from my customers which has helped me to implement some improvements and solve some issues. Personally I think that users are the ones that really make a product better because they find problems that we could easily overlook and also because they constantly contribute fresh ideas.

Over time I have accumulated many sources to keep myself updated on topics related to design and frontend development as I am very passionate about these topics, however, that has also meant subscribing to countless newsletters and following many people and topics in various social networks. The problem is that over time you lose track of where you leave your email address, you start receiving spam, not all the content is really relevant and everything is chaos.

So one day I thought that maybe I was not the only one who might have this problem and decided to do something about it. Mabel is my proposal to try to bring some order to this chaos, the idea is that with a single application both designers and developers can read only relevant news about design and frontend development to stay updated in an easy and convenient way, and above all without giving your email address to third parties.

Design and implementation

Once I defined the problem I wanted to solve, I made a list of the functionalities that the app would offer from the beginning, with the purpose of restricting the number of them in order to be able to launch a functional product in a reasonable time. This list also helped me to carry out a research process to identify the technical challenges and technologies that I could use for the development of the app.

Afterwards I made a low fidelity prototype on paper to define and organize the different sections of the app, as well as to define the information that would be shown in each of them. At the same time this process helped me to discard ideas and rethink some others. Once this process was finished I went on to design all the screens of the app using the typography, colors and illustrations that best suited the identity I wanted it to communicate.

Once the design was finished I started with the development of the app, I decided to use React Native so that with a single code base I could distribute it for both iOS and Android. The app itself may seem simple but in reality the project consists of other parts such as a Firebase database where all the information of the articles is stored, a content manager to manage the information visually (Retool), a series of cloud functions to synchronize the information of the content manager with the search engine used by the app (Algolia), a system to integrate push notifications in the app and another system to make in-app purchases within the app (Revenuecat).

Release and next steps

The app is now available on both the App Store and Google Play and so far I have fixed some issues and improved some user experience issues thanks to user feedback. I am constantly adding more and more quality articles to the app and I am also planning some future updates where I will implement new features and changes to adapt to the evolution of the industry both in design and frontend development.

Thanks to the startup boom of the last few years, the marketing efforts of startups have increased too much as they all want to be well positioned in the different search engines in order to attract more customers and therefore generate more revenue. One of the marketing efforts of such companies is to maintain a blog where they can publish articles with information that is directly or indirectly related to their products in order to generate more leads, although it also serves as a means to announce the latest news about their business.

In recent years more and more people and companies have turned to Ghost as a great alternative to Wordpress to create and maintain their own blogs, for this reason I decided to create a new theme for Ghost that will focus mainly on startups and companies with online presence. Firma is my proposal for this kind of companies to offer their visitors a comfortable way to consume their content.

Design principles

Firma was designed with the following objectives in mind:

1. Be able to adapt perfectly to the identity of any brand.
2. Offer the user a simple navigation and highlight the important elements from the rest.
3. Be accessible so that as many people as possible can consume the content without problems and offer a friendly user experience.
4. Offer a deep level of customization and be ready to be extended if desired.
5. Be extremely fast so that the user can see the content as quickly as possible.

Product performance

Firma has been available in the Ghost themes marketplace for a year and so far it has been my best selling theme, there is no doubt that the demand for this type of products exists and continues to increase day by day. During this time I have also received very good comments and reviews from users who have purchased it, which I am very grateful and has motivated me to keep the theme updated during this time. I have also had the opportunity to see the theme working on multiple blogs of different types of companies and I find it amazing that I have been somehow part of their marketing efforts and increasing their online presence.

Personal findings

During this time I have realized that people value very much the support I give them when they have doubts related to the theme or when they want to know how to adapt something according to their needs, I think that support is part of the product itself and that a good support even influences people to recommend a product to other people. I also realized that a clear documentation helps people to get the most out of a product and at the same time substantially reduces the amount of support requests so it is good to invest the time needed to write a good documentation.

In recent years, dark mode has become one of the most requested features by users in almost every application and websites. At first it was thought that it might just be a trend and nothing more, but since major companies have implemented such functionality in their own products, many have followed in their footsteps and now it is safe to say that dark mode is here to stay.

The above has led to designers having to adapt their designs to support dark mode, which often means working twice as hard. Implementing dark mode in a product would seem to be a simple task but in reality it is not so much, especially if it is a sufficiently large and complex project.

The idea for a plugin

While working on a couple of projects where I had to implement dark mode, I realized that the process of adapting a design was very time consuming and tedious. At that time I was using Sketch to design and I started looking for a plugin that would speed up the process but unfortunately I could only find a couple of options that were either too cumbersome to use or just didn't work so I decided to create my own plugin that was easy to use and that actually worked.

After developing a first prototype I tested it with the designs I was working on and since it worked very well I decided to implement some adjustments and improvements in order to publish it in the Sketch plugin directory so that other designers could use it. Over time the community started using it and I received good feedback that allowed me to fix some bugs and implement new features.

Accelerating our productivity

Once you set up the color palette you want to use in dark mode using the Sketch Dark Mode plugin, you can start generating from individual artboards to entire documents in a matter of seconds, as you can see in the GIF above. I have used the plugin in different projects and it has helped me a lot, it's great to see how the whole tedious process can be automated in this way.

It just works.

As you can read in the title of this section, Weiss Pro is my first premium Ghost theme. After having launched an open source theme I decided to create a premium one because the free one was very well received and has been used by many people so far, also because I gained experience and now I feel confident that I can create a product that people want to pay for, to tell the truth it took me a little work to overcome the fear of failure but now I can say that it was worth it.

The main difference between Weiss Pro and my previous free theme is that this one has support for Members which is a feature that allows creators to monetize their content based on a subscription model, among other additional features. Weiss Pro has a more polished and neat design, also the source code is better organized and cleaner.

Design principles

From the beginning I was clear that I wanted Weiss Pro to have a sober and elegant look where the content was what stood out the most, to achieve this I decided to use two fonts that combined get along very well and provide exactly the look I was looking for, these fonts are Playfair Display for titles and Roboto for the rest of the text elements.

The theme has a light and a dark mode, in both cases I use colors that contrast enough so that the content can be read without problems for most people. The white space around the content is abundant so that it can breathe and be digested more easily, also the geometric figures used give it an interesting touch and are intended to attract the user's attention.

Target market

Weiss Pro focuses on publications that publish content with a more or less serious tone, for example educational, research, technological, cultural, travel, fashion, religious, to name a few, although it can also work well for a personal blog or a magazine-type blog.

So far I have had the opportunity to visit multiple blogs that use my theme and I have noticed that most of them are part of the groups I mentioned in the previous paragraph so I think I was not too far from reality to think that this design would attract the attention of that audience.

Final thoughts

This project has taught me many things, for example, I learned that good documentation is useful for both customers and for me, also that sometimes people value even more a good support than the product itself. I also learned some things related to marketing which is useful to make a product known and make people interested in it and more likely to buy it.

To be honest, I had never stopped to think how complicated and tedious it could be to design something involving maps until I had to do it, I immediately realized that the mere fact of inserting a map was a task of trial and error. The first time I did it I had to take many screenshots, crop and try to place the map in the right position to fit the design I intended to do, no fun at all.

I remember at that point I stopped working on the design I was doing and went to work on developing a plugin that would allow me to do all that work in a matter of seconds and in a much more practical way. The first version was very basic but it worked well enough to meet my own needs, no more screenshots!

Better process, better maps

Thanks to Sketch Map Generator, to insert a map you only need to enter some location (or simply drag the map preview as you wish) and the plugin takes care of the rest. Currently you can generate maps using Google Maps or Mapbox, you can also set some settings such as zoom level and map style, the result is a centered map that fits perfectly to the size of the object where it will be inserted. The plugin is able to save your settings so you can generate more maps even faster, even with a keyboard shortcut it is possible to re-insert the last generated map, all this makes the process much faster and efficient.

Plugin adoption

Since the first version the plugin has been used by many designers out there, during all this time I have received feedback and ideas to add more features. It's nice to know that the solution I developed to improve my own workflow has also been useful for many other people, I'm glad that in some way I've put my two cents to the community.

Some years ago I was looking for a platform to create my own blog (in which I should write more often 😅) and after trying several options I decided to use Ghost because it was just what I was looking for, it was simple, fast and easy to configure. For a while I used some of the official themes that were available at that time until one day I thought it would be a good idea to create my own theme to use it in my personal blog and why not so that other people could also use it in their own publications.

First time designing a Ghost theme

This was my first time designing a Ghost theme so I had to document myself to make sure that my new theme complied with all the guidelines that Ghost asked for in order to accept a theme to their theme marketplace. In addition to that I also took inspiration from other themes and even more important, I had to learn how to use Handlebars syntax and how to organize a project of this kind.

Basically my goal was to design a theme that was simple, clean and minimalist, so I decided to use a friendly and easy to read typography, and I also decided to use soft and light colors.

From a premium theme to an open source theme

From the beginning my idea was to develop Liebling to be able to sell it in the theme marketplace as a premium theme, however, when I finished it I decided to do something completely different, instead I decided to release it as an open source theme so I uploaded it directly to GitHub so anyone could download it for free and also they could adapt it to their needs and even create a new theme based on it.

At first I thought that my theme would go unnoticed or that maybe not many people would use it but I quickly realized I was wrong, soon different people began to create issues in the repository to report problems, they also began to request new features and even began to create pull requests to improve the theme in various aspects.

As time went by I received emails from people thanking me for releasing Liebling as a free theme and sending me links to their publications to show me how they used it and how they had adapted it to their needs, I even realized that other developers were using it as a foundation to create other themes.

By the way, even though Liebling is free, during this time I have received multiple donations which have helped me to continue with the desire to maintain this project.

Some interesting numbers

Next I would like to share some numbers that are worth highlighting:

• Almost 1.2k stars on GitHub so far (my most popular repository 🤩).
• Almost 600 forks
• More than 60 contributors
• Translated into more than 30 languages
• More than 150 pull requests
• More than 350 issues created
• More than 80 releases

Conclusion

During all this time I have learned a lot about theme development for Ghost and Liebling has been a very important part of it because it was the base that allowed me to create premium themes that I have been able to sell and that fortunately are used by many people.

Nowadays I still maintain Liebling and from time to time I release new versions to keep supporting the constant Ghost updates and also to fix some issues.

I can say that I am very satisfied with the reception that Liebling has had during all this time and I am happy to know that it has been of great help to other people and not only to me 😄.