Jump to content

Дизайн сайта от дизайнера-маркетолога


kattiperk
 Share

Recommended Posts

Здравствуйте.

Недавно появился заказ, который меня немного насторожил тем, что дизайном заведовал дизайнер-маркетолог. На первый взгляд макеты для десктопа неплохие, как обычно. Потом через время предоставили для планшетов и мобильных. Вот с этого момента подробнее:

1. Макеты с одинаковыми блоками для разных страницы отличаются

2. Мобильное меню с непонятно откуда взятыми пунктами, которых не было в десктопной версии. Их то 6 пунктов, а в моб. - 8 (совершенно новых )+вложенности до 2 уровня.

3. Мелочи вроде разных padding по краям, также нижние и верхние отступы разнятся у одинаковых блоков.

4. Немного нелогичное построение блоков - у десктопа одна структура (фото>заголовок>текст>кнопки), для планшетов (заголовок>фото>кнопки>текст), для телефонов (заголовок>фото>текст>кнопки).

Также нет состояния при наведении на кнопки и при нажатии.

Когда увидела макет, дала список вопросов, составили что-то вроде ТЗ, в котором опять таки ответили не на все вопросы. Например, про наведение так и не определились, но чтоб была рамочка :)

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

К чему я это написала. Как распознать на ранней стадии, какие ошибки или несоответствия скрывает в себе макет? Как составить здравое ТЗ, если все нюансы появились в процессе верстки? Если нет ТЗ от заказчика по макету, стоит ли тратить время на его написание с моей стороны или это дело заказчика (это всё потраченное время, которое никто не оплатит, кроме увеличения стоимости верстки ненамного)? Стоит ли прислушиваться к себе и не брать заказы от дизайнера-маркетолога :)? Могу я взять работу в портфолио, так как 90% выполнено мной (брала заказ отчасти потом, что понравились макеты)?

 

P.S. макеты не прикрепляю по не- известным причинам

Link to comment
Share on other sites

В May 16, 2016 в 13:15, kattiperk сказал:

Как распознать на ранней стадии, какие ошибки или несоответствия скрывает в себе макет?

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

В May 16, 2016 в 13:15, kattiperk сказал:

Как составить здравое ТЗ, если все нюансы появились в процессе верстки?

Бери и прямо сейчас составляй ТЗ по ошибкам которые ты находишь. Однажды именно так я и сделал — вот бери в качестве примера и делай своё
https://www.dropbox.com/s/eu8it8lfotr7uct/Requirements%20to%20e-shop%20design.pdf?dl=0

В May 16, 2016 в 13:15, kattiperk сказал:

Если нет ТЗ от заказчика по макету, стоит ли тратить время на его написание с моей стороны или это дело заказчика (это всё потраченное время, которое никто не оплатит, кроме увеличения стоимости верстки ненамного)?

Это время — оплачивается! Но если ты не берешь деньги за доработку, переписку или переделывание — это твоё личное дело.
Если ТЗ нет — делаешь на своё усмотрение. Если надо потом что-то переделать — это оплачивается! Об этом заказчика ты обязана предупредить. О всех дополнительных возможных затратах заказчик знать обязан предварительно.

В May 16, 2016 в 13:15, kattiperk сказал:

Стоит ли прислушиваться к себе и не брать заказы от дизайнера-маркетолога :)?

Что-то не нравится — не бери заказ. Работа должна быть выполнена с комфортом для обоих (заказчик\исполнитель)!

В May 16, 2016 в 13:15, kattiperk сказал:

Могу я взять работу в портфолио, так как 90% выполнено мной

Портфолио твоё — делай что хочешь.

Link to comment
Share on other sites

В 16.05.2016 в 16:15, kattiperk сказал:

К чему я это написала. Как распознать на ранней стадии,

если сразу чувствуете что будут проблемы - не берите. ну нафиг. Ладно хоть верстка только

 

В 16.05.2016 в 16:15, kattiperk сказал:

Также нет состояния при наведении на кнопки и при нажатии.

наведение в мобилке и не надо) а вот нажатие в таких случаях подойдет обычная внутренняя тень

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Mondeus
      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. 
      .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  

    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • By Andy_Code
      Здравствуйте! Проблема заключается в следующем: есть стартовый шаблон от "Фрилансера по жизни" версии 2021 года, открываю в VSCode, ввожу в терминале npm i затем gulp, все срабатывает как и должно, создается папка с результатом, начинаю прописывать стили для header, задаю ограничивающий контейнер и при проверке работоспособности данного контейнера выясняется, что стили, прописанные мной перекрывают стили медиа-запросов, прописанных в шаблоне и по итогу адаптив не работает, получается что итоговый css собирается в не правильном порядке! Подскажите, пожалуйста, как подобную проблему можно исправить?)
    • By vladdvin
      Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
      CSS
      В результате отображается следующая картинка

      в режиме инструментов разработчика. А вне режима вообще отображает

      Подскажите как добиться отображения текста как на макете.
    • By RaiderCoder
      Здравствуйте , сделал макет сайта для интернет магазина . Но столкнулся с проблемой при верстке кнопок на главной странице и не нашел информации как можно уместить текст + несколько картинок в одну кнопку. Знает кто решение и реалезуемо оно вообще ?

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy