Report

Занимаюсь фотографией и дизайном продолжительное время. Как и многие, столкнулась с распространенной проблемой: достойную оплату труда предлагают, в основном, зарубежные заказчики. В рунете почти никто не покупает, большая часть покупок идет из-за бугра. Да что рассказывать, и сами все знаете. Поэтому возникла идея создать своеобразный «мостик» между нашими русскими дизайнерами и иностранными заказчиками – площадку, где можно продать свои работы.

В результате получился вот такой ресурс: gfx-market.com. Предусмотрели два языка – русский и английский. Этим, собственно, сайт отличаются от других подобных ресурсов. Хотелось, чтобы наши дизайнеры могли легко находить зарубежных заказчиков и показывать миру свои графические работы. Английский язык не будет барьером. Ну, а заказчики, благодаря английскому, тоже смогут запросто общаться со специалистами. Т.е. ресурс направлен и на наших, и на иностранцев – на всех.
Идею ресурса помогали реализовывать несколько знакомых. Теперь прошу помощи у вас – поддержать мое начинание. Может быть, вы делаете дизайн шаблонов, флаеры и баннеры, создаете шрифты, делаете логотипы или этикетки. Одним словом всех, кто создает качественную графику, предлагаю к нам присоединиться и вместе развивать ресурс. По нашей задумке, графические работы будут продаваться иностранцам. Почти на 100% уверена, что это положительно отразится на продаже товара. Хотя бы потому, что платежеспособность иностранцев повыше. На сайте можно будет просматривать как последние загруженные файлы, так и самые популярные. Думаю, это поможет каждому найти своего покупателя.

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

У меня вот такой вопрос: я в данный момент создаю свой портфолио, небольшой, но, вроде как, красивый, без излишеств сайт на несколько страниц. Вопрос вот в чем: ssi я в данный момент юзать не могу (проблемы со стороны хоста, возможно решат в ближайшее время), можно ли делать банально несколько html и вязать гиперссылками? для начинающего разработчика пойдет? или обязательно нужно абы-как подключать ssi, либо подобные скрипты?

Привет! Есть готовые psd макеты лендингов. Если кто-нибудь готов сверстать сайт для портфолио бесплатно или же за символическую оплату, пиши мне в ВК - https://vk.com/gamletgalstyan. Или можешь в WhatsApp написать +7(919)032-72-32, ну или уж в телеграмме меня можешь найти - @gamletov1ch

Спасибо!)

Люди добрые, подскажите, почему дизайнеры делают макеты мобильной версии начиная с 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