从前端角度来看网页设计

要想让代码出来得很有逻辑而简约。而这是要从设计开始的。非常符合盒子式的设计模式,一拿到就觉得特别专业和省力。

首先来说下作为前端我拿到设计稿先看哪些部分:

1.整个网站的底色,观察设计规律,主要找具有统一性的设计

    比如按钮button的 宽、高、底色、所用文字、文字大小、文字颜色都是一样的,这样我们写代码的时候就可以把这些写进一个class,以方便后面复用。

2.将网页横竖向开始分区,这时候心里大概知道了内容content,大概在第几层,第几列(x,y),这样我们在写代码的时候就非常有层次感

3.让后看(x,y)里面的内容,而内容我们看什么呢,主要有内容A区域的底色(background)/ 边框(border)/ 内边距(padding)/ 外边距(margin)/ 阴影 (shadow) / 圆角 (border-radius)

4.看一些细节,如 特色图标,专有标签,这是网页设计师最考验设计师的地方,在千万网站中,要想一眼难以忘记,靠的就是独特的风格。

5.这时候我们开始考虑交互性的效果,不仅仅是网页上的一些动态效果,等多的是用户在使用过程中的呈现方式。

6.网页的性能,比如压缩代码和图片,加载方式。

7.数据的交互

时间: 2024-10-04 19:56:14

从前端角度来看网页设计的相关文章

常用网站--前端开发类+网页设计类+平面素材类+flash类

前端开发类 animate CSS 前端开发网 我爱CSS 大家网 W3School jQuery开发技术详解教程视频 jQuery中文社区 jQueryChina 网页设计类 禅意花园 CSS Downunder CSS Impress CSS New websitelaunchpad wpglobe UI Maker 平面素材类 站酷网 昵图网 书法字体 图萝网 素彩网 三联素材 flash类 牛图库 Pian Tou 68 flash flash 片头之家 jQuery JavaScrip

网页设计、web前端、后台的开发流程和注意事项 -----转

工作2年了,总感觉每次做项目的时候,都是赶时间,赶时间,加班几班,可是最后总结一看,百分之50的时间都浪费在做无用功上面了,甚至因为设计人员的失误,造成了前端和程序大量的返工,休整,加班,造成了开发人员的疲惫. 我个人总结了一下觉得认为比较好的能够节省时间效率的工作流程应该是: 1.产品经理做出整体的构思,提出明确需求,并且形成文档和demo 包括:网站的中心思想,即属于什么类型的,是电子商务还是企业网站还是门户网站等,不同类型的网站风格定位就不一样,一个网站需要注意的地方,例如登录注册的页面,

web前端开发视频教程全集下载 WEB前端网页设计教程

轻松搞定网页设计(html.css.js),全集共54讲!免费分享!更多好资源,尽在齐学网!!!!!! 第0讲.开山篇第1讲.html介绍第2讲.html项目演示.运行原理.开发工具.html文件结构.标记和元素.属性.符号~第3讲.超链接href.图像image.表格table第4讲.html菜谱页面练习第5讲.html无序列表.有序列表.框架和综合练习第6讲.html表单form元素.各种input元素.常用元素综合案例第7讲.html加强(各种字体.Entities)第8讲.html加强(

【前端GUI】——对一些优秀网页设计作品的分析&心得

前言:优秀的网站设计作品都有一些相似的地方,即使是美学,也一定会遵循着一定的规律. ONE 这一组,属于同类. 主题:点心. 背景:卡通动物形象. 色调:柔和,甜美. 点线面布局: 在这两个页面中,点心作为点的存在,水平均匀摆放在页面的中间,采用了实物的照片,更加立体化,背景由柔和的漫画形式平面展现,很好的突出了点心这一网页主题.给人以想吃的欲望. 同时,这两排点心大小相同,位置整齐,以点的形式串联成线,和页面上方由动物形象形成的点串联成线的效果相呼应.营造了一种平稳,规律的效果. 导航条中的小

无障碍网页设计(WCAG2.0)

无障碍化是指无论健全人还是残疾人,年轻人还是老年人都可以平等地获取互联网上的信息和服务.无障碍化网站建设不单可以增加网站的受益群体,更是一个有情怀.有担当的互联网企业的责任,也是一个互联网从业人员应该关注到的一个方面. 无障碍化受益人群: 普通人 普通网站用户:文化背景和习惯与主流用户不同的用户:老年人或儿童等用户:无障碍化可使得用户更轻松地使用网站服务,降低使用.学习和理解的成本. 视力障碍用户 主要包括盲人.低视力.色盲.色弱等用户.针对这部分用户所做的信息无障碍化是最通用和最具有代表性的,

web前端如何让网页布局稳定性和标准性?

刚开始学css+div布局的同学们,都比较困惑和难写的就是兼容性的问题了,特别是ie6等低版本的浏览器,随意国内逐步慢慢消失取代,但是现阶段还是会有点考虑因素再里面.我们写的网页布局怎么样才是合理的,完整的,兼容性好的呢? 因此再这里,小强老师给大家列出网页布局标准性.合理性和兼容性的一些方法,希望对刚开始学习css的同学有所帮助. 一.<!DOCTYPE> 标记的重要性. 位 于文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准 规范,我们必需在开头处使用<

网页设计中有意思的404页面赏析

浏览网页时经常会遇到404错误页面,如果是白色页面,然后给个数字404再加一段枯燥的文字说明,很多时候一定很受挫,不过有时候一些小的细节设计,往往会让我们在遇到这样的问题时反而会会心一笑,下面小编在这里收集了一些比较有意思的404错误页面,大家一起来看一看吧,设计就在身边. 1.谷歌404,鲜红的404第一个映入视线,跟我们同样的角度,手绘风格,这家伙也跟自己一样遭遇啊,算了啦,原谅它. 2.52pk游戏网,也是手绘风格,让我想起了铅笔贱,页面飞到外星去了,呆萌的铅笔貌似不知情,放过它好了. 3

优秀网页设计的11个灵感来源

转:http://www.studentboss.com/html/news/2014-05-30/148514.htm 吸引人.友好的网页设计,能够吸引更多的访问和用户.但是并非所有的网站创始人都能成为优秀设计师,在这种情况下,很多创始人都选择了模仿或是借鉴其他网站的设计.但是这样做的坏处是,有的时候你所模仿的设计并不能吸引你自己的受众. 为了了解创始人都是从何处寻找网页设计灵感,我们走访了青年创业者协会的11位创始人. 在设计博客或是网页时,你从哪里获取灵感? 1.PSFK PSFK总是能告

极度专注的网页设计:细节的力量

著名的室内设计大师Charles Eames曾说过,“细节并不只关乎它们本身,它们还构成了设计.”的确,每一个网页都是由无数的细节构成,而其中的内容也是同样由这些细节连接组织到一起.不论是提供信息服务的网站,还是APP的官方宣传页,任何一个优秀的网站都能够经受得起挑剔眼光的洗礼,从图片到布局,从字体到架构. 网页设计的细节至关重要,因为正是它们给用户留下好印象,这些细节支撑起网站的良好体验,提高易用性.正如同Eames所说,它们成就了设计,不注意细节会让设计感流失. 接下来,我们一同看看这11款