Great web design as a software engineer with TailwindUI
Tags: webdesign, tailwindui, personalsite, gatsby
Published: 2021-06-15 23:44:50

---
title: Great web design as a software engineer with TailwindUI
published: true
date: 2021-06-15 00:00:00 UTC
tags: WebDesign,TailwindUI,PersonalSite,GatsbyJS
series: Building a developer blog with GatsbyJS
canonical_url: https://MihaiBojin.com/personal-site/great-design-for-developers-with-tailwind-ui
---

![Photo: TailwindUI logo](https://MihaiBojin.com/static/fe3811748c41b542853029dd91209821/74167/tailwindui-image.png)

🔔 This article was originally posted on my site, [MihaiBojin.com](https://MihaiBojin.com/personal-site/great-design-for-developers-with-tailwind-ui?utm_source=external&utm_medium=organic&utm_campaign=rss "MihaiBojin.com"). 🔔

* * *

I already mentioned in my [previous post](https://MihaiBojin.com/personal-site/gatsbyjs-and-tailwindcss-tech-stack?utm_source=DevTo&utm_medium=organic&utm_campaign=rss "My GatsbyJS and TailwindUI stack") that I bought [TailwindUI](https://tailwindui.com/pricing "Tailwind UI components") and never looked back.

**Here's why...**

After playing with a few Gatsby starters, the best design I could come up with was:

[![Screenshots](https://MihaiBojin.com/static/6607c0128ef3434de00c5ff14f4bf25c/e9beb/screenshots.png "A screenshot of my site, in a browser and on a mobile device")](https://MihaiBojin.com/static/6607c0128ef3434de00c5ff14f4bf25c/966a0/screenshots.png)

It worked but was highly simplistic and did not cater to a great user experience.

[Adding TailwindUI to my Gatsby site](https://MihaiBojin.com/personal-site/gatsbyjs-and-tailwindcss-tech-stack?utm_source=DevTo&utm_medium=organic&utm_campaign=rss#tailwindui "TailwindUI set-up in GatsbyJS") was dead easy.

Once configured, all I had to do was decide which components to use to build my site. I settled on:

- the [Hero section](https://tailwindui.com/components/marketing/sections/heroes#component-b9bcab4538776a17fff93d18f82a8272) for my homepage
- a [3-column card for my blog section](https://tailwindui.com/components/marketing/sections/blog-sections#component-720cf60b960fecb99c45f462f24db2d9)
- a [single column content section](https://tailwindui.com/components/marketing/sections/content-sections#component-3f7a35fa653498b2c62441a98df3dc08) for my articles
- and a [footer with navigation links and a newsletter form](https://tailwindui.com/components/marketing/sections/footers#component-36e2a0eb52bc8006c006cae948ce6516) from which I removed the i18n form since I only write in English

Since I respect my users' privacy, I also wanted to display a cookie consent form in a [floating banner](https://tailwindui.com/components/marketing/elements/banners#component-39dd57897ef8e6d37aa07fbbafc188b1). If you're interested, you can read more [about how I set up a cookie consent banner](https://twitter.com/mihaibojin/status/1394077392763817985 "Setting up a cookie consent form in GatsbyJS").

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#thats-all-folks)That's all, folks

Getting to a good-looking responsive web design was as simple as that! I would have never been able to get here so fast on my own, for which I am thrilled to have bought _TailwindUI_. Hiring someone to design my site from scratch would have cost way more (both money and time) than what I spent so far.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#ps-every-site-needs-a-logo)P.S.: Every site needs a logo

It's a known fact that most projects fail before a name is chosen or a logo is designed; at least, that's what happened to me on multiple occasions! Since this is my site, I didn't have a naming problem, but I did consider how to procure a logo. I have fallen prey to this problem in the past and decided for this project to not let myself make the same mistake again.

A quick search led me to [LogoMaker.com](https://www.logomaker.com/ "Create a custom logo for your website"). After playing around with a few options, I landed on the one I'm currently using. It is not perfect, but it will do me well for a long time. Spending too much time on finding 'the perfect logo,' too early in the audience-building process, is time best spent elsewhere!

Once I had a logo, I also needed a favicon, for which I used [Favicon Generator](https://www.favicon-generator.org/ "Generate a favicon from an image").

Thank you and see you next time!

* * *

If you liked this article and want to read more like it, [please subscribe to my newsletter](https://motivated-founder-807.ck.page/db1cf284bf "newsletter link"); I send one out every few weeks!