Search the Community

Привет, друзья и соратники. Наверняка подобные темы создавались не однократно здесь, поэтому заранее очень извиняюсь за плагиат =) Я занимаюсь дизайном сайтов (psd-фотошоп) уже несколько лет, всё устраивает, всё нравится. Очень давно хочу изучить верстку, но всё руки не доходили, то проекты, то еще какие-то дела, то лень =) Товарищ посоветовал начать изучение с видеокурса Петрова (Специалист по-моему называется). Что скажите? Насколько хороший курс? Просто хочется изначально получать грамотную информацию (я страшный перфикционист), чтобы потом не пришлось переучиваться. Посмотрел первые пару серий, вроде понравилось. Планирую после прохождения данных уроков, изучить Самоучитель Html и Css. Я иду правильным путем или возможно есть более информационные уроки? Заранее всем спасибо и хорошего дня.

Люди добрые, подскажите, почему дизайнеры делают макеты мобильной версии начиная с 750 пикселей, с огромными шрифтами и картинками? Но при этом, хотят чтобы оно всё круто выглядело на 320px. Как же правильно делать, дизайн на 320, а потом пускай расширяется? Или 750, а верстальщик пускай сам придумывает, как оно будет сжиматься до 320, и расширяться до 980ти? Как правильно делать дизайн мобильной версии, с какой шириной?

Техническое задание. Базовые требования Платформы: Windows, Mac OS X. Браузеры IE8 и выше Chrome последние 2 версии Firefox последнии 2 версии Opera последнии 2 версии (на базе движка Blink) Safari последнии 2 версии В качестве эталонного браузера использовать Chrome или Firefox. Это значит что в одном из них вёрстка должна как можно точнее соотвествовать макету, в остальных не должно быть визуальных отличий. Соответствие макету Вёрстка должна 1:1 соответстввовать дизайну, но допускаются незначительные различия. Данные различия, как правило, возникают из-за шрифтов или при использовании технологии адаптивной разметки. В помощь прийдет инструмет PixelPerfect -- расширение для браузера. Отдельно отмечу что верстка должна быть написана в лучших традисиях graceful degradation. Т.е. всё современные фишки оформления должны быть выполнены средствами CSS. Браузеры которые не поддерживают CSS3 или некторые его свойства должны корректно рендерить страницу без них. Стандарты HTML5/CSS3. HTML - должен проходить валидацию. CSS - не обязательно. В кажестве исходного кода для CSS использовать препроцессор LESS или SASS. Не обязательно, но крайне желательно использовать Grunt для генерирования LESS/SASS в CSS с применением технологии сжатия. Сброс стилей В качестве сброса стилей браузера использовать Normalize.css. Javascript: За основу взять фреймворк jQuery версии 1.11.х или 2.x.x. Для поддержки HTML5 тегов в IE можно использовать код: <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]--> Допускается применение modernizr если потребуется. Ширина сайта Стандартная ширина сайта - 960px. Grid За основу взять любой распрастранненый инструмет для построения макета, например 960.gs или Bootstrap Grid System (требуются знания фреймворка) Изменение/наполнение контентом Блоки могут и будут содержать иной контент, отличный от того что в макете. Контент может занимать как больше так и меньше пространства. При вёрстке следует это учесть что бы в будущем макет не "поехал". Особености макета 1. Шапка 1.1. Меню - Все как видно так и делать. Пунктов меню может быть больше -- это один список который выводится в 2 столбца. Текст пункта меню может быть длинее и распологатся в 2 строки. Обратить внимание на высоту строки в этом блоке, так как пункт в 2 строки будет выглядеть плотнее. 1.2. Учесть, что под ссылкой "Мы на Facebook" появятся в будущем еще несоклько аналогичных ссылок. 1.3. Возможно добавится пару языков. 1.4. Поле поиска 1.4.1. В поле поиска добавить placeholder с текстом "Искать...". 1.4.2. Поле поиска изначально должно быть на 1/3 меньше шириной. Поле прилегает к правому краю. 1.4.3. При клике на поле, средствами CSS оно должно растянутся на ширину, указанную на макете. 2. Слайдер в 4 колонки. Слайдер состоит из 4х колонок в слайде. Прокрутка осуществляется при помощи ползунка под ним. Требуется поддержка для touch-устройств для прокрутки контента. 3. Промо-слайдер 3.1. Табы слайдера -- первый и последний "затухают"с градиентом. Активный - крассный. На макете первый затухающий пункт меню содержит ошибку: градиент должен быть от светло-серого в прочрасный, слева на право (для последнего наоборот) 3.2. Кол-во слайдов может быть больше или меньше, чем на макете. 3.3. С прокруткой каждого слайда так же должны прокручиватся Табы (анимация при этом не обязательна). 3.4. В случае, если размер экрана меньше чем ширина макета, стрелка Предыдущий/Следующий слайд должны быть внутри области слайдера. 3.5. Кнопку управления слайдера должны поддерживать состояние "disabled". В случае если прокрутка далее/назад невозможна, стрелка должна быть не-активной. Визуально достаточно будет применить прозрачность 50% к кнопке. 3.6. Слайдер не влияет на 4 колонки под ним. 4. Контент 4.1. Меню слева. Пукты меню могут быть в несколько строк длиной. 4.2. Центральная колонка 4.2.1. Тут ничего особенного, фотография и статья, набранная контент-менеджером. 5. Футер 5.1. 3 колонки разибы по ширине области. Слева меню может наполнятся. Справа какой-то текст. По-центру виджет от Facebook. 5.2. Оступ снижу дл футера сделать высотой 20px. Дополнительно Кнопка "Отправить письмо", справа от макет -- закреплена всегда на одно расстоянии от верха. WYSIWYG Хочу обратить внимание на то что контент будет набиратся контент-менеджером, который не имеет соотвествующих знаний и навыков в работе с разметкой, а использует только окно редактора и инструменты которые он содержит. Соотвественно весь контент который визуально отвечает таким критериям (статьи, информационные блоки), должен "уметь" корректно выводить результат набранный контент-менеджером в редакторе. В качестве примера такого редактора можно взять TinyMCE Масштабирование страниц Поддержка не обязательна. Пользователь сам на себя берет отвественность за результат отображения страницы применяя к ней любые инструменты которые влияют на её изменение. Если есть желание все таки учесть поддержку масштабируемости, то советую почитать про Эластичные шаблоны, а так же опосля ознакомится с "rem" HTML код Кодировка – utf-8 Структурный, не комментируемый код Семантическая разметка на уровне грамотного использования тегов. Имена классов и идентификаторов – осмысленные, на усмотрение разработчика. Классы служат для привязки оформления, идентификаторы – скриптов. LESS/SASS код Структурный, отбивка табами. Комментариями обозначены начало/конец крупных модулей/блоков разметки. Допускается использование вендорных префиксов. Стили для IE вынесены в отдельные CSS файлы, если они потребуются. Для реализации в IE не поддерживаемых CSS свойств использование javascript хаков, или каких либо других интсрументов, запрещено (выше уже упоминалось про graceful degradation) Перед тем как приступить к работе настоятельно рекомендую ознакомится с темой Типичные ошибки начинающего верстальщика Javascript код Структурный, отбивка табами. Имена переменных осмысленные, на усмотрение разработчика. Снабжен комментариями: описаны назначения методов/классов функций условий. Для объемных задач используется ООП, для простых – обычные функции. Код должен быть без ошибок. При использовании Ajax и не предоставления заказчиком api для взаимодействия с серверной частью, api создается на усмотрение разработчика. Изображения Имена файлов осмысленные, на усмотрение разработчика. Графику следует оптимизацировать в Photoshop (использую инструмент "Save for Web") и ImageOptim (OSX) или OptiPNG (Windows) Малые изображения и иконки объеденить в спрайты. Для полноцветных RGBA картинок можно использовать инструмент Stitches Для векторных изображений иожно использовать IcoMoon Организация структуры файлов и папок HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов. Стили в папке - /css/ SASS/LESS в соответствующей папке - /sass/ или /less/ Javascript - /js/ Изображения оформления - /images/ Изображения содержания - /thumbs/ или /pic/ Шрифты - /fonts/ Наглядный пример Краткий вариант - только директории: Полный вариант -- директории и файлов: Удачи в обучении Автор макета -- Павел Борисенко предоставил данную работу на благо обучения начинающим За основу ТЗ был взят пример со статьи Техническое задание на верстку сайта design 1 - splat.zip

Делаю себе портфолио в виде сайта. Прошу оценить его дизайн и креативность. Старался сделать в стиле минимализма (прям как я люблю), надеюсь не переборщил. Ссылка на портфолио: http://bullshit.zzz.com.ua/ Что интересует в первую очередь: 1. Я не знаю, как сайт дружит с браузерами. Отпишитесь, пожалуйста, какой у вас браузер если Вы заметили какие-либо проблемы. 2. Не лишний ли переход в черный цвет в разделе "Портфолио"? Мне кажется это довольно забавным, но может переход слишком резкий? Ну и оставляйте общее впечатление от сайта)

Занимаюсь фотографией и дизайном продолжительное время. Как и многие, столкнулась с распространенной проблемой: достойную оплату труда предлагают, в основном, зарубежные заказчики. В рунете почти никто не покупает, большая часть покупок идет из-за бугра. Да что рассказывать, и сами все знаете. Поэтому возникла идея создать своеобразный «мостик» между нашими русскими дизайнерами и иностранными заказчиками – площадку, где можно продать свои работы. В результате получился вот такой ресурс: gfx-market.com. Предусмотрели два языка – русский и английский. Этим, собственно, сайт отличаются от других подобных ресурсов. Хотелось, чтобы наши дизайнеры могли легко находить зарубежных заказчиков и показывать миру свои графические работы. Английский язык не будет барьером. Ну, а заказчики, благодаря английскому, тоже смогут запросто общаться со специалистами. Т.е. ресурс направлен и на наших, и на иностранцев – на всех. Идею ресурса помогали реализовывать несколько знакомых. Теперь прошу помощи у вас – поддержать мое начинание. Может быть, вы делаете дизайн шаблонов, флаеры и баннеры, создаете шрифты, делаете логотипы или этикетки. Одним словом всех, кто создает качественную графику, предлагаю к нам присоединиться и вместе развивать ресурс. По нашей задумке, графические работы будут продаваться иностранцам. Почти на 100% уверена, что это положительно отразится на продаже товара. Хотя бы потому, что платежеспособность иностранцев повыше. На сайте можно будет просматривать как последние загруженные файлы, так и самые популярные. Думаю, это поможет каждому найти своего покупателя. По поводу стоимости: вы можете самостоятельно регулировать цену на графический товар. Посчитали, что это будет лишним стимулом для роста каждого из нас как профессионала. Каждый может постепенно повышать стоимость своих работ. Ну, или сразу ставить высокую цену, если работаете в этой сфере не первый год или чувствуете в себе силы заинтересовать потенциальных покупателей. Можно продавать все, что вы умеете делать в разных программках вроде Phtoshop, Illustrator, Lightroom и прочих. Вопрос по выводу средств тоже решался максимально в пользу наших пользователей. Для любой версии сайта (на английском и на русском) можно выводить заработанные деньги на Skrill, PayPal и Webmoney. Для многих пользователей рунета, думаю, удобно, что можно выводить деньги не только на Webmoney. В дальнейшем для русской версии ресурса планируем добавить дополнительные способы вывода средств. От продажи своего товара вы получаете 75-85%, оставшиеся идут на развитие системы. Минимально можно выводить от 10$. Понимаю также, что у всех исполнителей разный уровень. Поэтому есть как «плюшки» для лучших авторов – специальный топ, где вас быстро увидят заказчики, так и возможности для начинающих. Т.е. миссия ресурса – повышать уровень профессионализма наших дизайнеров и дать возможность реализовать свои мечты. Есть учебник – пользуйтесь, на здоровье! Также советую заглянуть на форум. На нем мы решили объединить всех участников ресурса – как продавцов, так и покупателей. В общем, будем очень рады вашим предложениям и идеям. При создании ресурса старались сделать его максимально простым и удобным, чтобы акцент был на ваших работах. Лишних пунктов в меню нет – только самое главное. Ну, и цветовая гамма соответствующая. Предложениям по сайту будем рады. Вместе с командой постараемся реализовать толковые идеи. Ну, и заходите на огонёк. Сейчас, пока ресурс только начинает развиваться, надеюсь на поддержку.

Ищется верстальщик/фронтенд разработчик (HTML, CSS, JS) на новый проект. Работа сдельная. Необходимые навыки: - верстка адаптивного и отзывчивого дизайна (HTML5, CSS3, JS); - установка и настройка стандартных jQuery (1.11+) плагинов; - разработка JS при отсутствии подходящих плагинов (не обязательно, можем сделать сами). Работа удаленная. Связь Skype, WhatsApp, Telegram. Ориентировочный бюджет: до 50 000 рублей за проект. Обязанности: сверстать frontend на основе шаблона в PSD и прототипа в Axure. Важно соблюдать указанные Вами сроки (либо заблаговременно предупреждать об их изменениях) и точность верстки. Не пропадать. График работы: свободный график. Писать на почту post@clubok.ru или Skype: autonet.ru, Всеволод.

Здравствуйте. На вашем сайте я новый, как и в веб-разработке. Здесь находится мой сайт. Сайт будущего интернет-магазина. Частично не доделан (не работает блок выбора сортировки и типа отображения товаров, и не работают кнопки "купить"). Это первый сайт, который я сделал. Начал с нуля полтора месяца назад. Обучался сначала по видеокурсам (html, css, js). Смотрел курсы Евгения Попова, прошел его javascript+jquery. Сейчас изучаю книгу "Новая большая книга CSS" от издательства o'reilly. Дизайном занимался другой человек, который так же начал с нуля изучать веб-дизайн. Прошу опытных разработчиков взглянуть на мою работу и дать мне советы, указать на ошибки в дизайне, верстке, идеях. Я был бы признателен. Так же, я не знаю, в каком направлении двигаться дальше. Кажется, все уперлось в то, что надо изучать язык php, чтоб сделать сайт динамичным (не использовать по .html файлу на каждый товар). Еще, мне хотелось бы реализовать несколько вещей, но я не знаю, какие нужно изучить технологии. Например, в index.html есть кнопки "Перейти в раздел". а в index4.html есть список со всеми этими разделами. И мне нужно как то сделать так, чтоб нажав определенную кнопку в главной странице, открылся соответствующий раздел в index4.html. Нужно как то передать инфу с одной страницы на другую.. Вторая вещь связана примерно с этим же. при нажатии кнопки "купить" нужно как то перейти на страницу формы, и вставить туда текст с нужным артикулом. Ибо вариант с корзиной наверное совсем сложный. В общем, если у кого найдется время посмотреть на это, буду благодарен.

Добрый день! Мы строительная компания. Занимаемся строительством трансформаторных подстанций, модернизацией, обслуживанием и сопутствующими работами. Нам нужен сайт. Сайт всего из 5-страниц: Главная, Контакты, Партнеры, Портфолио, Услуги. Сайт на двух языках. Фирменный цвет, сочетание цветов… тёмно-красный, белый, светло-серый. Тематика изображений на главной странице – трансформаторы, трансформаторные подстанции, воздушные электрические линии. Содержание страниц: Главная - блок текста про компанию, блок для видео ролика(у нас 2 рекламных ролика), кнопки на навигации по страницам. Партнеры - Список всех наших партнеров с которыми мы работаем.(10-12компаний) Портфолио - таблица или список всех объектов где мы работали и какие работы мы выполняли. С возможностью постоянно обновлять список и добавлять перечень оказанных услуг и фотографии с места работы. Услуги - перечень услуг которые мы оказываем. Сертификаты - Страница с разрешительными документами, грамотами, благодарностями и т.д... Сайты которые нам нравятся в плане дизайна: electrum.pl – дизайн внешний. Кнопки страниц, слайд, простота, большие картинки. Очень хотелось бы похожий по дизайну. electrical-engineering-portal.com – Шрифты, текст, информация не сливается в одно пятно, удобно читать… ztr.com.ua простота, цвета, контент и фотографии оборудования которое мы используем. esg.com.ua простота, цвета. Можно узнать цену на такую работу, сроки и что Вам еще необходимо для реализации проекта? Прошу всех, кому интересно к обсуждению… Вопросы цены в личные сообщения. Благодарю, за внимание.

Жду Вашей критики, глаз замылился. Какое первое впечатление, какие первые ассоциации о чём сайт. Чем понравился, чем нет? Цепляет/нет? Буду рад любым замечаниям и ваши мыслям. хочукрутойсайт.рф

Буду благодарен за конструктивную критику, предложения и пожелания) Сайт: iswash.ru

Здравствуйте. Недавно появился заказ, который меня немного насторожил тем, что дизайном заведовал дизайнер-маркетолог. На первый взгляд макеты для десктопа неплохие, как обычно. Потом через время предоставили для планшетов и мобильных. Вот с этого момента подробнее: 1. Макеты с одинаковыми блоками для разных страницы отличаются 2. Мобильное меню с непонятно откуда взятыми пунктами, которых не было в десктопной версии. Их то 6 пунктов, а в моб. - 8 (совершенно новых )+вложенности до 2 уровня. 3. Мелочи вроде разных padding по краям, также нижние и верхние отступы разнятся у одинаковых блоков. 4. Немного нелогичное построение блоков - у десктопа одна структура (фото>заголовок>текст>кнопки), для планшетов (заголовок>фото>кнопки>текст), для телефонов (заголовок>фото>текст>кнопки). Также нет состояния при наведении на кнопки и при нажатии. Когда увидела макет, дала список вопросов, составили что-то вроде ТЗ, в котором опять таки ответили не на все вопросы. Например, про наведение так и не определились, но чтоб была рамочка Ну и далее мелкие несовпадения, которых накапливалось очень много и приходилось писать длинные письма дизайнеру-маркетологу, потому что каждый отличающийся отступ, не тот цвет и новая непонятная рамка стоит добавления нового класса. Самый распространенный ответ - а вы как думаете? или на ваше усмотрение. То, что я думаю - дизайн не проработанный (планшетный и мобильный), и чтоб мне решить, надо потратить время на анализ что было и как будет и будет ли оно удобно. В общем, неделю таких переписок - и мне это порядком надоело. Макет они дорабатывать не собираются. Предоплату я отработала, так как есть страницы для всех версий, кроме меню и 2-х форм отправки (которые, кстати, только для десктопа сделаны). Думаю дальше отказаться, потому что это не стоит потраченного времени и того, что осталось мне доплатить, денег не потребую. К чему я это написала. Как распознать на ранней стадии, какие ошибки или несоответствия скрывает в себе макет? Как составить здравое ТЗ, если все нюансы появились в процессе верстки? Если нет ТЗ от заказчика по макету, стоит ли тратить время на его написание с моей стороны или это дело заказчика (это всё потраченное время, которое никто не оплатит, кроме увеличения стоимости верстки ненамного)? Стоит ли прислушиваться к себе и не брать заказы от дизайнера-маркетолога :)? Могу я взять работу в портфолио, так как 90% выполнено мной (брала заказ отчасти потом, что понравились макеты)? P.S. макеты не прикрепляю по не- известным причинам

Что вы говорите, когда вам дают абсолютно аморфную вёрстку, размеры всего, в которой основаны на магических числах, и просят всю эту безсеточность посадить на бутстреп? Лично я вообще не люблю привязываться к сеткам. Особенно в таких случаях.

Предлагаю консультации по веб-дизайну. Опыт работы в сфере около 3-х лет. За это время выполнено почти 100 проектов. Данная услуга подходит особенно начинающим дизайнерам. Консультации проводятся по таким вопросам: - с чего начинать разработку проекта; - зарисовка и создание прототипов; - работа с цветами; - типографика; - ритм страницы и grid-сетки; - работа с содержимым сайта (кнопки, иконки, слайдеры, формы и др.) - особенности разработки различных типов сайтов; - ошибки веб-дизайнеров; - практические моменты; - веб-дизайн в Photoshop; - специальные сервисы для дизайнеров; - советы по поиску заказов; Также помогу веб-дизайнерам при проблемах связанных с выполнением заказа, например отсутствием идей. Моё портфолио с некоторыми работами и отзывами - freelance.ru/Alexey_Korol Консультации проводятся по скайпу. Цена – 450р (за 2 часа). Skype – lking86 Обращайтесь, буду рад поделиться своими знаниями с вами.

Всем привет, ответьте пожалуйста на несколько странных вопросов: 1. Подскажите пожалуйста как добавить разрыв между слайдером и основной частью сайта. Попробовал aside, но это совершенно не то. 2. Пытаюсь на фон добавить 2 картинки, но получается так, что картинка, которая подразумевается снизу идет просто по низу экрана монитора. body.base { background: url('/картинка') bottom center no-repeat,url('/картинка') top center no-repeat,#000000; height: 100%; }P.s. Понимаю, что юкоз не лучшее решение, но хоть как-то... Заранее благодарен! Сам сайт: Ссылка —— Такс ну первую я проблему более или менее решил, поместив слайдер в таблицу

Всем привет. Как реализовать подобный вид материалов на главной, как на скриншоте ниже: Удалил картинку (КЛИК 18+) Интересно как-это все реализовать, сам дизайн я уже сверстал, но незнаю как сделать что бы из админки я добавлял новую запись прописывал к ней тайтл, далее добавлял превью-картинку (которая будет видна только на главной, как из примера выше) и само содержимое записи,а это обычный код фрейма видео порнушки, который будет виден на отдельной страницы после перехода по ссылке (клика тайтла или картинки). А это мой шаблон: Удалил картинку (КЛИК) UPD. Что бы не плодить целую армаду новых тем, задам тут еще один близкий к этой теме вопрос: Юзаю лайтовый парсер который парсит коды видео (iframe) с крупных адалт-тьюбов, и после я буду эти коды массово заливать на сайт, но вопрос как сделать реливантные превью-картинки к каждому видео? Находил в выдаче дорвеи, с такой схемой, но в програмировании и языках плохо разбираюсь.

Техническое задание. Базовые требования Платформы: Windows, Mac OS X. Браузеры IE8 и выше Chrome последние 2 версии Firefox последнии 2 версии Opera последнии 2 версии (на базе движка Blink) Safari последнии 2 версии В качестве эталонного браузера использовать Chrome или Firefox. Это значит что в одном из них вёрстка должна как можно точнее соотвествовать макету, в остальных не должно быть визуальных отличий. Соответствие макету Вёрстка должна 1:1 соответстввовать дизайну, но допускаются незначительные различия. Данные различия, как правило, возникают из-за шрифтов или при использовании технологии адаптивной разметки. В помощь прийдет инструмет PixelPerfect -- расширение для браузера. Отдельно отмечу что верстка должна быть написана в лучших традисиях graceful degradation. Т.е. всё современные фишки оформления должны быть выполнены средствами CSS. Браузеры которые не поддерживают CSS3 или некторые его свойства должны корректно рендерить страницу без них. Стандарты HTML5/CSS3. HTML - должен проходить валидацию. CSS - не обязательно. В кажестве исходного кода для CSS использовать препроцессор LESS или SASS. Не обязательно, но крайне желательно использовать Grunt для генерирования LESS/SASS в CSS с применением технологии сжатия. Сброс стилей В качестве сброса стилей браузера использовать Normalize.css. Javascript: За основу взять фреймворк jQuery версии 1.11.х или 2.x.x. Для поддержки HTML5 тегов в IE можно использовать код: <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]--> Допускается применение modernizr если потребуется. Ширина сайта Стандартная ширина сайта - 100%. Изменение/наполнение контентом Блоки могут и будут содержать иной контент, отличный от того что в макете. Контент может занимать как больше так и меньше пространства. При вёрстке следует это учесть что бы в будущем макет не "поехал". Особености макета Главная страница 1. Фоновое изображение должно занимать полностью область окна браузера. По умолчанию картинка имеет значение ширины 100%. 1.1. В случае если ширина окна браузера больше чем высота, ширина картинки 100%, высота "auto". Картинка приклеена к верху и обрезается снизу. 1.2. В случае если ширина окна браузера меньше чем высота, установить значение высоты для картинки 100%, а для ширины "auto". Картинка должна выравниватся по центру, тем самым обрезая края слева и справа. 1.3. Вышеуказанные пункты реализовать при помощи CSS3 2. Меню 2.1. Меню имее отступ сверху фиксированный. 2.2. Высота меню не фиксированна. Количество пунктов может менятся. Текст в пункте меню может быть в несколько строк -- такой пункт должен выглядеть более сжатым по отношении к другим за счет line-height. 2.3. Ширина меню фиксированна. 3. Слайдер 3.1. Блок с текстом всегда должен быть по-центру как вертикально так и горизонтально. Контент внутри может и будет менятся. 3.2. Ширина блока по-центру может занимать все доступное срастранство, но не может "налазить" на меню слева. Так же этот блок не должен "налазить" на индикацию в нижнем правом углу если там будет много слайдов. 3.3. Индикация слайдов размещается в нижнем правом углу. Отступы справа и снизу фиксированные. Элементы индикации могут выстраиваются в несколько строк при сужении экрана (в таком случае возможна ситуация конда индикация ложится поверх блока по-центру). Кликатебельная зона должна быть достаточной что бы в неё можно было тыкнуть пальцем на смартфоне. 3.4. Требуется поддержка touch-устройств. Внутреняя страница 1. Блок с белой рамкой имеет фиксированную высоту, выравнивается по-центру области в которой размещается. Его ширина может достигать ширины всей строки, за вычитом ширины меню. Текст внутри данного блока должен выравниватся вертикально по-центру. Строк может быть как одна так и две. Если контент превышает область -- прятать излишки. 2. Белая область на странице. 2.1. Данная область занимает всё пространство области, при этом имея фиксированный отступ сверху и слева. 2.2. Левая колонка имеет фиксированную ширину 2.3. Правая область, с картой, занимает все доступное пространство. Масштабирование страниц Поддержка не обязательна. Пользователь сам на себя берет отвественность за результат отображения страницы применяя к ней любые инструменты которые влияют на её изменение. Если есть желание все таки учесть поддержку масштабируемости, то советую почитать про Эластичные шаблоны, а так же опосля ознакомится с "rem" HTML код Кодировка – utf-8 Структурный, не комментируемый код Семантическая разметка на уровне грамотного использования тегов. Имена классов и идентификаторов – осмысленные, на усмотрение разработчика. Классы служат для привязки оформления, идентификаторы – скриптов. LESS/SASS код Структурный, отбивка табами. Комментариями обозначены начало/конец крупных модулей/блоков разметки. Допускается использование вендорных префиксов. Стили для IE вынесены в отдельные CSS файлы, если они потребуются. Для реализации в IE не поддерживаемых CSS свойств использование javascript хаков, или каких либо других интсрументов, запрещено (выше уже упоминалось про graceful degradation) Перед тем как приступить к работе настоятельно рекомендую ознакомится с темой Типичные ошибки начинающего верстальщика Javascript код Структурный, отбивка табами. Имена переменных осмысленные, на усмотрение разработчика. Снабжен комментариями: описаны назначения методов/классов функций условий Для объемных задач используется ООП, для простых – обычные функции. Код должен быть без ошибок. При использовании Ajax и не предоставления заказчиком api для взаимодействия с серверной частью, api создается на усмотрение разработчика. Изображения Имена файлов осмысленные, на усмотрение разработчика. Графику следует оптимизацировать в Photoshop (использую инструмент "Save for Web") и ImageOptim (OSX) или OptiPNG (Windows) Малые изображения и иконки объеденить в спрайты. Для полноцветных RGBA картинок можно использовать инструмент Stitches Для векторных изображений иожно использовать IcoMoon Организация структуры файлов и папок HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов. Стили в папке - /css/ SASS/LESS в соответствующей папке - /sass/ или /less/ Javascript - /js/ Изображения оформления - /images/ Изображения содержания - /thumbs/ или /pic/ Шрифты - /fonts/ Наглядный пример Краткий вариант - только директории: Полный вариант -- директории и файлов: Удачи в обучении Автор макета -- Павел Борисенко предоставил данную работу на благо обучения начинающим За основу ТЗ был взят пример со статьи Техническое задание на верстку сайта design 2 - relax clinic.zip

День добрый всем. Если есть хорошие дизайнеры, гуру фотошопа, отцы рисования, сенсеи стиля. Нужен рисунок\3d объект и так далее, то есть все возможные идеи и ваше воображение. Тема: Ежик! В идеале мальчик и девочка. Сам пробовал, но получался лишь, шлак. Если у вас хобби делать в фотошопе или тд работы, прошу помогите мне разработать лицо моего будущего проекта. Главное слово ежик. Не знаю уже к кому обратиться.

Прошу оценить дизайн, указать на недостатки

Понравился сайт на HTML5 и решил в нем покопаться, но т.к учусь верстать недавно, сайт вызвал восторг, но у меня не получается следующее. — на слайд шоу надпись "BRUSHED", не могу найти где её изменить — не могу настроить контактную форму _______ Если кому не трудно помогите, два дня уже копаюсь. Так же прикладываю архив с сайтом. http://yadi.sk/d/Rjz34RsmPFVVv

Здравствуйте! Занимаюсь созданием PSD макетов для сайтов различных тематик. При необходимости сделаю адаптивные макеты (для ПК, Планшетов, Телефонов). Помимо умения ловко передвигать пиксели в Photoshop'е, я всегда стремлюсь, чтобы веб интерфейс помогал решать поставленную задачу. Портфолио — http://nyxene.com или https://freelance.ru/nyxene. Цены:— Дизайн главной страницы — 3500 рублей— Дизайн внутренних страниц — 1000 рублей (при заказе главной страницы, иначе — 3500 рублей)*Стоимость на дополнительные услуги обсуждается отдельно Сроки:— Предварительный макет одной страницы через 24 часа— Готовый макет в PSD формате — от 3-х рабочих дней (в зависимости от сложности и кол-ва страниц) Что вы получите от меня:— PSD файл с подписанными и сгруппированными слоями (в работах используется сетка Bootstrap 3) — http://vimeo.com/89599563— Шрифты, которые были использованы в работе Контакты:Email: evgeniy@nyxene.comSkype: nyxene (только сообщения)Доступен с 11:00 до 23:00 по МСК

Сайт мне очень полезен... — И у меня есть вопрос: www.cargocollective.com — Кто знает как они сделали анимацию, фона логотипа. Если в "код" пройти, то там "дивы"... Это в CSS сделано?

Всем привет. Вопрос скорее адресован людям имеющим отношение к созданию макета. Где можно подобрать фотоматериал для дизайна макета? Поиск картинок через сервисы поисковых систем это конечно хорошо, но может есть какая-то альтернатива?

Вот основная тема: http://demiart.ru/forum/index.php?showtopic=233970 Добрый день. Ищу исполнителя для следующей работы. _ ТЗ _Заказчик занимается электромонтажными работами. Ему необходим сайт описывающий несколько услуг, конкретно сборка электрощитов и продажа комплектующих для электрощитов. Карта сайта: Главная, Услуги, Галерея, Информация, Контакты Сайт должен быть написан на HTML. Код должен быть аккуратным и нормально читаться (мне потом его обслуживать)). При отсутствии основных и значимых элементов в коде, разговор дальше не ведем. (К примеру отсутствие - доктайпа, исключает продолжение работы с таким исполнителем)CSS обязателен, никаких стилей в теле самого сайта. Галерея должна быть выполнена на быстром и легком скрипте. Сайт не должен растягиваться в ширину. Фиксированная ширина, к примеру - 980 px. Цветовая гамма: белая подложка, серые тона или черная графика. Возможно исполнение с какими-то техническими графиками, схемами, планами. То есть должно быть понятно, что это технический сайт. Не нужно рюшечек, радуг и прочей красоты. Контора называется "Электробокс", видел у них валяется эскиз логотипа: коробка с шнуром и вилкой, но как понял четкого понимания на данный момент нет как это будет выглядеть.___ Бюджет : В данной работе, самое геморное, это придумать дизайн-оформление, поэтому не исключаю привлечение дизайнера, а далее это банальная визитка в 5 страниц. Стоимость работы предлагает мастер. Деньги не мои, если понравиться заказчику то он волен оплатить любой счет. +Возможно логотип и прочая стилистика.___ Варианты, примеры, вопросы и тд, можно присылать сразу заказчику elbox.su(собака)gmail.com, но все технические вопросы лучше - писать мне в личку, или оставляйте тут. Регион - Москва, оплата электронно.

Какие программы мне нужно знать чтобы писать красивый интерфейс для сайтов.То есть добавить туда средств оформления?

Здравствуйте! Есть новоиспечённый сайт поиска музыкантов. У меня 3 просьбы: 1) Нет ли каких-ти видимых багов в отображении? - вообще, всё более-менее протестировано уже, но никогда не знаешь где затаился косяк. Поэтому, если вдруг кто-то что-то обнаружит, дайте, пожалуйста, знать. 2) Более важный вопрос: на главной странице расположена форма с 3-мя полями. Понятно ли, что НЕ все поля обязательные, а только первое (город)? 3) Ну, и опять-же форма на главной странице: при нажатии на поле "стиль" (самое нижнее) выпадает список стилей. Он у вас нормально выглядит? (2 строки по 3 колонки). И вообще - понятно, что нужно кликнуть на название стиля, чтобы оно поместилось в соответствующее поле? Спасибо! Роман.