아름다운 양식을 만들기 위한 10가지 코드 조각

모든 웹사이트는 일반적으로 결제 페이지든 간단한 연락처 페이지든 어떤 유형의 양식이 필요합니다.

양식이 작동하는지 확인하는 것이 중요하므로 유용성이 1위입니다. 그러나 신뢰할 수 있는 디자인은 항상 더 매력적이기 때문에 미학도 중요합니다.

디자인 아이디어가 고민이라면 이 컬렉션이 도움이 될 것입니다. 무료 소스 코드가 포함된 10가지 양식 디자인 모음입니다. 다양한 색 구성표, 입력 필드 스타일, 활자체 스타일 등을 찾을 수 있습니다.

또한 이들은 모두 무료로 호스팅되므로 원하는 대로 코드를 복사하고 재생할 수 있습니다.

1. 머티리얼 디자인

지난 몇 년 동안 명성을 얻은 Google의 머티리얼 디자인 언어에 대해 모두 알고 있습니다. 머티리얼 디자인 개념은 Android 앱을 목표로 했지만 웹으로 빠르게 확산되었습니다.

Google 머티리얼 UI의 미니멀리스트 스타일이 마음에 든다면 Jon Uhlmann이 만든 이 머티리얼 양식을 확인하세요.

CSS/HTML 전처리를 위해 Sass 및 Pug에서 실행됩니다. 또한 매우 가벼운 형태이며 머티리얼 디자인 요소는 모든 브라우저에서 동일하게 렌더링되어야 합니다.

모든 머티리얼 디자이너들에게 진정한 영감을 줍니다.

2. 바닷속

수중 스타일로 지어진 이 독특한 접촉 형태로 바다로 여행을 떠나보세요.

전체 페이지 배경은 반복되는 패턴을 사용하여 바닷물의 파도를 만듭니다. 그러나 작은 애니메이션 물고기는 배경 이미지에서 볼 수 있는 완전히 다른 이야기입니다.

또한 입력 필드를 선택할 때마다 친절한 문어가 인사를 위해 나타납니다. 얼마나 기이한!

3. 부트스트랩 3 형식

기본 부트스트랩 스타일은 꽤 지루하고 이 시점에서 정말 익숙해졌습니다. 동일한 일반 스타일의 부트스트랩 사이트를 볼 때마다 디자이너가 맞춤화하기에는 너무 게으르거나 경험에 너무 집중해서 신경 쓰지 않는다는 것을 상상할 수 있습니다.

이 BS3 형식은 부트스트랩 프레임워크 위에 구축하여 작업을 올바르게 수행합니다. 입력 필드에 몇 가지 스타일을 변경하고 제출 버튼을 사용하여 부트스트랩인지 몰랐던 사랑스러운 부트스트랩 양식을 만듭니다.

BS3 레이아웃을 실행하는 경우 이와 같은 양식 재작업을 확실히 고려하십시오. 보다 맞춤화된 디자인을 위해 Bootstrap을 통해 구축된 타사 프레임워크를 사용해 볼 수도 있습니다.

4. 우아한 접촉

Font Awesome 아이콘과 몇 가지 기본적인 반응형 스타일이 있는 이 문의 양식은 정말 독특한 것 중 하나입니다.

특히 더 큰 디자인의 경우 항상 양식에 아이콘을 추가하는 것이 좋습니다. 필드가 많을수록 더 많은 망설임이 생기고 사용자는 문제 없이 양식을 통과하기를 원합니다.

이 간단한 아이콘은 각 필드에 신호를 추가하여 어떤 종류의 정보가 필요한지 한 눈에 쉽게 알 수 있습니다.

그리고 조금 독특한 것을 찾고 있다면 다른 아이콘 글꼴을 믹스에 추가해 보세요.

5. 작은 로그인

때로는 작은 것이 정말 최고의 것입니다. 그리고 이 양식 UI는 정말 놀라울 정도로 축소된 로그인 양식을 만들어 이를 증명합니다.

타이포그래피는 양식 디자인과 관련하여 거대하며 로그인 필드에 작은 서체를 선호하는 경우가 많습니다. 웹사이트와 작은 텍스트가 레이아웃에 얼마나 잘 조화되는지에 따라 다릅니다.

그러나 이 양식에는 양식 프로세스를 설명하는 측면에 작은 진행 단계 그래픽이 매달려 있습니다. 필드가 두 개뿐인 것은 어리석은 것처럼 보이지만 더 큰 등록 양식의 경우 진행률 표시줄이 사용자 경험에 매우 중요합니다.

6. 로그인 및 가입 콤보

로그인 시간을 줄이려면 로그인 양식과 등록 양식을 한 페이지에 결합할 수 있습니다. 생각보다 훨씬 쉽고 이 pe에서 멋진 데모를 볼 수 있습니다.

로그인/등록 링크를 클릭할 때마다 양식을 회전하는 아름다운 사용자 정의 애니메이션을 볼 수 있습니다. 모두 jQuery를 통해 구동되지만 애니메이션은 CSS를 통해서도 작동할 수 있습니다.

그러나 이 레이아웃에서 "숨겨진" 양식의 하단 부분이 전환 후에도 여전히 보이는 한 가지 버그를 발견했습니다. CSS 가시성 속성을 사용하거나 위치를 경계에서 조금 더 이동하여 이 문제를 해결할 수 있습니다.

7. 칠판 연락처

다음은 페이지에서 확실히 튀어나온 고유한 양식 스타일입니다. 이 칠판 접촉 양식은 배경 그라디언트를 사용하여 칠판에서 반사되는 빛의 효과를 만듭니다.

게다가 나무 테두리는 이것을 실제 거래로 판매하는 데 도움이 됩니다.

제작자 Greg Sweet는 일반적인 사람의 손글씨처럼 보이는 사용자 지정 웹 글꼴도 사용합니다. 이것은 양식에 마지막 터치를 추가하는 데 적합하므로 실제로 학교로 돌아간 것처럼 느낄 수 있습니다.

8. 신용카드 결제

나는 많은 체크아웃 양식을 보았지만 Fabio Ottaviani의 이 디자인은 아마도 내가 우연히 본 것 중 최고일 것입니다.

JavaScript를 사용하여 입력 필드 유효성 검사를 처리하지만 신용 카드는 모두 CSS입니다. 양식에 입력한 숫자를 기반으로 애니메이션이 적용되며 신용 카드 CVV 번호를 입력할 때 뒤로 회전하기도 합니다.

9. 사용자 정의 가입

순수한 CSS 가입 양식의 경우 이 스니펫은 실제로 비스킷을 사용합니다. 작은 그림자가있는 단일 컨테이너에서 휴식을 취하는 것은 매우 간단한 느낌입니다.

그러나 입력 필드는 각 아이콘에 해당 아이콘을 추가하는 데 필요한 공간을 포함하여 크게 사용자 정의됩니다.

필드를 강조 표시할 때마다 테두리가 이끼 녹색으로 밝아집니다. 아이콘의 색상도 변경되는 것을 알 수 있습니다! 신용 카드의 선택 메뉴에도 고유한 사용자 정의 스타일이 있습니다.

이것은 순전히 CSS로 만들기에는 꽤 복잡한 효과이지만 개발자 Jose Carneiro가 해냈습니다.

10. 플로팅 라벨

사용자 정의 부동 레이블은 양식 디자인에서 내가 가장 좋아하는 트렌드 중 일부입니다. 그들은 항상 사용성을 향상시키는 데 도움을 주며 한 번 작성하더라도 필드에 대한 명확한 설명을 제공합니다.

CSS3 및 Compass에서 실행되는 이 부동 레이블 양식을 살펴보십시오.

Creator Anton Simanov는 레이블에 jQuery를 사용하지만 플러그인 없이 모두 맞춤 코딩됩니다. 그의 솔루션은 텍스트 영역 및 선택 메뉴를 포함한 모든 일반적인 입력 스타일에서 작동한다는 것은 말할 것도 없습니다.

어떤 스타일의 양식을 선택하든 이 갤러리가 앞으로 나아갈 수 있는 몇 가지 아이디어와 스니펫을 제공할 수 있기를 바랍니다.

디자인 패턴을 더 많이 연구할수록 자신의 프로젝트를 위해 더 많은 아이디어를 구축해야 합니다. 그리고 CodePen은 이러한 아이디어를 모으기에 좋은 사이트입니다.