Jump to content

Сайт на оценку: дизайн и верстка


aiwary
 Share

Recommended Posts

Здравствуйте!
Предлагаю тему для обсуждения: http://slonce.ru

Это сайт-портфолио веб-разработчика.. начинающего. :) Или все же веб-дезигнера. (В-общем, от дизайна до ЦМС.)

 

Буду благодарна за критику: 1) дизайна; 2) верстки.

Link to comment
Share on other sites

Ну дизайн крутить и крутить)

Верстка? бутстрап же. Бустрап хорош, да)

От бутстрапа там только сетка. :)

А куда его крутить, дизайн-то? Уже идеи закончились.. 

Спасибо за ответ!

Link to comment
Share on other sites

Крутить всегда есть куда. 

Проще смотреть на чужие примеры и делать, сперва подобие, а потом "расширять".

В тренде даже цвета другие :-) 

И эта желтая кнопка... Вернее слоган что ли. Совсем как то не к месту.

Link to comment
Share on other sites

Да дизайн совсем плох. Какие-то крупные элементы и при этом простецкие, которые его сильно простят.

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

Работы сверху покрыты серым цветом - в итоге я даже не могу понять, что там за дизайн, прежде чем решить, какую же работу из портфолио мне хочется рассмотреть. Навожу на одну работу - вижу в цвете, навожу на другую, чтобы сравнить - и уже забываю, как первая выглядела. Тоже очень не продуманный момент.

То есть мало того, что не очень красиво все выглядит, так еще и с точки зрения удобства пользования все очень плохо.

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

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

Edited by Zverushka
Link to comment
Share on other sites

Что за мода на гигантизм пошла. Все такое огромное: картинки, шрифты, расстояние между блоками. Даже на 22 дюймовом мониторе, с развернутым на весь экран браузером, плотность информации никакая, зато пустого места навалом. Только и успевай скроллить. Ориентироваться тяжело, внимание рассеивается.

Может это только у меня так.

  • Like 2
Link to comment
Share on other sites

Проще смотреть на чужие примеры и делать, сперва подобие, а потом "расширять".
 

Что самое смешное, я и смотрела на другие примеры)) Перелопатила кучу сайтов с портфолио, и попробовала скомпилировать понравившееся. Видимо, вот этот момент компиляции не удался) 

выглядит так, будто макет не рисовался, а просто верстальщик вставил информацию и на глазок прицепил им разные стили.

Примите восхищение такой точностью анализа.)) Я ведь скорее верстальщик, чем дизайнер, исторически. Т.е. опыта дизайна еще меньше, чем опыта верстки. :)

И спасибо за комментарий об удобстве/неудобстве использования. 

 

Вообще всем комментаторам спасибо за отзывы. Есть над чем подумать. (Например, не ограничиться ли только версткой в своей карьере))))

Link to comment
Share on other sites

@aiwary,по-моему лучше стремиться к чему-то одному. Либо отличным верстальщиком, либо отличным дизайнером, так как лучшим специалистам в свое деле платят больше, чем универсалам, которых наверное и берут то для маленьких контор, на всем экономящих.

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

Мысли между строк вслух...

Edited by Zverushka
  • Like 1
Link to comment
Share on other sites

Элементы далеко друг от друга расположены, как то связь не ладится…

И вот ты крутишь-крутишь скроллер чтобы наконец увидеть футер с голубыми ссылками на темно-сером фоне…

 

В общем-то человек может и не дойти до футера и так не узнать ваш номер телефона)

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 DrRobotGranata
      Всем привет! Задача стоит следующая. Есть 8 элементов (IMG). Т.е. одна целая картинка разрезана на 8 частей(рамка)
      Нужно сверстать гибкой версткой макет, где эти 8 кусочков будут одним целым( рамкой) а внутри можно будет размещать любой текс, рамка по высоте подстраивается под текс, по ширине на всю ширину окна.
      Кручу верчу, все никак не получается. Подскажите в какую сторону думать. Каждый Img в отдельный div и все дивы в общий контейнер? и дальше как
    • By vladdvin
      Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
      CSS
      В результате отображается следующая картинка

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

      Подскажите как добиться отображения текста как на макете.
    • By Hinn
      Всем приветик, начинающий фрилансер. Ищу первые заказы в данной сфере. Занимаюсь:
      • На малом уровне версткой;
      • Хорошо разбираюсь в таких CMS: как Wordpress и Tilta - легко и быстро разработаю одно страничные, многостраничные сайты, интернет-магазины (могу как дорабатывать, так и создания с нуля, так же занимаюсь переносом одного сервера на другой);
      • Увлекаюсь разработкой логотипов (логотипы с нуля, доработка логотипа, рисование логотипа по эскизу).
      Готов заниматься работой за любую плату. Так же присутствует портфолио, но за частую людям интересно когда о тебе есть отзывы. Поэтому пришел сюда за практическим опытом, и поиском постоянной работы.
      Использую:
      - Верстка: (HTML5/CSS3), верстаю из Figma, Photoshop, illustrator.
      - Разработка сайта: (CMS WordPress, Tilta).
      - Разработка логотипа: (Photoshop, illustrator)
      Если не знаю чего-то необходимого для Вашего проекта\работы -- обязательно разберусь (все-таки начинающий фрилансер).

      Если вы разработчик и вам некому спихнуть рутинную работу - я с радостью возьму её на себя;

      телеграмм: HinnWork;
      почта: balistic.baty@gmail.com

      Открыт для любых предложений. 
    • By MultiGramen
      Есть тестовый сайт: http://multigramen.ru/
      Между картинкой и меню создался какой-то белый отступ, и я не могу удалить его, чтобы элементы приклеились друг ко другу:

      Если вырезать следующий код:
      <a class="header_logo"> <img class="header_photo" src="img/header.png" width="100%"> </a> то меню приклеивается и всё в порядке, хотя в CSS, по сути, нет отступов, которые мешались бы:
       
      .header_logo { flex:0 0 40px; } .header_photo { display:none; }
      Сайт имеет мобильную версию. Код сейчас разбит на два медиа-запроса: max-width:767px и min-width : 768px

      Помогите понять, как убрать этот пробел, не затронув другие элементы. Уже несколько дней ковыряюсь с этой проблемой, даже в коде запутался..
    • By Full-R
      В общем свежая безумная идея сделать интерфейс на VPU(view port units) таким образом чтобы избежать media queries.
      Сейчас сделано определение мобильной версии браузера и на CSS4 vars сделаны переключатели масштаба элементов интерфейса.
      Поскольку дизайн полностью масштабируется под размер окна и не нужны ни какие костыли и сетки, я хочу добавить в свой фреймворк такую опцию, как автоматическая генерация Android приложения, которое бы работало на Web View. У нас уже везде webkit и можно было бы сделать заготовку приложения, которая бы скрывала строку ввода адреса браузера, но оставляла возможность поменять URL, на который обращается приложение.
      Я не пишу под андроид и мне бы очень не помешал пример такого приложения с возможностью на сервере через PHP поменять иконку и URL.
      Интерфейс у меня написан полностью динамический на ECMA Script fetch и вместе с SVG графикой весит примерно 300Кб не сжатого сервером кода, что гораздо лучше, чем разрабатывать отдельное приложение для mobile web.
      Мой проект RevolveR CMF: https://revolvercmf.ru/ (сайт сообщества, на котором пока ни чего нет - просто чтобы протестировать интерфейс на VPU и SPAx).
      Видео обзор системы: 
       
       
      Дистрибутив для установки вот здесь: https://github.com/Full-Rx/RevolveR-framework/releases/tag/1.9.2.x
      Группа на facebook тут: https://www.facebook.com/groups/331465761595917
      Фреймворк позиционируется, как замена Drupal и предоставляет широкий спектр функций для создания сайта сообщества.
      Интерфейс написан самостоятельный с чистого листа на ECMA Script 7, а backend реализован на PHP SPL 7.4. Для базы данных реализован мощный кэш с шифрованием и система оптимизирована под высокие нагрузки.
      Сам интерфейс легко меняется с помощью CSS, что позволяет не сильно модифицировать шаблон при создании своей темы оформления.
      Хочу подсказать как лучше реализовать View Port Unit интерфейс, который сейчас работает через calc просто подменяя значение переменной для масштабирования элементов под мобильные устройства. Дело в том, что сейчас уже не нужны ни какие media queries и grids(сетки), а также нет нужды во flex-box так как VPU прекрасно позволяют реализовывать интерфейс для любых дисплеев так, что он смотрится одинокого, как это сделано в операционной системе Windows, например.
       
      Давайте покумекаем, как мы можем это использовать для современных интерфейсов, чтобы сэкономить себе время на создание верстки и дизайна. Мне кажется моя идея выгорает хотя бы экономией времени и денег на создании мобильного приложения. 
       
×
×
  • 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