Time to make something that looks good

I'm not a designer but I do find Design a fascinating world and of course it has many different specializations just like any field. "UI/UX Design" is the term you will most likely hear in the software development industry and they are an abbreviation for User Interface (UI) Design and User Experience (UX) Design. Design Thinking is captivating either and comes next on "industry appearance" but not linked with the context we are trying to talk about here. Today's post is all about making something that is visually pleasant (UI) and easy to interact with (UX)!

I will be honest with you and say: at some point I considered paying an UI/UX Designer to help me here because oh boy this is hard. Asking a Designer friend to do it for free is not an option (mental note: "Hey friend, can you create a logo for me?" should be banned from your vocabulary too). If you are interested in finding a freelancer to help, there are some sites out there that can help such as 99freelas, Workana or Design Crowd but I took a good look again at the budget available I have for this project (which is zero) and decided I'll try my best not to disappoint you!

This journey starts (at least in my head) with creating a "Identity" for the site.

Identity

Questions that were floating my head during this stage were: What should I call this blog? What is the main theme? Is this a specialized site (e.g.: software architecture, product management) or more generalist? What is the experience I want to provide? OMG I answer a question and a new one appear! (never forget that More questions = Better decisions)

I could follow the trend and create a blog with my name (e.g.: Christian Posta or Martin Fowler) but, hum, I don't know, I personally don't like it I would prefer to create a "brand" seems like more fun. Also the domain andredutra.com was not available. Yes at some point because I couldn't find a good name I almost gave up and went for it but it was not available 🙁. During desperation I also googled about "blog name ideas" and tried a business name generator but none of them helped.
Of course wanted a .com domain which is even harder and more frustrating! When you finally find a name that you think is cool and you like it next step is going to check if the domain is available and.... more frustration.

I don't remember how exactly I came up with the bytes with coffee name but the origin goes around the idea of inviting someone to talk about something (or chitchat) and you say "let's get a coffee". Also I like coffee a lot (and those laughs moments you have during a coffee with a friend/colleague). The idea was: The blog should be an invitation to you dear reader for us to engage and talk about something (like here, we are talking about UX/UI for the blog). So I decided coffee would be involved but I didn't want it to be confused with any coffee shop out there so something that resemble the tech industry should be present somehow. Ta-dã that's where bytes came in. That is a VERY simple explanation on how this happened but I want to assure you that this was not as clean and linear as it sounds. Final check: a .com Domain. YEY the byteswithcoffee.com domain was available so I grabbed it instantly and on impulse at namecheap.

Blog Theme and Template

In the previous post Blog Decisions you saw a blog site map I created, this was also used here to help me navigate and select one free Theme on the extensive list of themes that exist on the WordPress community. So many ready to use templates available in a Theme, so many features, so many possibilities... very easy to lose focus and think about that eCommerce to sell my favorite laptop sticker again but, no! Keep the focus! Blog, Fast, Simple, Easy to launch!

Honestly, I think I went backwards here, I found a free Starter Template (link) that I liked because it looked clean, it loads fast and is very easy to extend to the visuals I wanted (which means being lazy AND faster launch). Based on that Astra was selected as the WordPress Theme to use. It has some good amount of features in the free version (which is the one I'm using) and much more if you decide to pay for something.

Colors

If you never stopped for a minute to think about colors, just know selecting colors that "match" is important. There is even a Color Theory that help with that!

Also, if I had to guess, I would say that Blue is your favorite color just like mine! (ok, my guess was purely based on probability as blue is the world's favorite color).

With that very important information (that my favorite color is blue :P) something blue needs to be here! I picked a light blue that even have a name: Sky Blue!

Now it is time to apply the Color Theory and of course there is something that can help us, in this case I used Palleton to discover the color scheme I could use across the site like the "contrast shade of light salmon" that are used for links (HEX FF8669 and FFA38D).

Font

That was easy, Roboto it is! Easy to read, used widely and I really like it.

Images and Finishing up

Now that we have an identity, chose the WordPress theme and template, the colors and the font, create a logo was lined up next! Ok I don't want to spend too much time on it, something simple in black and white should do it to be more agnostic from the colors that were selected because I can change the site colors in the future if needed. For the logo, I've opened Canva and with a few searches (using free images and fonts) the first logo was done. Is it perfect? No. Could be better? Yes, but I'm happy with the initial result.

The blog was looking 80% done at this time so it was just missing some hero images to add to each of the sections. I really liked the Search by color functionality (All Creative Commons license) I found on google but the ones I really used I got from pixabay using search filters and trying to match the image content with what it should "represent" that section. Example: if you click on blog in the menu, the image is a typewriter with an iced coffee, click on recommendations what you get is an image containing books with of course a cup of coffee.

The last thing to do was to create a template for the social media posts in Canva using the same colors I have used in the blog. I know the image below is not too creative and not aligned with the prioritization of the social media algorithms but the template is something I use to be faster when I'm posting: just put the post title on the template and done! Well, I'm not posting that frequent as well so the template should be fine appearing once a month in people's timeline.

Wait a minute, you talked a lot about UI here! Where is the UX part?

Well, visual design is a component of UX. Also, while I was doing all of the above I was iterating and showing to a few friends to get their feedback (some sort of user research). I thought about the way to structure the information, the differences between screen sizes and readability and I'm measuring a few UX metrics to keep improving so UX is present all the time.

Test Test Test, create some dummy posts to see how it looks and feel in a PC and more than one Mobile Phone, fix some bugs, everything looks good so ready to get some content and do a formal launch!