网站建设之资深设计师的工作流程
来源：网络公司 作者：资深设计师 日期：2012-2-14 11:11:39 TAG:设计师
资深设计师的工作流程
在他的演示活动除了在明尼阿波利斯，明尼苏达2011伊桑Marcotte谈到应用响应网页设计原则和工作流程的主要报纸网站的重新设计。 Here's my notes from his talk on The Responsive Designer's Workflow :下面是我从他在谈话的笔记敏感的设计师的工作流程 ：
Storytelling and crafting an object are intertwined.故事和起草对象相互交织。 We create objects that can tell our stories whether they are physical journals or a series of tweets.我们创建的对象，它可以告诉我们的故事，无论它们是物理期刊或一系列的鸣叫。
Physical newspapers contain the most important information for a day then their value is lessened over time.体育报纸包含了一天中最重要的信息，那么他们的价值是随着时间的推移减弱。 And increasingly they have less relevance as nearly half of all American results get their news through a mobile phone or tablet.和他们越来越多地少将近一半的美国所有的结果得到他们的消息通过手机或平板相关。 The industry is trying to catch up through iPad apps, mobile sites, and more.业界正试图通过iPad应用程序，移动网站，更赶上了。 Responsive Web design is another strategy to consider.响应的网页设计是另一种战略考虑。
What makes a design responsive?是什么使得一个设计反应？ Three ingredients: flexible grids, flexible images/media, and media queries.三种成分：灵活的网格，灵活的图像/媒体和媒体查询。 But these three elements are just focused on layout.但是，这三个要素都只是集中布局。 Layout is not design.布局设计。 “Design is putting form and content together.” Design is the means. “设计是把形式和内容。”设计是手段。 The process of how we get there.我们如何到达那里的过程。 How do we become more responsive designers?我们如何变得更加敏感的设计师吗？ This is the start of a conversation.这是一个对话的开始。
Working Responsively工作回应
Ethan recently got to go beyond layout and apply responsive design principles to a lot of the redesign process for the Boston Globe Web site.最近，伊桑超越布局和响应的设计原则，适用于很多波士顿环球报“网站的重新设计过程。
Creative process is often managed as tasks.创作过程中往往是作为任务管理。 Our thinking is often linear.我们的思维往往是线性的。 We finish one task before moving on to the next.我们完成一个任务，然后再移动到下一个。 We have hand-off points where tasks move between different skill sets like visual design and front-end development.我们有手点任务般的视觉设计和前端开发不同的技能集之间移动。
But the design process of a responsive site is not done at any one point.但是，一个负责任的网站的设计过程中没有做任何一个点。 How do you convey how a design will adapt itself in a single comp?你如何传达设计将如何适应在一个单一的排版？ You can't.你不能。 Process needs to change.过程中需要改变。
Our tools are also stuck in the old model of building Web pages.我们的工具还停留在网页建设的旧模式。 So new forms of sharing and collaboration need to be figured out.因此，共享和协作的新形式需要想通了。
To create a responsive site for Boston Globe, there was unified collaborative design and development team.要创建一个网站波士顿环球报的反应，有统一的协同设计和开发团队。
Designers “introduced” a comp, developers asked lots of questions about why the page is designed as it is, especially the big one: how will the content adapt?设计师“推出的”小样，开发商问为什么在页面设计，因为它是特别大的问题：如何将内容适应吗？ How will the interface adapt to touch, mouse, keyboard?如何将界面适应触摸，鼠标，键盘吗？ Don't need to have final answers to these questions but want to understand the process and the decisions made.不需要有这些问题的最终答案，但要了解的过程和作出的决定。
The developers also ask a specific question of every element on the page: what value does this provide for users on mobile?开发商还要求一个页面上的每一个元素的具体问题：什么样的价值，这为用户提供移动？ This question help force a mobile first approach to design.这个问题有助于迫使移动设计的第一种方法。
Mobile First移动第一
Why Mobile first: traffic has exploded, new capabilities, and narrow screens force us to focus.为什么移动第一次爆炸，交通，新功能，窄屏幕迫使我们集中精力。 In many cases our mobile experiences are focused while our desktop experiences are cluttered.在许多情况下，我们的移动体验集中混乱，而我们的桌面体验。 Going mobile first pushes focus everywhere.去移动首次推重点随处可见。
A question of context: what are the different goals of people on mobile & the desktop.断章取义的问题：什么是移动及桌面上的人，不同的目标。 We can be focused when using mobile and focused as well.我们可以使用移动和集中以及集中的时候。 We should leave the mind reading to the professionals.我们应该离开心灵读的专业人士。 Context doesn't necessarily dictate people's intent.语境不一定决定人的意图。
People click the desktop link because they feel they are missing out.人们点击桌面上的链接，因为他们觉得他们都错过了。
When going mobile first you are making a commitment to the content on the page.去移动第一当你正在页面上的内容的承诺。 Everything needs to be there.一切都需要在那里。 What is the value of every element on the page?页面上的每一个元素的值是什么？ This applies to all device experiences.这适用于所有设备的经验。
Content first allows you to determine what needs to be in the design.内容首次允许您确定哪些需要在设计。 Mobile can be used as a forcing function for simplifying things on all device experiences.手机可以用来作为简化对所有设备经验的东西迫使功能。
Prototyping原型
You need to move past comps quickly then prototype like the wind to explore responsive designs.你需要快速地移动过去谱曲，然后像风来探索反应的设计原型。
Figure out the proportions of a flexible grid using: target divided by context equals result.找出一个灵活的网格使用的比例：上下文等于结果分为目标。
Can use Scott Jehl's responsive images code can serve appropriately sized images to the Web browser by swapping out img src attributes.可以使用的斯科特Jehl的代码响应图像可以为适当大小的图像，通过交换IMG SRC属性Web浏览器。 It defaults to the smallest image.它默认为最小的图像。 Or you can use img max-width 100% if appropriate.或者你可以使用IMG最大宽度100％，如果适当的话。
Media queries: first look at the devices you are trying to support.传媒查询：先来看看您正试图在设备支持。 Then identify common breakpoints.然后找出共同的断点。 Small screens, portrait & landscape, tablets portrait & landscape, and widescreen.小屏幕，人像及风景，片剂肖像和风景，和宽屏。
Media queries are like conditional comments for CSS.媒体查询是一样的CSS条件注释。 Allow us to serve up different code for different device attributes.请允许我们为不同的设备属性，不同的代码。 Media queries support different break points and define adaptation points.媒体查询支持不同的破发点，并定义适应百分点。
Designing in the browser allows the developers to make recommendations for how things adapt and doesn't require a design comp for very single resolution point.在浏览器中的设计，让开发商做的事情如何适应的建议，并不需要一个非常单一的决议点的设计样稿。
Web fonts are limited to desktop resolutions due to files sizes and readability concerns Web字体不限于桌面由于文件的大小和可读性问题的决议
Verify your work live on different devices in an interactive design review.验证您的工作生活在不同的设备在一个交互式的设计审查。 How well does the layout adapt?布局如何适应？ Do individual modules still feel usable?各个模块是否仍然觉得有用吗？ Do any elements need additional design direction?做任何元素都需要额外的设计方向？ Rinse, repeat, and refine as needed.冲洗，重复和完善需要。
Flexible Foundation灵活的基础
A flexible foundation is really key for responsive design.一个灵活的基础，是真正为响应设计的关键。 A flexible foundation allows you to quickly refine new breakpoints.一个灵活的基础，让您快速完善新断点。 It also means less code to write.这也意味着更少的代码编写。 And better adaptability.和更好的适应性。
The mobile Web allows us to revisit the talk of inclusion, progressive enhancement for everyone.移动网络使我们能够重新列入谈话，大家逐步增强。
A responsive layout meets mobile first.一个负责任的布局首先满足移动。 Default to a linear, small screen friendly design.默认为线性，小屏幕的设计。 Media queries based on min-width scale up, not down.媒体查询的基础上最小宽度规模上，而不是下降。
Media=”only-all” is a test to see if site supports media queries.媒体=“只有所有的”是一个测试，看看如果网站支持媒体查询。 Can create a reading experience that works on less capable devices.可以创建一个阅读能力较差的设备上工作的经验。
Then use a few lightweight tests.然后使用一些轻量级测试。 Test to see if you have @media query support or IE.测试，看看是否有媒体查询支持或IE。 If so, take the basic stylesheet out of your document entirely.如果是这样，您的文档的基本样式完全。 You can also adapt based on touch support and Javascript functionality.您还可以适应的基础上支持触摸和Javascript功能。
A designer's choices are a small limited form of tyranny.设计师的选择是一个小的有限形式的暴政。 The philosophy of a responsive design might not be appropriate for the audience you are supporting.一个负责任的设计理念可能不适合你支持的观众。 The decision to build a responsive or mobile site is often more about the team's capabilities and decisions than anything specific to devices.决定建立一个响应或移动网站往往是团队的能力和决策比任何特定的设备。
源文地址: 转载请保留!
|