意大利版VOGUE网站设计说明

Agency:
frog design
Art Direction & Design:
Andreas Markdalen
Production & Build:
Simona Bariselli
Francesco Rachello
Creative Director:
Gianluca Brugnoli

Research & Sketches
Grid/interface drawings

We set out to create an interface experience of “neverending” content in line with visual bookmarking sites and inspiration feeds. Bridging the rigidness of an editorial web site and the high-impact experience of a fashion brand web site.

At this point there were no discussions as to what technology to use so we were playing around with a lot of animation and module interaction.

调研&绘制草图
基础网格及界面草图绘制

我们以一种名为“无止尽”的样式为基础，设计开发整个网站的界面。内容形态则由视觉化标签（使用具有代表性的图片作为内容的标签样式）以及便捷
的交互模块组合而成。

此时在不考虑使用何种技术实现目标
的前提下，我们尽情的使用各种动画和
交互模块充实整个想法。

First visual explorations

Exploring modular interface components, vertical compositions. The aspiration was to bring high quality fashion content into a stream of images “curated by Vogue”.

最初的视觉样式尝试

期望通过尝试使用垂直形态的模块化界面组件，再赋予极富韵律感的图片组合，表达出“curated by Vogue”般的高品质时尚感觉。

The Grid System
5-Column Fixed / Modular

The grid is based solely on a fixed set of aspect ratios (see below) which can be used spanning 1, 2, 3, 4 or 5 columns. Using these modules a random experience can be created for each page/refresh while also complying to the rigid structure of an editorial CMS platform.
The modules are set in a five column grid (no paddig, no margin) where each column is 196px and the complete width 980px. The idea is to build stacks of blocks based on trend, show, type of content or other group.
* Post-launch this system is actually being pushed further, with ONLY width as a fixed measure. The layout uses no vertical alignment whatsoever.

网格系统
纵向5栏及内部模块划分

此网格以一个独立的具有固定纵横比的系统为基础，并在此基础上生成1.2.3.4及5列纵向分栏。使用这种模块化的方式，我们可以
身处于一个结构严密的编辑式内容
管理系统平台之下，却能够任意的
创建每一页里的内容或者刷新页面信息。
整个模块基于980像素的总宽度，
分为5个纵向栏，每栏宽度196像素
(内边距，外边距皆不设定)。这个想法
其实是想要建立许多街区的样式，
而这些街区则由流行趋势，演艺界的
具有代表性的内容或者是其他圈子组成。
*整个网格系统因为使用固定宽度尺寸
而被发布的内容挤压。布局版式无论
怎样也不会出现垂直对齐的状态。

Aspect Ratios
Grid components

The ratios we explored for the interface were the common ones; the square 1:1 (features, interviews, photostories etc), the portrait 2:3 (Street style, shows, trend etc), Panorama 16:9 (Video features, wide angle photostories etc) and the standard 4:3 (Normal content, photographic content, news and events).
See right for charts of use in 1, 2, 3, 4 and 5 columns.

网格系统内部模块组件的长宽比例

我们为界面尝试使用了一些常用比例关系；正方形1:1比例关系(用来放置人物容貌，访谈主题及附有解说的照片等内容)，半身雕塑像式的2:3比例关系(放置街头时尚，秀场，流行趋势等内容)，全景比例16:9(放置视频导览，广角图片等内容)和标准4:3比例(放置通常文字，图片内容以及新闻事件等)。查看右侧1.2.3.4及5栏的图表介绍。

Actions and Interactions

See right for rollover interactions and interaction with the +-menu. The + is attached to each module, meaning that each module can be saved, loved, tweeted, blogged or added to Facebook, straight from the homepage.
Additional meta data such as date, tags and “view more” are hidden from the module and revealed only after interacting with it.

行为动作和交互部分

注意右边鼠标经过时的交互状态及点击+-符号样式菜单时的交互状态。+符号可以展开模块内部呈现各个功能链接，意味着此时
每个链接模块可以直接在主页位置
发挥作用，实现立即保存，收藏，
推荐，转载至博客或者添加到
facebook的功能效果。
另外一些元数据，比如日期，标签和
“查看更多信息”这样的功能模块
只会在与其经行过交互动作之后被隐藏。

Selected Templates

A selection of different layout types using the design system and content modules. Section pages have a designated column on the left for sub-navigation and internal/external advertsing.
More screens to be added!

选定的范本

挑选出的使用整体设计系统和内容模块生成的不同版式布局的范本。跳转后的内页左侧，有一个特定的列，用作放置分支导航栏和国内外的广告。