Leaderboard

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

Это вольный перевод замечательной статьи молодого американского дизайнера Кендры Гейнс, в которой кроме общих понятий о том, что такое минимализм, приведен список примеров сайтов с отличными комментариями к ним. Возможно статья поможет начинающим дизайнерам и просто веб-мастерам, которые вынуждены делать сайты под ключ в одиночку (их на этом форуме большинство) ощутить эту тонкую грань между красивым минимализмом и просто унылым пустым нечто. Существует много разговоров о том, что техника дизайна, которую большинство называют "Минимализм", умирает или уже умерла. Я вынуждена не согласиться с ними. Минимализм не умер. Так говорят в основном потому, что люди не совсем понимают, что это такое. К сожалению, кажется, люди считают его каким-нибудь определенным стилем или направлением. Хотя я считаю минимализм скорее техникой или, в меньшей степени, общими правилами. Техника может соответствовать различным ситуациям - если мы говорим о веб-дизайне, вы можете использовать минимализм и в портфолио, и в веб-магазинах, и вообще во всем, что вы разрабатываете. Что такое Минимализм? Что такое Дизайн? Книжное определение "минимализма" звучит как "дизайн или стиль, в котором минимально простыми элементами достигается максимальный эффект". А понятие "минималистичное искусство " (minimal art) - "абстрактная живопись или скульптура, в которой выразительность и иллюзия сведены к минимуму за счет использования простых геометрических форм и объектов, а так же ровных, плоских цветов". Последнее определение больше подходит для описания специфики этого направления в искусстве, но если мы говорим о дизайне, который является больше наукой, нежели искусством, то оба эти определения на самом деле идут рука об руку. Дизайн - это то, что вы используете для упорядочения информации таким образом, чтобы это было эстетически приятно. Лучшие дизайны - это дизайны без излишеств и банальностей. Вот что такое минимализм. Если вы дизайните "для того, чтобы было красиво", то вы не разрабатываете дизайн, вы просто декорируете. Одной из самых крутых вещей, которую я слышала о типографике (которая тесно связана с графическим дизайном), является фраза: "Если вы не можете прочитать это - значит вы не поняли сути". А о графическом дизайне - "Когда дизайн готов, не задавайтесь вопросом чего не хватает, задайтесь вопросом - что можно убрать?" Примеры минимализма Люди должны понять, что есть различные уровни минимализма. Есть, конечно, люди, которые стараются придерживаться "голого" дизайна насколько это возможно - только текст и несколько картинок. В то время как другие просто хотят быть уверены в том, что они делают действительно чистый дизайн. В любом случае минимализм должен быть использован (и будет) в качестве основы для дизайна. Если у вас есть сайт, посвященный вашим мыслям, вашей работе или вашему продукту - минимализм будет работать и там. Ниже приведены несколько различных сайтов, которые используют минималистичный подход. 8faces.com Как видите, господа, здесь много внимания уделяется типографике чтобы убедиться, что текст легко читаем. Картинки не разбросаны повсюду, а находятся в аккуратно созданных для них пространствах. bestawards.co.nz Этот сайт использует ровный, плоский цвет с вкраплениями фиолетового и хороший макет для того, чтобы привлекать ваше внимание к наиболее значимым частям веб-сайта. Я бы сказала, что это сайт, который не уходит слишком далеко от корней минимализма, и в то же время добавляет некоторые более красивые дизайнерские элементы. collectedhere.com Вы наверное заметите, что в большинстве минималистичных сайтов используется сетка(grid). В этой сетке нет расстояний между элементами, что заставляет их заполнять собой все пространство. Тем не менее - это прекрасный, чистый сайт. createdm.com Это пример другого, очень чистого и очень сфокусированного сайта. Здесь не может быть даже малейшего непонимания того, чем эта компания занимается. eighthourday.com Этот сайт немножко сложнее. Здесь намного больше картинок и дизайнерских приемов, но они все-равно не отклоняются от принципа фокусирования и отсутствия лишних деталей. hatbox.co Без использования плоских цветов этот сайт является действительно чистым и сфокусированным. Создается ощущение, как будто дизайнер наибольшее внимание уделял точному расположению каждого элемента дизайна, а не сайту целиком. inmotionmassage.co.uk Этот сайт подошел довольно близко к основным ценностям минимализма, хотя в нем и используется больше цветов, чем в традиционных минималистичных сайтах. Разметка работает очень хорошо и опять же, ничего лишнего. kin-design.com Я бы сказала, этот веб-сайт действительно напоминает идею "минималистичное искусство". Хотя здесь и есть сетка, но сайт абстрактен и очень геометричен. Такое чувство, как будто этот дизайнер смешал идею минимализма в дизайне с такой же идеей в изобразительном искусстве. kristaduran.com Этот сайт сосредотачивается больше на дизайне и на красоте вещей, но так же можно сказать, что это не единственная цель дизайна сайта. А еще здесь превосходная компоновка. lamoulade.com La Moulade является одним из тех супер аккуратных одно страничных сайтов. Он использует много различных трюков и артистизма на вершине минимализма. Невозможно не знать, что здесь находится в центре внимания. learncss.tutsplus.com У многих брендов популярным становится создание мини-сайтов, которые продвигают один товар или услугу. Этот сайт мог бы быть очень грязным из-за обилии информации, которую он дает. Однако здесь дизайнеры проделали огромную работу по созданию сайта без излишков, что позволяет ему предоставлять всю информацию эстетически красиво. luanfreirekondo.com Еще один веб-сайт, который имитирует свойства минимализма как искусства. Плоские цвета, абстрактные интерпретации и геометрические формы. Это очень простое и правильное портфолио. mensdept.com Этот сайт использует минимализм больше, чем просто тенденцию. Если вы скролите вниз, то видите хорошую сетку с чрезвычайно богатым содержанием. Однако, я думаю, это очень хороший пример того, что минимализм бывает разным. modulab.co.uk Modulab имеют очень чистый и супер минималистичный веб-сайт. Здесь нету кучи цветов (только когда это необходимо) и абсолютно никаких излишеств. Отличная работа. pigbimpin.com Еще один сайт, в котором смешение обоих идей минимализма (искусства и техники) доведено до совершенства. Есть утверждение, что минималистичные сайты не могут иметь дополнительные функции типа социальных медиа, но здесь они определенно нашли хороший чистый способ сделать это. pillowcompany.com Когда речь идет о e-commerce сайтах, там действительно очень чего происходит и там расположено множество вещей, что порождает куча излишеств. На этом сайте много контента, но дизайнер постарался сделать дизайн чистым и сосредоточить внимание на вещах, которые действительно являются важными. sheltonfleming.co.uk Вот еще один сайт, где нет перебора с цветами. Здесь много интерактивности и он представлен в манере, которая интуитивно понятна для пользователя. thrivesolo.com А вот еще один очень простой сайт. Но его красота кроется в форме сложных элементов дизайна. Везде просматривается одна основная тема оформления, поэтому все вместе это работает эффективно и осмысленно. weltunit.com Этот сайт не сразу говорит сам за себя, его дизайн становится более ясным после некоторых поисков того, чем компания занимается. Использование серого и расположение элементов делают очень многое для этого минималистичного дизайна. wk.com Что мне нравится в этом сайте, так это использование графики и картинок таким образом, каким типичные минималисты не использовали бы никогда. Это определенно приятно для глаза, всего как-будто бы много, но разметка и дизайн расставляют все на свои места. yoshiharuota.com Этот веб-дизайн, наверное, представляет собой то, о чем народ говорит, обсуждая минимализм. Это "голый" дизайн, у которого нет абсолютно ничего лишнего. p.s. к сожалению форум не разрешает мне прикрепить все требуемые картинки, поэтому часть ссылок будет без превьюшек.

При клике по lable отмечается соответствующая ему радиокнопка. :cheked + label - выбирает лейбл следующий за "чекнутым" элементом. Сама радиокнопка сдвинута влево за границу экрана.

Праздное любопытство: Пользовательский или админский ? Отправка через mail() или SMTP ? Какие параметры можно настраивать? P.S.: Отправка письма письма осуществляется самописным скриптом? Если нет, то соблюдены ли юридические аспекты: авторское право, лицензии. Какие права будут у купившего ваш скрипт?

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

Для новичка самое оно — это notepad++ Там хоть чему-нибудь можно научиться, визуальные редакторы во всех их проявлениях зло. Помогу вам разобраться во всём этом деле, если что-то где-то не поймёте — спрашивайте: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Титл</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .wrapper { /* Это важно */ margin: 20px; /* Делаем отступы со всех сторон */ } .top { /* Это важно */ margin: 0 0 20px; /* Отступ от следующего элемента */ /* Это не так важно */ background: #ccc; /* Зададим цвет фона */ height: 200px; /* Зададим высоту */ } .menu { /* Это важно */ margin: 0 0 20px; /* Отступ от следующего элемента */ /* Это не так важно */ background: #ccc; /* Зададим цвет фона */ height: 40px; /* Зададим высоту */ } .middle { /* Это важно */ overflow: hidden; /* Предотваращаем схлапывание блоков */ } .container { /* Это важно */ overflow: hidden; /* Предотваращаем схлапывание блоков */ float: left; /* Выравниваем по левому краю */ width: 70%; /* Задаём ширину */ margin: 0 0 20px; /* Отступ от следующего элемента */ /* Это не так важно */ background: #eee; /* Задаём цвет фона */ padding: 1%; /* Задаём внутренние отступы */ } .sidebarLeft { /* Это важно */ float: left; /* Выравниваем по левому краю */ width: 33%; /* Задаём ширину */ margin: 0 0 -20px /* Компенсируем отступ, который мы задали в .block */ } .block { /* Это важно */ margin: 0 0 20px; /* Задаём отступ от следующего блока */ /* Это не так важно */ background: #ccc; /* Зададим цвет фона */ } .block1 { /* Это не так важно */ height: 300px; /* Зададим высоту */ } .block2 { /* Это не так важно */ height: 100px; /* Зададим высоту */ } .content { /* Это важно */ float: right; /* Выравниваем по правому краю */ width: 65%; /* Задаём ширину */ /* Это не так важно */ background: #ccc; /* Зададим цвет фона */ height: 420px; /* Зададим высоту */ } .sidebarRight { /* Это важно */ float: right; /* Выравниваем по правому краю */ width: 25%; /* Задаём ширину */ /* Это не так важно */ background: #ccc; /* Зададим цвет фона */ padding: 1%; /* Зададим внутренние отступы, для дела они не нужны */ height: 420px; /* Зададим высоту */ } .footer { /* Это не так важно */ background: #ccc; /* Зададим цвет фона */ height: 80px; /* Зададим высоту */ } </style> </head> <body> <div class="wrapper"> <!-- Засовываем всё в один блок --> <div class="top"></div> <!-- Верхняя часть --> <div class="menu"></div> <!-- Место для горизонтального меню --> <div class="middle"> <!-- Контенер для сайбара и контента --> <div class="container"> <!-- Контенер для контента и левого сайдбара --> <div class="sidebarLeft"><!-- Левый сайдбар --> <div class="block block1"></div> <!-- Первый блок в левом сайдбаре --> <div class="block block2"></div> <!-- Второй блок в левом сайдбаре --> </div> <!-- Закрываем sidebarLeft --> <div class="content"></div> <!-- Контент --> </div> <!-- Закрываем container --> <div class="sidebarRight">3</div> <!-- Правый сайдбар --> </div> <!-- Закрываем middle --> <div class="footer"></div> <!-- Подвал --> </div> <!-- Закрываем wrapper --> </body> </html> UPD: Это не самая лучшая реализация из существующих, я обычно верстаю по-другому немного, но для сначала нужно освоить это, как самое простое.

я вот такую читал http://www.ozon.ru/context/detail/id/2908257/, в прицнипе нормально

Тупо подсмотрел у мастеров...

Может я отстал от жизни, но где там юмор? Что может быть смешного в приведении типов и умении отличить знак конкатенации/сложения от вычитания?

Потому что абзац в абзаце быть не может. Браузер закроет первый абзац, прежде чем открыть второй.

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

Добавьте линии overflow: hidden;

Сразу нифига не понял. Потом перешел по ссылке про ЩИТО, с лурки ушел на ютуб, на ютубе через две ссылки появился смешной ролик. В общем, спасибо, посмеялся

Який жах

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

Я извиняюсь, что влезаю в ваш проект. Мой взгляд далеко не профессиональный, но я бы хотел поделиться своим мнением по некоторым вопросам. Заранее извиняюсь, если где перейду вашу точку зрения. 1. Первое впечатление при открытии сайта "О, интересно..." но! взгляд ни на что не обращает внимание, всё едино. И более того, я считаю, перенасыщенно. Едино в том плане, что даже кнопки меню не бросаются в глаза, пока я не начну изучать их специально. Это не есть хорошо. Сильно отвлекают четыре жёлтых объекта с каждого угла страницы. 2. У вас очень хорошо подобрана цветовая гамма, но ряд эффектов абсолютно не сочетаются. Это и "введите e-mail" с кнопкой подписаться и подразделы сайта с другими кнопками самого меню. 3. Я бы попробовал сделать обводку поиска идентичного цвета, что и полоса сверху, а не белой. 4. Логотип внутри {} весьма удачный, но хочется больше симметрии, я бы чуть подвигал надписи. 5. Кнопка "поиск" просто "анридбл". 6. Текст на кнопках бокового меню не смотрится. И кнопки немного не из мира сего. 7. Мне не нравится стык бэкграунда в хедере и подвале. 8. Я бы попробовал сделать иконки меню в лёгких цветовых тонах, а не ч/б. P.S. Блог Максима Усачёва правда звучит лучше.

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

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

Мне разгребать не приходилось, но видеть — видел, конечно. А кто-то говорил, что технология сама по себе не допускает неправильного, неуместного или просто неумелого применения? Испортить можно любую идеологию. Если не понимать ее. То же ООП всегда правильно применяется и никогда не приносит проблем вместо решений? Значит ли это, что идеология плоха? Нет. Как бэ намекают на доступность, а не максимальный трэш, ради фана.

Что проще запомнить? Матрешку и потом пялиться на нее как в таблицу менделеева или выучить CSS? Что удобнее? Поставить класс в HTML или дописать CSS? Имхо, просто непонятное изобретение. Как это штука себя позиционирует? Как замена CSS или как оберка? Ладно, в случае с jQuery оно понятно и то не все принимают.

да я тоже сторонник посмотреть всё со всех сторон но сейчас движок не в том статусе, чтобы в публик его выставлять... да и технологический макет там какбы по мягче сказать... ну в общем он "технологический" )) в плане юзер интерфейса: сверху телбар и меню, которые будут уже скоро переделаны, управление элементами на странице по принципе как в битриксе... бак-енд админка - как у друпала а скачать демку и запустить её займет минуты 2 но опять же повторяюсь: на данный момент это не тот движок, который является законченным проуктом со статусом "release", а также самое главное это вникнуть в архитектуру движка т.е. его идеологию, она не относится к программному коду и понять архитектуру можно только почитав вики, а по коду будет затруднительно... ЗЫ: сейчас документация находится тоже как бы в статусе "заметки для себя" по этому разобраться будет тоже не очень прям просто, но в прицнипе возможно... разумеется буду очень рад, если кто-то откликнется и на тему написания структурированной и понятной документации... также надо учитывать тот факт, что для меня слишком многое является очевидным и я могу просто случайно опустить это из внимания... так что может оказаться даже лушче, если документацию по основам архитектуры напишет какой-то новый человек со свежим взглядом

Внешний вид это не только удобство использование, но и функционал, который можно оценить за несколько секунд, взглянув на картинку/страницу. В полном объеме оценка по внешнему виду разумеется будет не объективной, но какое ни какое, а впечатление будет. Стоп! это не критика это мои мысли вслух. Да, скачать, установить это конечно можно, но слишком много действий для кота в мешке

сделайте мне пожалуйста растягивающийся фон. страница. если изменить (ctrl + колесо) масштаб, то видно, что в части блока .wrap , видной через блок .bottom фон смазан. а мне нужно чтобы он был однороден. для блока .wrap я готовил фон следующим образом. отрезал узкую полоску от нижней части фона блока .bottom , размножил до 2 копий, одну копию отразил флип вертикалом в фотошопе, состыковал полученные копии и размножил при помощи репит-у в блоке .wrap . как видно, получилось не айс вообще есть ли смысл так извращаться?

Should I have laughed after the word "shovel"?

Продам скрипт обратной связи с админом. Возможности и использование скрипта: Удобный интерфейс Возможность прикреплять вложение к письму Возможность отправлять письма сразу нескольким адресатам. (из указаных в конфигурационном файле email адресов) Защита от спам ботов (графическая капча) Простота настроки скрипта Удобная вёрстка (весь html код вынесен в отдельные файлы, для смены дизайна достаточно знать только html и css) Спешите, количество копий ограничено!!! К продаже доступно 5 копий! Для более подробной информации обращаться на ICQ: 8322665 или Email: sanek_tretii@mail.ru Пример скрипта: СМОТРЕТЬ ПРИМЕР Стоимость данного скрипта всего 300руб. Помогу устоновить скрипт.