Ответы пользователя по тегу Дизайн
  • Как определить шрифт на изображении?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Очень похож на Open sans, сверху болд, снизу нормал. Но это не он, отличается буква С, G.
    Если такие мелочи не принципиальны, то я бы даже рекомендовал использовать именно open sans, шрифт проверен временем и нормально работает везде.
    Ответ написан
    Комментировать
  • Как вы выравниваете вертикально элементы с текстом?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Все зависит от ситуации. Вы пытаетесь вопросом охватит слишком большую область, вертикальное выравнивание подробно описано во многих книгах по типографике.
    Знакомо ли Вам понятие визуального веса?
    Ответ написан
    Комментировать
  • Как используется принцип золотого сечения в дизайне?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Статьи? Есть книги и гугл, про золотое сечение столько статей, что не прочесть все.
    Каждая общая книга по дизайну начинается с объяснения принципа золотого сечения и примеров его использования. Но я Вам скажу вот что, его влияние на дизайн переоценено, не так уж часто его сейчас используют.
    Ответ написан
    Комментировать
  • Box-Shadow только с одной стороны - как?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Ответ написан
    Комментировать
  • DIV на всю высоту родителя?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    .parent {
      position: relative;
    }
    .child {
      position: absolute; 
      left:0;
      right:0;
      top:0;
      bottom:0;
    }
    Ответ написан
    9 комментариев
  • Есть ли понятие правильных пропорций для миниатюр (картинок) в веб-дизайне?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    К моему ответу надо добавить тег «Мнение» или «ИМХО»
    Не может быть никаких пропорций для миниатюры. Сайт — это холст. Или каталог журнальный — это холст. На нем есть объекты, такие как текст, линейки, геометрические фигуры, фотографии и т. д. При этом миниатюры я бы выделил в отдельную категорию. Из-за маленьких размеров ее нельзя распознать. К примеру с фотографией нормального размера, скажем 10 на 15 все иначе, на ней мы можем выделить (внутри фото) какие-то линий, которые могут перекликаться с той же модульной сеткой или линией шрифта. А миниатюра воспринимается как одно цветное пятно. Соответственно важнее не пропорция этой миниатюры, а то, как она вписывается в общий ансамбль. То есть резюмируя: размеры миниатюр должны зависеть от холста, от его пропорций и размеров, от модульной сетки, если она присутствует, и от мнения дизайнера. Иногда у миниатюры будет задаваться только ширина, а высота получаться автоматом, иногда жестко и та, и другая величина с обрезкой фото.
    Ну и это если вообще не рассматривать случаи сборки мозаики из миниатюр, где меняются как размеры, так и пропорции при необходимости.
    Ответ написан
    Комментировать
  • Как сделать выпадающее по клику меню на CSS?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Не извращайтесь, рано еще полагаться в таких вещах на css.
    По теме, кроме focus гуглите menu css target.
    Например css-tricks.com/off-canvas-menu-with-css-target
    У меня codepen не работает, так что вот пример на фидлу перенес
    jsfiddle.net/iiil/o9okyw1d
    Ответ написан
    Комментировать
  • У вас отображаются полоски?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    В ff на винде при изменении масштаба тоже есть, только немного другая. Это особенность сайта, выделенный код на скрине как раз шириной 600px, не копался, но дело в ней. Ретина не при чем :)

    9JQjQkC.png
    Ответ написан
  • Какое англоязычное название у "этих выровненных по ширине надписей с разными шрифтами"?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Ответ написан
    Комментировать
  • Как заставить людей писать текст на сайте?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Они где угодно могут писать что захотят и это не удалят, например ВКонтакте у себя на странице или в ЖЖ, так что Вам надо поискать другие причины, чтобы они писали у Вас на сайте. Заносите мне деньги и кидайте ссылку, я Вам на сайте много понапишу.
    Ответ написан
  • Куда "смотрит" индикатор сортировки?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Стрелка должна показывать направление сортировка, а не порядок. А сам порядок определяется культурными особенностями, т. е. у нас это А-Я, 1-9. Поэтому стрелка вниз для А-Я, 1-9.
    Если в столбце только числа, к примеру цена, то там стрелка может нести другой смысл, а именно: возрастание/убывание. Возрастание (вверх) будет значить от меньшего в большему. То есть порядок обратный, но для таких случаев я бы делал checkbox в шапке таблицы.
    Для дат иногда тоже полезен именно обратный порядок, так как стрелка вниз указывает на то, что вверху будет самый последний файл (а значит файл с самым малым отрезком времени от сегодняшней даты).
    В файловых менеджерах (в частности смотрю стандартный проводник семерки) действительно все наоборот. Если для случая с датой и объемом файла такое поведение логично (см. выше), то для случая с именем совершенно не логично. Наверное из-за этого при сортировке в семерке я все равно пробегаю соседние файлы, чтобы определить, с той ли стороны сортировки я беру файл.
    Резюмируя, я бы сделал так: стрелка вниз — самый логичный порядок для данного типа данных, для названия: А-Я, 1-9; для дат: последний файл наверху; для чисел: от меньшего к большему.
    Ответ написан
    Комментировать
  • Лучшие образцы форм-анкет, которые вы знаете?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Тут, я говорю как пользователь, который сам ненавидит заполнять формы, скорее важен подход, а не сама форма. Например, первым делом запросите имя и почту. Ок, никаких сложностей.
    Потом выведите товары (привожу в пример вариант с магазином подарков) и напишите:
    Спасибо вам за регистрацию! К сожалению, на основании только вашего имени мы можем предложить только популярные товары среди наших покупателей. Поделитесь с нами другими данными и мы сможем найти что-нибудь еще.
    Я понимаю, что звучит слегка по-идиотски, и предложения надо сделать короче, но суть в том, что надо подходить к вопросу с точки зрения эмоциональной.
    Пока что на эту тему я читал только Аарон Уолтер, Эмоциональный веб-дизайн. Книга понравилась, но короткая. Приведен пример с dropbox, который, чтобы его пиарили в соцсетях (что в определенной степени тоже бесит) создал некое подобие игры, подключи друзей и коллег - получи больше места. Лично я собрал все возможное место :) В общем - эмоциональный подход - это первый вариант.

    Второй - посмотрите на соцсети, например ВКонтакте. Как они заставляют заполнять профиль? Думаю, ответ в заинтересованности. Но вот сможете ли Вы в магазине подарков заинтересовать кого-то просидеть лишние 10-20 минут за заполнением профиля... сложно сказать.
    Ответ написан
    Комментировать
  • Как начать делать сайт для организации по заданной идее, если у тебя нет опыта?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Да все на самом деле просто. Смотрите на сайты других компаний и делайте себе такое же.
    1. Про юзабилити общие понятия Веб-Дизайн: книга Стива Круга или "не заставляйте меня думать!" (да, она старая)
    2. Кирсанов, Веб-дизайн (да, и она старая)
    3. html/css - или используйте фреймворк, или смотрите как сделано в нем, например в бутстрап
    4. Сразу озаботьтесь вопросом адаптивности, потому что подход: ну мне бы хоть пока по-простому сделать - неверный
    А так, вопрос Ваш слишком общий, Вы на этапы разбейте и начинайте с поиска. Не изобретайте велосипед, задавайтесь почаще вопросом - почему на сайтах делают именно так, а не вопросом - а чем мой вариант хуже.
    Ответ написан
    1 комментарий
  • Почему в большинстве интерфейсов появление элементов плавное, а исчезание мгновенное?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Предположу, что когда Вы хотите, чтобы что-то появилось, Вы хотите знать, что именно появилось. То есть Вы нажимаете на кнопку «показать окно» и следите, как оно появляется. Сразу видите, что изменилось. В случае с исчезновением - Вы уже видите то, что хотите скрыть, куда именно оно исчезло и как - не важно, Вы не хотите его видеть и итак прекрасно понимаете, что изменится.
    Ответ написан
    Комментировать
  • Как разместить поля ввода друг за другом в горизонтальной форме bootstrap?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Так допишите собственные классы и сверстайте, в чем вопрос?
    Ответ написан
    Комментировать
  • Каким должен быть шрифт на сайте?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Если Вы серьезно спрашивайте, то в качестве обзора могу посоветовать книгу Кирсанова «Веб-дизайн», в качестве отличного обзора, не только по шрифтам, а в принципе веб-дизайна. Не смущайтесь, что книга старая.
    Далее, в зависимости от того, собираетесь ли Вы серьезно заниматься типографикой, или Вам достаточно начальных знаний. Сам сейчас читаю «Типографика. Шрифт, верстка, дизайн» Джеймса Феличи, это уже настоящий учебник.
    Вопрос насчет шрифтов для сайта очень широкий, на него можно с какой-то долей вероятности правильно ответить только в рамках одного шаблона. Где-то нужен будет рубленный, где-то антиква, где-то обязательно использовать декоративные шрифты, а где-то они будут смотреться очень странно.
    Шрифт, верстка - это самая незаметная часть дизайна, которая на самом деле требует большого внимания. Исключая акцидентные и декоративные шрифты - цель типографики именно в незаметности для читателя.
    Ответ написан
    Комментировать
  • Как подобрать цветовую схему для сайта?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    colorscheme.ru
    или еще есть хороший вариант, когда в качестве основы берется фотография. Дело в том, что цвета окружающего мира для человека являются самыми привычными, а значит сбалансированными. Есть ресурсы вроде www.degraeve.com/color-palette , которые позволяют быстро получать эти сочетания из любой фотографии.
    Ответ написан
    Комментировать
  • Как сделать всегда разную анимацию в шапке ?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Это, плюс jquery и стили
    <div class="slideone">
    <!--Robo Adviced-->
    <script>
    var backgrounds = [
      {  image: '//slinky.me/files/g/cat.gif',
       subtitle: '//slinky.me/?q=google',
       title: 'Например #Google'
      },
      {  image: '//slinky.me/files/g/brain.gif',
       subtitle: '//slinky.me/?q=apple',
       title: 'Например #Apple'
         },
        {  image: '//slinky.me/files/g/catrun.gif',
       subtitle: '//slinky.me/?q=скорость',
       title: 'Например #Скорость'
         },	
           {  image: '//slinky.me/files/g/heroofwinds.gif',
       subtitle: '//slinky.me/?q=Игра',
       title: 'Например #Игра'
         },
     {  image: '//slinky.me/files/g/tv.gif',
       subtitle: '//slinky.me/?q=Тв',
       title: 'Например #Тв'
         },	
       {  image: '//slinky.me/files/g/meow.gif',
       subtitle: '//slinky.me/?q=Кошки',
       title: 'Например #Кошки'
         },	
       {  image: '//slinky.me/files/g/barbell.gif',
       subtitle: '//slinky.me/?q=Спорт',
       title: 'Например #Спорт'
         },
       {  image: '//slinky.me/files/g/catmouse.gif',
       subtitle: '//slinky.me/?q=Кошки',
       title: 'Например #Кошки'
         },	
       {  image: '//slinky.me/files/g/opt.gif',
       subtitle: '//slinky.me/?q=Еда',
       title: 'Например #Еда'
         },	
          {  image: '//slinky.me/files/g/airguitarboy.gif',
       subtitle: '//slinky.me/?q=Музыка',
       title: 'Например #Музыка'
         },
       {  image: '//slinky.me/files/g/thewall_focas.gif',
       subtitle: '//slinky.me/?q=Музыка',
       title: 'Например #Музыка'
         },
       {  image: '//slinky.me/files/g/pulpito_mocoso.gif',
       subtitle: '//slinky.me/?q=Музыка',
       title: 'Например #Музыка'
         },	
          {  image: '//slinky.me/files/g/marshmark.gif',
       subtitle: '//slinky.me/?q=Еда',
       title: 'Например #Еда'
         },	
          {  image: '//slinky.me/files/g/buru-sama.gif',
       subtitle: '//slinky.me/?q=Рунет',
       title: 'Например #Рунет'
         },	
    	       {  image: '//slinky.me/files/g/time.gif',
       subtitle: '//slinky.me/?q=Время',
       title: 'Например #Время'
         },	
     {  image: '//slinky.me/files/g/pizza.gif',
       subtitle: '//slinky.me/?q=Еда',
       title: 'Например #Еда'
         },		 
    	   {  image: '//slinky.me/files/g/rudolp-jumping-rope.gif',
       subtitle: '//slinky.me/?q=Спорт',
       title: 'Например #Спорт'
         },	 
    		   {  image: '//slinky.me/files/g/treadmill.gif',
       subtitle: '//slinky.me/?q=Спорт',
       title: 'Например #Спорт'
         },	  
    	{  image: '//slinky.me/files/g/ai-digital.gif',
       subtitle: '//slinky.me/?q=Интернет',
       title: 'Например #Интернет'
         },	   
        {  image: '//slinky.me/files/g/octo-sleep.gif',
       subtitle: '//slinky.me/?q=Сон',
       title: 'Например #Сон'
         },
      {  image: '//slinky.me/files/g/spc.gif',
       subtitle: '//slinky.me/?q=Космос',
       title: 'Например #Космос'
         },
        {  image: '//slinky.me/files/g/running-godzilla.gif',
       subtitle: '//slinky.me/?q=Прон',
       title: 'Например #Прон'
         },
      {  image: '//slinky.me/files/g/tray.gif',
       subtitle: '//slinky.me/?q=Кошки',
       title: 'Например #Кошки'
         },	 
      {  image: '//slinky.me/files/g/character-render.gif',
       subtitle: '//slinky.me/?q=Офис',
       title: 'Например #Офис'
         },	 
       {  image: '//slinky.me/files/g/catpurr.gif',
       subtitle: '//slinky.me/?q=Кошки',
       title: 'Например #Кошки'
         },	
    	   {  image: '//slinky.me/files/g/court-2.gif',
       subtitle: '//slinky.me/?q=Баскетбол',
       title: 'Например #Баскетбол'
         },	
     {  image: '//slinky.me/files/g/work.gif',
       subtitle: '//slinky.me/?q=Работа',
       title: 'Например #Работа'
         },	 
    	 	   {  image: '//slinky.me/files/g/work.gif',
       subtitle: '//slinky.me/?q=Работа',
       title: 'Например #Работа'
         },	 	 
    	{  image: '//slinky.me/files/g/dancing_wom.gif',
       subtitle: '//slinky.me/?q=Музыка',
       title: 'Например #Музыка'
         },	
        {  image: '//slinky.me/files/g/paradise.gif',
       subtitle: '//slinky.me/?q=Метро',
       title: 'Например #Метро'
         },	
     {  image: '//slinky.me/files/g/geocat.gif',
       subtitle: '//slinky.me/?q=Россия',
       title: 'Например #Россия'
         },
        {  image: '//slinky.me/files/g/kneebend.gif',
       subtitle: '//slinky.me/?q=Секс',
       title: 'Например #Секс'
         },
      {  image: '//slinky.me/files/g/dubstepcat.gif',
       subtitle: '//slinky.me/?q=Украина',
       title: 'Например #Украина'
      }
    ]; 
    </script>
    
    <script>function getRandomInt (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }jQuery(document).ready(function(){
             var bgNumber = getRandomInt(0, backgrounds.length-1);
             
             jQuery('.iinum').prop('src', ''+backgrounds[bgNumber].image+'');
             jQuery('.topexample a').prop('href', ''+backgrounds[bgNumber].subtitle+'');
    		 jQuery('.topexample a').html(backgrounds[bgNumber].title);
    });
    </script>
    <script type="text/javascript">
      $(document).ready(function(){
        $.adaptiveBackground.run({
        })
      });
    </script>
    <img class="iinum" data-adaptive-background='1' ></img>
    <div class="slidetxt2">Добро пожаловать в хранилище статистики!</div>
    <div class="topexample"><a></a></div>

    Анимация - это gif, меняются этими скриптами, еще подключен скрипт адаптации бэкграунда.
    Ничего готового не будет, так что Вам скорее всего на фриланс-биржу.

    В ходе исследования кода был замечен интересный алерт )
    <script type="text/javascript">
    $(document).ready(function(){    
      $('#fu-desc-txt').maxlength({   
        events: [], // Array of events to be triggerd    
        maxCharacters: 140, // Characters limit   
        status: true, // True to show status indicator bewlow the element    
        statusClass: "fu-desc-c", // The class on the status div  
        statusText: "", // The status text  
        notificationClass: "notifoo",  // Will be added when maxlength is reached  
        showAlert: false, // True to show a regular alert message    
        alertText: "ебать как много символов", // Text in alert message   
        slider: true // True Use counter slider    
      }); 
    });
    </script>

    Ответ написан
    1 комментарий
  • Какого цвета и с какими углами должен быть треугольник в данном примере?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Угол должен быть такой или чуть острее. И цвет его не должен был связан с лицевой частью, это же обратная сторона. Сделайте потемнее.
    На кинопоиске такой уголок есть www.kinopoisk.ru/film/672899
    Но он ниже, всегда серый.
    Если хотите реалистичности - надо добавить тени, у Вас выглядит плоско.
    Ответ написан
  • Как добавить треугольник над дропдауном на bootstrap2?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    Он там и так есть. Смотрите, возможно что-то не так делаете.
    В общем-то Вы можете по ссылке getbootstrap.com/2.3.2/javascript.html#dropdowns посмотреть, как он реализован в bootstrap, на случай, если Вы там что-то меняли.
    Y35ENZw.png
    Ответ написан