верстка сложного макета

[spy7190]

Здравствуйте.В html верстке, у меня пока что не так много опыта.Есть сложный макет.Хотелось бы знать по какому принципу его верстать,думаю как же все это разместить, использовать float?либо попробовать сделать по grid системе?
может его как-нибуть подругому надо верстать.
Может кто подскажет, как именно здесь действовать оптимально?

 

сам макет

[antonKar]

Как вариант.

 

Блоки вверху поворачивать через transform: rotate, для IE8 использовать фильтры матричных преобразований (короче через фильтры поворот делать, я не помню как правильно оно называется). 

 

2 блока снизу (да и вообще с подобным наклоном) через transform: matrix, по поводу IE8 с ходу сказать не смогу.

 

А вот с текстом внутри большого блока с ходу не могу сообразить. 

 

А PSD запрещено передавать в третьи руки? Я бы поверстал на досуге.

[ryter]

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

[antonKar]

С фильтрами вас может ждать сюрприз 

Окромя чёрной обводки у PNG что ещё может? В макете есть полупрозрачный PNG вверху, но с ним проблем не будет.

[spy7190]

да я думаю не запрещенно, могу отправить,

это тестовое задание типа,которое я походу провалю))
опыта у меня столько нет, но попытаюсь чего нить соорудить за выходные)
 

ради интереса сколько примерно у вас займет верстка такого макета?

[Zverushka]

А сколько платят за выполнение тестового задания?

[cyklop77]

2 блока снизу (да и вообще с подобным наклоном) через transform: matrix, по поводу IE8 с ходу сказать не смогу.

но ведь  transform: matrix искажает изображение, а на макете изображение не искажено в пропорциях(только края контейнера) 

Edited December 21, 2013 by cyklop77

[antonKar]

ради интереса сколько примерно у вас займет верстка такого макета?

 

Ну дня 2 я над ним посижу как минимум. Потому что макет ололо, и с первого захода может не получиться.

 

 

 

но ведь  transform: matrix искажает изображение, а на макете изображение не искажено в пропорциях(только края контейнера) 

А мы картинку выпрямим. Кстати, посмотрел, у IE есть какие-то фильтры для matrix-трансформации.

 

 

 

это тестовое задание типа,которое я походу провалю))

Мой вам совет: найдите в интернетах как минимум 3 самых сложных, на ваш взгляд, макета, сверстайте их и показывайте их, когда отправляете резюме (ну и предварительно тут на форуме в специальном разделе попросить окинуть вашу вёрстку взглядом и спросить что не так). Если будут говорить вам выполнить тестовое задание на вёрстку, то говорите, что вы не будете верстать целый макет с нуля, спросите в чём именно у них возник вопрос по вёрстке, попросите дать задание именно по тому моменту, где у них возник вопрос. Отказываются идти навстречу - фак офф, stupid company, найдём ту, где люди работают поадекватнее.

 

Я тоже поначалу делал какие-то макеты тестовые, потом порядком подзадолбался и потом уже просто показывал свёрстанные макеты.

 

 

 

да я думаю не запрещенно, могу отправить,

 

Киньте в личку.

Edited December 21, 2013 by antonKar

[cyklop77]

да я думаю не запрещенно, могу отправить,

 

а нельзя ли и мне тоже отправить?  [email protected]

[Игорь Ермаков]

Шикарный макет с точки зрения вёрстки. Я бы такой заверстал))

Но только за деньги(((

[Ludwig Voltman]

Spy7190

Да, макет суперский. Сможете выложить на форум? Думаю будет много желающих сверстать. В интернете подобных макетов не найти

[spy7190]

да выложу чуть попозже сюда сам макет

спасибо за советы

 

[Zverushka]

Про цену так и не ответили....

[Chakra]

Все-таки было бы интересно увидеть psd-макет и верстку по нему...

[Serafim1991]

Тоже хотелось бы посмотреть на макет.

[bezoshibok]

 почему бы не попробовать экпорт с интеграцией css и посмотреть на результат

[advokatua]

"Автоэкакуаторы" - смешно блин )

В чем разница между двумя пунктами "Пожарные машины", но с разными иконками? )

 

Дизайн - дикая жесть, страшный сон верстальщика и еще более страшный сон его посетителя. Дизайнер (если его можно так назвать) 100% до этого рисовал пол жизни какие-то квадратики или второсортные логотипы, а затем решил пойти в вебдизайн и начал вот такое лупить, не прочитав при этом ни одной книги о юзабилити. ))

 

Самый крутяк это блок "Адреса пунктов обслуживания". Это просто усраться, простите, офигеть какая муть всевышняя. Я даже не знаю как ему такое в голову пришло налепить ) Взгляните на этот блок и попробуйте придумать как вы его сверстаете, если бы была такая задача. Особенно прикольно выглядит то, что в 1-ом пункте 2-ая строка идет впереди цифры пункта, а после 7-ого вторая строка уже за цифрой.

 

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

Edited January 8, 2014 by advokatua

[Chakra]

"Автоэкакуаторы" - смешно блин )

В чем разница между двумя пунктами "Пожарные машины", но с разными иконками? )

 

Дизайн - дикая жесть, ... , если бы они реально решили его утвердить )) 

 

С названиями, конечно, ошибка, но насчет дизайна не соглашусь, он интересный и сайт запомнится посетителю, что, возможно, увеличит вероятность превращения посетителя в заказчика. Но вот если верстальщик накосячит и сайт будет разваливаться при небольших изменениях, то такой дизайн лучше выбросить и использовать какой-нибудь стандартный, потому что для этого сайта важнее удобство использования (да и в старых браузерах точно будет отображаться некорректно...).

Насчет блока "Адреса пунктов обслуживания" самый простой вариант тут http://jsfiddle.net/rXBuU/ . Может быть, с помощью svg это тоже осуществляется. Надеюсь, в будущем появится свойство shape-outside http://dev.w3.org/csswg/css-shapes/ , что позволит довольно просто реализовать интересные дизайны с более активным взаимодействием картинок и текста.

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

[advokatua]

 

 он интересный и сайт запомнится посетителю

Какому посетителю, и кому он запомнится? ))

Вы сначала спросите себя, - "кто такой этот посетитель и что он вообще делает на сайте по продаже самосвалов?". 

 

Бизнес сегмент это бизнес сегмент. Свистелки-перделки не имеют и никогда не имели к этому сектору никакого отношения. Клиент такого сайта это скорее всего мужик 40-55 лет, с дальнозоркостью, больной спиной, и головной болью от предстоящего тендера на закупку техники, ну или что-то среднее между этим. Любой напряг извилины, дабы добраться до нужной ему цели, будет только отдалять его руку от телефона. В лучшем случае он наберет своего сисадмина и скажет этому головастому, бородатому Хоттабычу нарыть ему нормальный каталог, т.к. сам он нихрена не может понять где тут и что.   

 

 

Насчет блока "Адреса пунктов обслуживания" самый простой вариант 

Я такой вариант даже за вариант не посчитал, потому как это не вариант )) 

(по крайней мере, пока не нашли другие варианты)

 

 

настоящий верстальщик должен быть немного мазохистом

Настоящий верстальщик прежде всего должен разбираться в юзабилити(в какой-то степени) и уметь общаться с дизайнером. Объясняя этому укуренному фантазеру , что нельзя вешать гирлянды с клоунами на сайт похоронного бюро или морга. ) 

Edited January 9, 2014 by advokatua

[Chakra]

Свистелки-перделки не имеют и никогда не имели к этому сектору никакого отношения. Клиент такого сайта это скорее всего...

В общем, согласна с вами: для такого посетителя, которого вы описали, этот сайт будет плохо воспринимаемым.

В принципе, по части юзабилити ошибок много. Мне лично понравилась сама идея ромбовидного оформления, сразу представила как все это можно сделать в гораздо лучшем виде.

 

Я такой вариант даже за вариант не посчитал...

Тем не менее это вариант)

 

Настоящий верстальщик прежде всего должен...

Понимаете, я просто пошутила...

[advokatua]

 

 Мне лично понравилась сама идея ромбовидного оформления,

Согласен, фишка своя есть, но ее применение возможно будет оправдано в несколько иной отрасли/области веба. В какой-нибудь области где среднего юзера такая головоломка и такая игра текста будет развлекать, а не напрягать. )

 

С блоком, да, вариант, но далеко не лаконичный. Ждем, может кто-то выдаст что-то по части высшего Дао  )

Edited January 9, 2014 by advokatua