Примеры блочного дизайна пользовательского интерфейса?

Под блочной компоновкой я подразумеваю такие стили:введите описание изображения здесь

введите описание изображения здесь введите описание изображения здесь введите описание изображения здесь

Medium , Readwrite , Kicktarter

На сайтах-галереях их не так уж много (например, Flat UI Design ). Большинство из них предназначены для продвижения продукта, уделяя большое внимание поначалу. Так:введите описание изображения здесь

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

Ответы (1)

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

  • сетка веб-дизайн

  • Дизайн сайта

  • швейцарский дизайн

    даст вам исчерпывающее множество примеров.

Если вы нацелены в основном на изображения в сетке, свободным предложением может быть библиотека Masonry JS . Ваш вопрос не очень конкретен, поэтому уточнение того, с каким материалом вам предстоит работать, какова цель, где вы застряли, может быть, даст вам лучший ответ.

Редактировать: любой фреймворк для Интернета будет иметь альтернативу этому чрезвычайно простому макету. Поскольку я не знаю, что вам нужно, wordpress, bootstrap, joomla, шаблон — все они имеют эту простую структуру div. Если вы хотите создать этот макет снизу, любой поиск «простой css с тремя столбцами» даст вам примеры файлов. Или, действительно, поиск «пример трехколоночного веб-макета».

Смотрите мое ОБНОВЛЕНИЕ. Я имею в виду просто макет в стиле прямоугольника.
... но вы имеете в виду вдохновение или практические веб-фреймворки?
Просто примеры для вдохновения. Но есть ли какие-то рамки для этого? Я использовал Mansoryраньше, но это для каскадного эффекта. Для rectangle, я чувствую, что ему просто нужны границы, поля и т.д.
Ааа.... Это не просто sidebarстиль. Я имею в виду rectangle, у него есть высота и промежутки между ними. В mediumпримере это коллекция, представленная фотографией и ее названием. В ReadWrite, каждая история также представлена ​​в прямоугольной форме. Я хочу увидеть больше такого стиля: как представлена ​​информация (заголовок, изображение, контент) и какую комбинацию цветов (для рамки, фона и т. д.) они используют. Я чист?
Или это больше похоже на стиль метро Win8?
Хм, но я не понимаю проблемы. Вам нужно вдохновение , и мои примеры наверняка дадут вам его. Что касается практического исполнения, то в css это невероятно просто. Все веб-сайты имеют базовую «коробочную» структуру с повторяющимися элементами div. Если ваш вопрос не о практических способах кодирования, я просто не очень понимаю, как я могу быть более конкретным в своих предложениях.
Ну... мне просто нужно больше примеров (веб-сайтов). И мои проблемы в том, что я действительно не могу найти достаточно. Например, на expo.getbootstrap.com в этом стиле не так уж много (но сам он есть)
... но вы ищете не функцию , а стиль макета? Так что технически это не макет как таковой, поскольку вы выбрали «ящики внутри столбцов», так что тогда вопрос в том, что в них поместить? или шрифты? или изображения? Извините, кажется, я не понимаю проблемы :-S
Я думаю, мне лучше перефразировать это так: «Где я могу найти больше веб-сайтов со стилем, таким как средний, getpocket, readwrite, в котором информация (истории / сообщения / ссылки) представлена ​​​​в виде маленького прямоугольника»? Почти как в стиле метро. В отличие от традиционного макета блога (нет обрамления информации)