Hello

My name is Artem Shar (Sharyukov), I'm Web/Fron-End developer since 2016. In the end of 2019 I decided it was time to make a new personal website with a blog like as usual... The new site is not ready yet. But to make process more interesting and faster, I want to share my experience of logo creating, because this thing was really done. Now it looks like this and I like it.

This logo, made by using SVG and CSS without tools.

<div class="logo-wrap">
  <svg class="logo-svg" viewBox="0 0 200 200" width="50px" height="50px">
     <circle cx="100" cy="100" r="100" fill="#313131"></circle>
     <circle cx="100" cy="100" r="75" fill="#ccc"></circle>
     <circle cx="100" cy="100" r="50" fill="#fff"></circle>
  </svg>
</div>

.logo-wrap {
  --color-glow-1: #080808;
  --color-glow-2: #D9FBFF;
  ...
}
.logo-wrap:after {
  ...
  box-shadow: 8px 10px 30px var(--color-glow-1), 5px 5px 20px var(--color-glow-2);
}
.logo-wrap:before {
  ...
  box-shadow: 8px 7px 20px var(--color-glow-1), 7px 7px 15px var(--color-glow-2);
}

That's simple and controlled, if I want to add some interactive behaviour or change colors or play with shadows, etc.

Rewind the tape a bit back. Before this version, I have something similar, but without shadows. If remove CSS-code, it will looks like this. I lived with this logo for a while, putting them on avatars of some social networks. And I didn't want to delete it.

Now let's rewind the tape to the beginning, a 4 of months ago (october of 2019).

First steps

The first thing I started with was a simple pen and paper. Because I didn't want to be limited to any digital tool. And I just experimented during about one week. The first thing that occurred to me was to play with the letters of my first and last name. Also, I was inspired by the Zeit company design. Their style is clear, simple and strong. But I didn't want to create something too strong or sharp. Lot of times I tried to use the triangle - in the end I dropped it. I thought about something, that contain my character: nature, forever favorite things, maybe roots. It was sun, sea, because I grew up near Gulf of Finland, sunrises and sunsets and something modest, clear, dark. Also, I wrote to my friend asked for help me with ideas with letters A and S, and she threw something. That's what came out of it. Sorry for the poor quality.

Inkscape SVG + React App

Next stage I've took Inkscape - the good free tool for creating vector-graphics. And I started trying to repeat something I'd drawn with a pen.

And they looked so bad... then I realized that I should try to use the tool's features. After all, the pen is also a somewhat limited tool. It wasn't easy, I started playing around fonts, forms and shadows, In general, it looks dilatant, but I liked some of them, here are some good examples.

Here you can see the first version of my "sun circles" :)

I made a lot of variants in Inkskape. Make clear filenames - no, it is immpossible :D

And I settled on that. I really liked this translucent glass, the color of which I played when I inserted it on the site.

After a time, I stopped like it, because I feel instability and uncertainty with it. I've back to circles. I did animated colors on my page, because I couldn't choose just two colors.

The next thing that I did, I turned these circles into a theme switch on the site, which is like sunset or sunrise.

Recently, I realized again that I was playing too much, that I was stuck in all this and I'm not move to my goal - to make a simple, static site. This project with theme switcher was stopped, because I complicated it. I've took HTML, CSS and I made current SVG logo by hands. And I'm happy with this simple and volume result.

Maybe I'll do something interesting with shadows later, but that's less important.

I continue do my site, next step is blog part, where I'm goint to put this article and smth else, for start.

The conclusion

• Don't limited to design tools, but start with paper and pen for generate ideas
• When you are your own customer, design process is can be too long (in my case, about 4 of month in free time with breaks). Rememeber your goal
• Listen to your feelings about the forms, colors and design process. E.g. it seems, circles I likes more than triangles :D

Feel free to fix my English.
Thanks for your attention! Have a nice coding and design!