Alexander Surikov

Очень часто приходится сталкиваться с оценками ТЗ и брифами. Пересмотрел тонну брифов, более-менее адекватный бриф выложил тут. А вообще можно посмотреть в интернете, например:

www.ms-net.ru/services/brief
www.fline.ru/Sites/content/Uploads/brief.58CC47EFB...
cpeople.ru/files/Brief_site_name_CreativePeople.doc
deaction.com/DMA-brief.pdf
touradmin.ru/tmp/files/1.doc
www.inweb.ru/brif.doc
http://www.melius.ru/fileadmin/user_upload/docs/Те...
www.dbest.ru/.files/1344/DBEST_RU_Brif.doc
www.freetz.ru/brief-site-design-3

Они впринципе похожи друг на друга, можете взять лучшее, на ваш взгляд, из всех брифов и создать свой.

Один.
Рассказываю почему — прежде, чем нарисовать что-то в фотошопе, надо выяснить много всего, пройти несколько этапов, а именно:
1. Аналитика — что за фирма, узнать чем живёт, как продаёт, что продаёт и пр.;
2. Прототипирование — хоть на салфетке, но накидать примерную структуру будущего сайта. В идеале интерактивный прототип, если есть сложные формы и под подпись с утверждением;
3. Только сейчас поднимаем тему о цветах и прочей лабуде — показываем примеры, разговариваем много и долго о будущем оформлении, выясняем чем руководствуется человек и как ему помочь в выборе;
4. Рисуем концепт — мы уже не летаем в облаках, а рисуем обговоренный макет (трачу на это не более 7-8 часов);
5. Вносим поправки и дорабатываем детали главной страницы (20+ часов на это закладываю);
6. Рисуем внутренние (20+ часов).

Не надо гадать что понравится, выясните что нужно. Говорите, обсуждайте, зачем эти игры в напёрстки?
Доступно донёс?)

Идея примерно такая:

span {
    background: linear-gradient(to right, #ccc 0%, #ccc 50%, #fff 50%, #fff);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position .5s cubic-bezier(.56,.08,.42,.7);
}

span:hover {
    background-position: 0 0;
}

codepen

https://materialdesignicons.com/
zavoloklom.github.io/material-design-iconic-font/icons
https://codepen.io/zavoloklom/pen/uqCsB
https://dribbble.com/shots/1833232-Material-Color-...
https://icons8.com/android-icons/
https://www.behance.net/gallery/22868911/Material-...

1. Я бы сделал одним изображением, просто потому что так проще.
2. Считается, что изображения, которые не являются частью контента, т.е. все служебные вроде иконок, фона и т.д. лучше показывать не напрямую тегом img, а в качестве background-image либо различными другими техниками. Мне например очень нравится решение с линейным градиентом, любые фоновые "полоски" верстаю именно так. htmlbook.ru/css3-na-primerakh/lineinyi-gradient

Такие?

Там везде, в основном, 3Д графика. Один раз сделали добротную 3Д модель и крутят-вертят её как хотят — показывают с разных ракурсов.

Лирическое отступление про фотографию:
Да, фотки они делают, но далеко не всё получится так четко сфотографировать. И вам никаких сверх-мегапиксельных камер и супер-чётких объективов не хватит для того, чтобы сделать изображение пригодным для печати в большом формате.
Вот тут ребята пытались повторить то о чем вы спрашиваете: https://www.youtube.com/watch?v=YOKwEVrna6s
Их результат похож на олигинал, но входе видео ведущий сказал, что это была очень долгая и тяжелая фотосессия. А результат всё равно был далёк от цели и они отдали фотку ретушеру на обработку.
В общем, слишком много геморроя с фотографированием. Слишком много времени и пост-обработки. И это только одни часики. А если их нужно будет сделать с другого ракурса? То это, как минимум, ретушь — по новой.

3Д:
Сделав 3Д модель один раз вы можете её "фотографировать" до бесконечности и без всякой пост-обработки. Или с минимальной. А если нужен видео ролик? — Используется та же самая 3Д модель!

Если хотите уметь так как они, то ищите в направлении 3Д графика. Ключевая фраза: предметная 3Д визуализация. На английском качественнее и больше информации: product 3d visualization.

Пост-обработка этой иллюстрации в Фотошопе (как и той, что выше) = 0%
Просто голый 3Д рендер:



Но если не хотите связываться с 3Д графикой, то ваше направление для изучения: технический дизайн, он же техдизайн. Пример: https://www.artlebedev.ru/kovodstvo/business-lynch...