使用线框进行UI设计和前端开发

时间:2013-08-27 20:33:18

标签: html5 css3 user-interface photoshop wireframe

我创建了这个线框/草图让UI设计师将其变为现实,但是我对线框和网格系统有一些疑问:

链接:http://postimg.org/image/npt5zlvu7/

1)我是否能够使用上面的线框/草图接近UI设计师?

2)在UI设计(感觉和外观)期间,我们应该关注流体网格系统还是只在开发过程中才有意义?

3)如果我的UI设计师是前端开发者还是不一定,那会更加一致吗?

4)我应该在线框之间有什么顾虑 - > UI设计 - >前端开发?

谢谢。

2 个答案:

答案 0 :(得分:1)

1)是的,特别是对于你所谓的“草图”。注意,术语“草图”和“线框”对不同的人来说意味着不同的东西。您的两个图表都很有用,但草图更有用。

2)如果你想要它流畅,你必须记住它看起来如何变窄。理想情况下,这也意味着为窄视图制作草图。在响应式设计中,您需要流畅的运动,因此请确保宽和窄的布局是可相互转换的。即,元素以逻辑方式移动,主要是水平运动,或水平系列变得堆叠。

3)UI开发人员无需成为您的前端开发人员。不同的技能。

4)您已经完成了大部分的UI设计,但总是停下来从用户的角度考虑该网站。您基本上已经定义了所需的UI,因此现在您需要一个设计师使其看起来干净且吸引人。

前端开发对不同的人来说也意味着不同的东西。如果您只是想获得良好的html / css标记,那么有许多自由职业者和服务专门只处理该任务。您的主要开发人员应该能够使用任何有效的HTML。

答案 1 :(得分:0)

这取决于你想要达到的目标。您需要一个响应式网站吗?你想覆盖移动设备吗?

  

1)我是否能够使用线框/草图接近UI设计师   以上?

是的,为什么不呢。它包含所有元素。即内容发明

  

2)在UI设计(感觉和外观)期间,我们应该注意   流体网格系统还是只在开发过程中才有意义?

我不确定 UI设计的含义。如果这是你在Photoshop中做的事情,那么答案是肯定的。你的设计后来会被切成html和css,是的,在设计之前你应该考虑这个过程。简单而有效的html / css很多东西都不是完全可行的。从另一个角度来看,在Photoshop中制作它们非常容易。

  

3)如果我的UI设计师是前端开发者,它会更加一致吗?   既然或不一定?

肯定是的。正如我所说,我相信如果你制作网站/应用程序,你的设计师应该是网页设计师。不仅仅是设计师。所以,他/她知道html和css。他们如何工作,什么是可能的,什么不是。

  

4)我应该在线框之间有什么顾虑 - > UI   设计 - >前端开发?

您应该知道的最重要的事情是,最后一个前端开发实际上向您展示了最终产品的外观。线框和静态UI设计很好地为您提供一些想法,并展示事情可能会如何行动。但是,一旦您将设计放入浏览器,您将获得真实的反馈。