Творчество Deen Foool
1024

Моя первая вёрстка

Ну тип этого, сильно палками не бить, работал без Фш.

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Deen Foool", "author_type": "self", "tags": [], "comments": 23, "likes": 0, "favorites": 2, "is_advertisement": false, "subsite_label": "craft", "id": 51696, "is_wide": true, "is_ugc": true, "date": "Sat, 25 May 2019 10:08:11 +0300" }
{ "id": 51696, "author_id": 138753, "diff_limit": 1000, "urls": {"diff":"\/comments\/51696\/get","add":"\/comments\/51696\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/51696"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 87848, "last_count_and_date": null }
23 комментария

Популярные

По порядку

Написать комментарий...
4

А это что, если не секрет? Сайт? Приложение? Игра?

Ответить
0

Ребят, было написано в 2 часа ночи, знаю что криво и шрифт отстойный, буду делать лучшее, так как только начинаю работать в фронтенд.

Ответить
5

С таким скиллом и уже работать? Зачем выкладывать то, что ты сам знаешь криво и отстойно?

Ответить
0

Я не хочу оправдывать себя, что это первый раз, что верстал ночью, и тд. Когда я только собирался заливать сюда, я знал, что покажут изъяны и многое что упустил. Первая вёрстка была залита чтобы я мог видеть как люди реагируют, на подобное и в последующем я буду учитывать ошибки и верстать лучше.

Ответить
0

Для вдохновения полистай uplabs, behance, dribble

Ответить
0

Ну так это же просто форма с фоном. На что смотреть-то? На каком-нить codepen таких "работ" миллионы

Ответить
2

Цветовая схема нравится, elevation формы над фоном подобран неплохо.

Что я бы делал по-другому:
- шапка формы слишком шакальная, я бы подумал о flat решении, сейчас получается пирамидка из слоёв - не круто с кучей теней;
- заголовку формы (как и всем input label'ам) нужен другой шрифт, менее жирный, менее насыщенный;
- с пэддингами перегиб, можно смело делать инпуты шире по отношению к форме;
- кнопку я бы выровнял и оставил внутри формы (так проще разрулить взаимодействие теней друг с другом). Можно оставить её в лифте, как сейчас - но тогда нужно разрулить elevation контейнера формочки и самой кнопки, будет сложнее;
- подумай о UX-свистелках, маска ввода почты, показать пароль и всё такое.

Ответить
1

Я рад, что меня понял правильно и дал совет

Ответить
2

Это вам на Биханс или Дриббл с этим

Ответить
1

Ужас. Практикуйся.

Ответить
1

Нужна новая рубрика - "Я сделяль" - чтобы не отписываться от "Творчества".

Ответить
0

А есть какая-нибудь такая рубрика?)

Ответить
1

Если тебе этот фидбек поможет, конечно, то держи.

P.S. Не знаю, на самом деле, зачем тебе на этой стадии фидбек. Я думаю, ты итак понимаешь, что такая работа никуда не годится и пока не будешь с грамотным подходом делать — показывать особо нечего.

1. Надписи. Определись, ты даешь русский интерфейс или английский? Выбери что-то одно. Не надо совмещать, если это реально не нужно.

2. Визуальная часть. Ты работаешь не с макета другого художника, а со своей фантазией и у тебя пока еще отсутствует чувство прекрасного. Я не говорю сейчас о совместимости формы и фона, а вообще о дизайне.

Советую просто посмотреть на UI разных проектов, ОСей (mac, linux), сайтов. Это необходимо для расширения кругозора. Прям идешь на deviant art и вбиваешь UI в поиск.

В общую картину твоя форма не вписывается. Я бы взял тот аквариум слева и на основе его цветов сделал форму. Кнопка и шапка в темных ночных тонах. На шапке градиент, может быть. Форма с Glow эффектом (свечение, может тоже градиентное). Твоя форма в данном случае может быть ночной, приятной. Сам фон мог бы быть прозрачным с эффектом blur (размытие), под размытием фон с рыбками.

3. По верстке. Полагаю, что там ничего особо градостроительного нет. Кнопку центрируй, цвета подбери получше. Шрифт не в тему. Надпись в шапке посвободней себя чувствовать должна. Отступы внутри шапки побольше по вертикали сделай.

Тебе нужна визуальная база дизайнов в памяти. Еще совет, освой веб-инспектор и открой любой любимый сайт. Попробуй через веб-инспектор там свои цвета подобрать, может даже с блоками что-то поделать. Потренируйся. А работать пока рановато.

Ответить
0

Опять Дуров занес за рекламу своего приложения на ДТФ.

Ответить
0

Да это сайт, а именно форма авторизации.

Ответить
0

Фоновую картинку сами рисовали?

Ответить
0

К сожалению нет, могу сказать что это за фон

Ответить
0

Шрифт неочень имо, кнопка тоже.

Ответить
0

Кнопка криво стоит, стоило бы подравнять, да шрифт под такую тему подобрать. А так вобщем норм для начинающего (:

Ответить
0

Откровенно говоря, адаптив хочет плакать)

Ответить
0

Эээ… Ну, тут как бы хрен его знает что сказать. Если оценивать именно вёрстку, то там только 2 критерия важны: 1) насколько вёрстка соответствует дизайну; 2) качество кода (т.е. насколько проблемно его будет расширять, как хорошо поддерживается кроссбраузерность и вот это всё).
А если говорить о такой в известной мере субъективной штуке как дизайн, то, без обид, дизайн говно (личное мнение).
В целом, тут не настолько навороченная по объему работа, чтобы ею прям хвастаться.

Ответить
–2

Я заливаю проекты чтобы видеть от чего иду и к чему я приду (сам не понял что сказал).

Ответить
0

Прямой эфир

{ "remaining": "WzAsMSwyLDMsNCw1LDYsNyw4LDld" } [ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]
Пять простых способов разогнать свой ПК
с помощью соли и чайной ложки
Подписаться на push-уведомления