如何做好网页设计(网页设计排版布局)

1、 首先将你的想法在纸上画出来

这是一幅世界各地不同年城市特色建筑的草图,每个人开始设计之前都会在纸上画草图,但是很多设计师都跳过了这一步,没有考虑到他们将会面临的问题。设计就是要解决问题,但是这些问题通过渐变、阴影设置是解决不了的,只有通过调整布局和层次结构才能解决。所以在你开始设计之前,一定要先想好布局。

2、 描绘一个顶层框架

描绘一个基本的框架可以帮助你解决UX方面的问题,同时规划布局。当我接手一个项目的时候,做的第一件事就是建立一个顶级框架,这样可以解决所有的设计问题。这个框架是指环绕在内容周围的UI,它可以帮助我们执行操作,更好的操纵页面。它包括导航和组件,比如侧边栏和底部的按钮。

如果你通过这种方式来做设计,在不看主页的情况下,你也能清晰的知道应该怎样布局。

3、 给PSD添加网格

这是一个有978个网格的PSD文件,每条线的宽度为10PX。画网格做起来就像听起来那么简单,虽然你不画直接开始设计完全可以,但是我相信设计出来的作品绝对没有画了网格好。网格的好处就是帮助你构建不同板块的布局,起一个指导作用,帮助你制作响应式模板。

4、 选择你的字体

网页设计中很重要的一个原则就是一个网页中不要出现两种以上的字体在一个项目中,寻找好看的字体也是很重要的一部分,但是我要提醒你,在同一个网页中千万别使用两种以上的字体。选择字体的原则就是要易于用户阅读,尤其是文字很多的页面,文章标题的字体可以有趣一些,这样能吸引用户的注意。在使用字体的时候不要畏首畏尾,个头大不是问题,只要整体看起来很和谐生动就行了。

5、 选择合适的颜色主题

使用有限的颜色和色调,减轻用户的视觉压力。 在选择字形的时候,你就应该想好用户界面、背景、文字该用什么颜色。我建议你在颜色的原则方面一定要有节制,别想到哪个用哪个,最后五颜六色乱七八糟的,这也是大忌。

在这一步中,你要根据每个元素的功能选择颜色,并且在用户界面中,相同的元素颜色一定要一致。你可以观察一下facebook、推特、quora、vimeo等等网站的页面,在不干扰功能组件正常使用的情况下,除了用户界面,它们的插画和平面细节没有任何颜色限制。

6、 分开布局

网页结构越简单,用户使用越容易在网站中,每个模块都要有个故事,要给用户一个浏览的理由和最终的结果。而设计的作用就是强调这个故事中最重要的那部分。在现实设计中,主页面不能将所有的信息都显示出来,所以你必须在主页先告诉用户“进了这个网站你能做什么”。

发挥你的聪明才智思考一下你能想到的极简页面,有最简单的目标和必要的构件。最后你会发现,原来保持简单这么困难。

7、 重新思考

我们真的需要搜索按钮吗?在很多案例中,答案是否定。作为一名设计师,是我们一手决定了用户浏览因特网的方式和界面,由你决定用户进一个页面需要多少步骤、一个网页效率有多高。在设计完之后,一定要多测试,发现漏洞,及时修改,这样才能做到极致。

做好网页设计,需要掌握的软件和技术还挺多的,但不建议都把这些技术掌握的很精通,毕竟人的精力是有限的,可以选择其中的一项技术来认真钻研,并达到熟练掌握运用。

下面来说下网页设计的两个方面

一.视觉方面

如果你是设计专业或者对视觉有很浓厚的兴趣,那就可以选择做这个方向的网页设计,也就是通过设计软件,根据原型图或者草图制作高保真效果图。要做这方面的网页设计,需要掌握的设计软件有photosho,illustrator等视觉设计软件。

ps主要用来设计网页效果图和对效果图进行切片以及一些网页小元素的处理和制作,用处可以说相当大,学好PS就完全可以制作出精美的网页了。illustrator主要是处理一些矢量图形或者图标,辅助PS进行网页设计,这要看你哪个软件掌握的熟练,就以哪个为主。

掌握了基本的网页设计软件,下面就要多学习一些网页的基本知识,比如网页尺寸,网页布局排版等规范,这些需要长时间的练习和积累,要多看多想多做,慢慢你就会发现自己水平提高了,设计的网页也越来越专业和漂亮。

二.网页前端

这个方向的网页设计,需要掌握和精通前端html代码以及css样式js这些,也就是通过这些把ps设计好的效果图实现成可以通过浏览器浏览访问的网页页面。对代码有兴趣的朋友可以朝这个方向发展。

推荐使用的软件是Dreamweaver,方便易学,可以快速进行网页布局和css,当然随着学习的深入,你会知道其他很多前端设计软件,这里不再一一介绍。

上面介绍的是网页设计的两个方向,当然也可以两者都掌握,那就是全能型网页设计师了,很受欢迎。最好精通其中一个,另外的技术适当了解。

如何做好网页设计(网页设计排版布局)图1
如何做好网页设计(网页设计排版布局)图2
如何做好网页设计(网页设计排版布局)图3
如何做好网页设计(网页设计排版布局)图4

本文来自投稿,不代表天一生活立场,如若转载,请注明出处:http://tiyigo.com/phone/20174.html

(0)
上一篇 2023-03-19 12:16
下一篇 2023-03-19 12:35

相关推荐

  • 安卓手机屏幕锁屏忘记密码了怎么办

    一旦设的密码忘记了怎么办?很多人到手机修理的地方或者厂方去解锁,往往收取不菲的费用,其实很多手机只要自己输入解锁码就可以了。以下收集整理的满全了应该。 一、各种品牌手机中英文对照 …

    手机教程 2022-12-18
  • 被短信恶意轰炸怎么办,电话被信息骚扰怎么办

    好解决啊,现在智能手机都有拦截功能了,一般来说你肯定是得罪了什么人,这种轰炸机我以前就卖过,也用过,之前在微信上面有朋友被骗了钱,让我帮忙轰炸,轰炸机一般是换号呼叫,响一声就挂断,…

    2023-02-11
  • 苹果air哪一款最好(苹果air5官方售价)

    如果对性能要求高,对便携性能要求低一点,而且价位可以接受的话推荐Mac book Pro系列。如果你想拥有专业级性能、突破性内置电池和亮丽显示屏,全新 MacBook Pro 将会…

    手机教程 2023-03-18
  • 你怎么看待《以团之名》这个节目的观点

    2019年的1月17日,《以团之名》首播,一开始选手的表演还中规中矩,但后来失误连连,还有车祸现场(不忍看,不忍听,看的人都尴尬),表现真是差强人意,网友戏称“以团之名是快乐源泉“…

    2023-07-26
  • 手机收到各种骚扰怎么办

    该怎么办?首先你要搞清楚都是什么类型的骚扰。例如美团住房类,那么这种往往都是你的软件信息泄露出去的。为什么会泄露呢?有几个以下方面。 一是我们最常用的QQ、微信等聊天软件。例如我们…

    2023-02-05
  • 怎么刷新dns缓存

    DNS它是“域名系统”(Domain Name System)的简称,我们上网时输入的域名之所以能找到对应的网站服务器,靠的就是DNS的解析。DNS其实可以理解为是一个分布式的数据…

    2023-01-17
  • 小米note3支持人脸解锁是真的吗

    肯定不能,但是不能保证有没有意外,目前人脸识别安全性的问题一直在讨论~手机届目前认为苹果的3D结构光模组是最安全的,因为苹果的3D结构光拥有景深信息,更多的信息当然安全性更高,但是…

    2023-02-25
  • 如何让安卓手机流畅不卡顿(手机卡顿操作不流畅怎么办)

    自己也用到。 前言: 现代人,基本每人人手一部智能手机,而且智能手机渗透到我们的生活中的,方方面面,比如现在人出门都不用带钱包,手机就是钱包,只要带一部手机,手机之中装相关支付软件…

    2023-03-07
  • 苹果手机微信提示音应该怎么更换

    打开设置界面: 在IOS系统当中,设置软件的提示音,都要进到设置当中,虽然看起来很枯燥,但是也非常的便利,打开设置可以完成应用程序的所有访问、声音的设置。 设置当中找到微信的应用程…

    2023-06-25
  • 如何获取流量(如何获取流量推送)

    大家好!我是司空。 如何获取流量? 一、平台思维 这是大部分的新手最头疼的问题,怎么做淘宝也不给流量?是不是我的操作哪里不对?还是淘宝太难做了?每到这一步的时候很多新手的信心都被打…

    2023-04-25