안녕하십니까

제 이름은 Artem Shar(Sharyukov)입니다. 저는 2016년부터 웹/프론트 엔드 개발자로 일하고 있습니다. 2019년 말에 평소처럼 블로그가 있는 새로운 개인 웹사이트를 만들기로 결정했습니다... 새 사이트는 아직 준비되지 않았습니다. 하지만 프로세스를 더 흥미롭고 빠르게 만들기 위해 로고 생성 경험을 공유하고 싶습니다. 이 작업이 실제로 완료되었기 때문입니다. 지금은 이렇게 생겼고 마음에 듭니다.



도구 없이 SVG와 CSS를 이용하여 만든 로고입니다.

<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);
}

대화형 동작을 추가하거나 색상을 변경하거나 그림자를 가지고 놀고 싶을 때 간단하고 제어할 수 있습니다.

테이프를 약간 뒤로 감습니다. 이 버전 이전에는 비슷한 것이 있지만 그림자가 없습니다. CSS 코드를 제거하면 다음과 같이 표시됩니다. 한동안 이 로고와 함께 살면서 일부 소셜 네트워크의 아바타에 넣었습니다. 그리고 삭제하고 싶지 않았습니다.



이제 테이프를 4개월 전(2019년 10월) 처음으로 되감아 보겠습니다.

첫 번째 단계

내가 처음 시작한 것은 간단한 펜과 종이였습니다. 어떤 디지털 도구에도 국한되고 싶지 않았기 때문입니다. 그리고 나는 약 일주일 동안 실험했습니다. 나에게 일어난 첫 번째 일은 내 이름과 성의 글자를 가지고 노는 것이었다. 또한 Zeit company 디자인에서 영감을 받았습니다. 그들의 스타일은 명확하고 단순하며 강합니다. 하지만 너무 강하거나 날카로운 것을 만들고 싶지는 않았습니다. 삼각형을 사용하려고 여러 번 시도했지만 결국 떨어뜨렸습니다. 나는 내 성격을 담고 있는 무언가, 즉 자연, 영원히 좋아하는 것, 아마도 뿌리에 대해 생각했습니다. 내가 근처에서 자랐기 때문에 태양, 바다였습니다 Gulf of Finland , 일출과 일몰, 그리고 겸손하고 맑고 어두운 것. 그리고 친구에게 A와 S로 아이디어를 도와달라는 편지를 썼더니 친구가 무언가를 던졌습니다. 그것이 나온 것입니다. 품질이 좋지 않아 죄송합니다.

Inkscape SVG + 반응 앱

내가 취한 다음 단계Inkscape - 벡터 그래픽을 만들기 위한 좋은 무료 도구입니다. 그리고 펜으로 그린 ​​것을 반복하기 시작했습니다.



그리고 그들은 너무 나빠 보였습니다... 그제서야 도구의 기능을 사용하려고 노력해야 한다는 것을 깨달았습니다. 결국 펜은 다소 제한된 도구이기도 합니다. 쉽지 않았습니다. 글꼴, 양식 및 그림자를 가지고 놀기 시작했습니다. 일반적으로 팽창해 보이지만 그중 일부는 마음에 들었습니다. 여기에 몇 가지 좋은 예가 있습니다.

여기에서 내 "태양 원"의 첫 번째 버전을 볼 수 있습니다 :)


나는 Inkskape에서 많은 변형을 만들었습니다. 명확한 파일 이름을 만드십시오 - 아니요, 불가능합니다 :D


그리고 나는 그것에 정착했습니다. 나는이 반투명 유리를 사이트에 삽입했을 때 연주했던 색상이 정말 마음에 들었습니다.


시간이 지나면 불안정함과 불확실성을 느끼기 때문에 그대로 멈췄습니다. 서클로 돌아왔습니다. 두 가지 색상만 선택할 수 없었기 때문에 페이지에 애니메이션 색상을 적용했습니다.



그 다음으로 저는 이 원을 사이트에서 일몰이나 일출과 같은 테마 스위치로 전환했습니다.



최근에 나는 내가 너무 많이 플레이하고 있고, 이 모든 것에 갇혀 있고 단순하고 정적인 사이트를 만드는 내 목표로 움직이지 않는다는 것을 다시 깨달았습니다. 테마 스위처가 포함된 이 프로젝트는 내가 복잡하게 만들어서 중단되었습니다. 나는 HTML, CSS를 가져 와서 현재 SVG 로고를 손으로 만들었습니다. 그리고 저는 이 간단하고 방대한 결과에 만족합니다.



나중에 그림자로 흥미로운 작업을 할 수도 있지만 덜 중요합니다.

나는 내 사이트를 계속합니다. 다음 단계는 블로그 부분입니다. 시작을 위해 이 기사와 smth를 넣을 것입니다.

결론

디자인 도구에 국한되지 않고 아이디어 생성을 위해 종이와 펜으로 시작하십시오

자신의 고객인 경우 디자인 프로세스가 너무 오래 걸릴 수 있습니다(제 경우 휴식 시간을 포함하여 약 4개월의 자유 시간). 목표 기억하기

형태, 색상, 디자인 과정에 대한 느낌을 들어보세요. 예를 들어 삼각형보다 동그라미가 더 좋은거같아요 :D

자유롭게 내 영어를 고쳐보세요.
주목 해 주셔서 감사합니다! 좋은 코딩과 디자인 되세요!