Разместите свой проект бесплатно и начните получать предложения от фрилансеров-исполнителей уже спустя минуты после публикации!
1500 ₴

Вёрстка под Drupal и единая кнопка Вход/Регистрация

проект завершен


1) Вёрстка

PSD файл макета: http://dropmefiles.com/wQkGs


Используемые шрифты:

1. Основной текст: стандартный системный Arial

2. Заголовки: https://fonts.google.com/specimen/Martel

3. Заголовки в блоке с коллекциями: https://fonts.google.com/specimen/Noto+Serif


В шапке слайдер, максимально лёгкий и быстрый.


Блок "Most Popular":

a) На компьютерах с большим разрешением экранов @media (min-width: 1600px) отображаться 4 товара в ряду Most Popular

b) При разрешении @media (max-width: 1599px) and (min-width: 1280px) отображается 3 товара в ряду Most Popular

c) Если разрешение ещё меньше @media (max-width: 1279px) отображается лишь 2 товара в ряду Most Popular (возможно, ещё придётся сместить Deals, если слишком мелкое всё будет, проверим с iPhone 6)


Блок "Deals": должен быть слайдер с возможность прикрепить туда таймер акции на конкретный товар или категорию товаров. То есть пока что мы планируем 1 таймер + 1 просто баннер, который будет говорить о том, что мы предоставляем скидку 20% на первую покупку.

Блок "Collections": пока трудно сказать, нужно посмотреть насколько они будут мелкие на iPhone 6. Возможно, придётся чуть иначе организовать их на маленьких разрешениях.


Блок "Our Artisans": прокручивается вправо-влево (можно по 3 мастера за раз), перейти на страницу мастера можно по нажатию на его имя (специализацию) или фото. Тут теже правила, что и для количества товаров в блоке "Most Popular"


Пожалуйста, рассчитываю на Ваше мастерство, дабы главная страница грузилась максимально быстро. Спасибо! 🙂


2) Упрощенная регистрация/вход

Даже не знаю что лучше и удобнее, всплывающее окошко или отдельная страница?


Суть заключается в том, чтобы объединить вход и регистрацию в единое целое, при этом упростив регистрацию с привычной.

Вот практически идеальная её реализация, коротко и о главном: http://gml.link/

или лучше сделать однострочную: http://www.dejurka.ru/articless/creative-forms-design/


Как и в примере, выделять то поле, которое активно в данный момент (заполняемое). Это можно реализовать с помощью селектора псевдо-класса focus: в CSS, но мне это Вам рассказывать. 🙂


Изначальная форма должна представлять из себя 2 поля. 

Если ввожу не email:

bligTLtEgVFTnucK-E_rl2pZprre4hzrGOGM1TRrlQS8zgU1zgkOvbuN2Y56Qrp53g514wG44JRjjRkFxf1pnZQFoc3l-Fk551uCWlo_bXgiDhsE527SEJ4HQJo6Yi9q4PCwaW2a

Если ввожу email - появляется третья строка с Именем пользователя (в нашем случае скорее поле ”Full Name”):

_4AHQfvN3TKD8nHyo01w0MDk2bam7xVGg4R04zno8tSi2JycB_xwGIXK_PLK8domHoUhqVEbt4Bpv3-InjHLbfG4xsl3nD7uyJwa07zSKJzIuBBL651Dc98_BmcXWLPNWNdtR7Sv

Когда ввожу свой уже зарегистрированный email - выпадает поле с уже введённым моим логином (который естественно нельзя редактировать). 

WeMs0ESGdJ_QRj-cV4AP3uRyAJrl6cnSwTSzRi7WNjOgvcMg9MJysKv6I2rPrWttHAv1XeX_FD8UDbPdeW_vF-b4dokFItJvGqecp19Iq5cqc-baequnP6gMLoeSdNNhQmuJcTLd

Кнопки “Sign in” и “Register” чередуются, в зависимости от того найден пользовательский email в базе или нет. (как на скринах в статье)

Вся информация по задумке и логике работы на словах (начало и конец статьи): https://spark.ru/startup/getmylinks/blog/5555/razbor-formi-registratsii-na-sajte


Если лень всё самому писать 🙂

Некоторые готовые куски кода для реализации можно взять отсюда:

http://codeharmony.ru/materials/145

или отсюда

http://ruseller.com/lessons.php?rub=37&id=369

Только добавить надо туда ещё возможность входа через Facebook, кнопку “Forgot password?” и иконку “24/7 support” для связи (вместо выведенного email)


Если делать всплывающую форму - то сами формы можно найти в интернете или взять отсюда какую-либо, просто изменить цвета под подходящие нам и надписи на англ. Подсказки к полям внутри или сверху (как думаете, что лучше с точки зрения юзабилити?)

http://vladmaxi.net/web-developer/css/22-luchshix-formy-vxoda-i-registracii-na-sajte-v-html-css.html


Возможно, лучше будет сделать объясняющие надписи "Имя", "Адрес почты" над формами для ввода данных, а не внутри них.


Рядом с формой регистрации/входа должна быть ссылка на страницу “Privacy Policy” (которой у нас нет, но я на выходных попробую составить на примере других сайтов). Как и в футере.


Это пример, если у Вас есть лучше предложение как упростить и облегчить регистрации, подтолкнув посетителей к этому чудесному действию - с удовольствием выслушаю. Спасибо!


p.s. Напомните, пожалуйста, письмо которое отсылается пользователю после регистрации где редактируется?

Результаты работы

Просмотр приложений доступен только зарегистрированным пользователям.

Отзыв заказчика об исполнителе Артеме Г.

Качество
Профессионализм
Стоимость
Контактность
Сроки

Артём знает своё дело и умеет решать задачи целиком и полностью. Проблем не возникло. Спасибо!

Николай М. Николай Мельник | Персональный Персональный проект

Отзыв фрилансера о заказчике Николае Мельнике

Оплата
Постановка задачи
Четкость требований
Контактность

Рекомендую Николая как порядочного заказчика. Подробно описывает все пожелания, постоянно на связи, терпелив и легок в общении.

Артем Г. Артем Гончаров | Персональный Персональный проект



  1. 6 дней1500 ₴Победившая ставка
    Артем Гончаров
     1799  проверен   51   0


    Украина Киев | 22 февраля в 13:04 |

Заказчик
Проект опубликован
22 февраля в 13:04
9 просмотров
Поделиться