苏州网站优化_营销型网站建设_苏州大师兄seo博客

苏州大师兄博客分享苏州关键词排名干货内容零基础网站优化seo培训教程,建站教程、免费诊断网站,小白新手也可以轻松三个月实现网站排名,苏州网站优化大师兄致力打造最有影响力的seo技术博客之一。

网站布局和设计指南,零基础也能看懂

网站布局和设计指南,零基础也能看懂

如果你想兼职为客户搭建网站,或只是建立自己的作品集,那么你可能面临这样的难题:

在没有任何网站设计技巧的情况下,如何建立一个网站?

有以下方案可供你选择:

  • 你可以雇一个网站设计师——不过设计师或者说好的设计师收费不低。

  • 你也可以在 Fiverr,Upwork,猪八戒等等平台找一个收费低的设计师——但是你也知道这是有风险的。

  • 或者你可以直接从网上下载一个免费甚至是高级的主题模板——不过通常这并不能满足你的所有要求。

还有个方法是自己学习一些设计和布局网站的技巧,然后打造出自己的前端展现效果。

不过在你成为一名出色的设计师之前,不妨阅读一下这篇文章。当然了,如果你想制作复杂的网站,那还是得找一位专业设计师和你搭档。

但是我也相信你可以学会如何设计简单的网站,这可以应对大部分小企业的网站需求。

这个方法包括:

  • 了解网站视觉呈现的基础

  • 调查现有网站设计以获得灵感和想法

以上两点正是我用来建立自己的网站的技巧。当然,这只是一个很简单的设计,不是特别精致。但是通常简单的设计就可以满足你的需求。

只要你掌握了设计布局网站的基础,就可以建立自己的网站或是兼职给客户定制。

当然,你可以从每一次网站设计过程中积累经验。随着技能的提升,你将可以创造出越来越复杂的设计。

以下是这个过程中的关键步骤:

  • 确定网站的基础内容

  • 规划网站布局

  • 整合设计

  • 完成作品

每一步都需要调查支撑——浏览其他网站看看他们是怎么做的,然后将其中好的部分复用到你自己的网站中。

需要重点提醒的是:我并不是鼓励你去抄袭别人的样式或者图片(最重要的是,简单的复制粘贴并不能提升你的技能)。

我的观点是从别人优秀的作品中获得创意灵感,再创造出相似的设计。

确定网站的基础内容

在你选择颜色或是字体之前,先回答以下几个关于网站的常见问题:

1. 这个网站是用来推广哪种业务的?

披萨店?摄影工作室?还是书店?网站推广对于任何业务都是有用的,因此你可以任意选择。

我们这次选择推广名叫 Central Coffee 的虚拟咖啡店,因为很多人都喜欢喝咖啡^_^

2. 这个网站要包含什么样的页面?

网页通用页面包括主页、关于我们、联系我们和有关公司产品的介绍。

确定页面构造最好的方法就是先做一个简单的在线调查。

调查现有网站

选择 3-4 个相似行业的网站,观察网站都包含哪些页面。

注意网站是如何设计的并记录下来:

  • 网站包含哪些页面

  • 网站整体样式是怎样的

  • 导航和搜索的便捷性

  • 还有其他你感兴趣的方面

Theme Forest 是一个寻找示例网站很好的地方,上面有大量免费和高级的网站模板以及主题。如果你有关注最流行的主题,就会知道他们通常是好设计的典范。

下面是一个我找到的咖啡店示例:

The7

网站布局和设计指南,零基础也能看懂

页面:单页网站包含以下模块:主页、关于我们、地址、价格、菜单、新闻、媒体报道、博客

样式:现代简洁,高质图片

导航:便捷导航

这些是我从“芝加哥的咖啡店” 研究中找到的一些网站:

The Wormhole Coffee

网站布局和设计指南,零基础也能看懂

页面:主页、博客、地址/联系方式、工作机会

样式:偏现代风,店铺照片走复古风

导航:并不很容易看出这是一家咖啡店,网站导航有点难度

Caffe Streets

网站布局和设计指南,零基础也能看懂

页面:单页网站,模块包含:主页、咖啡(关于我们)、菜单、烘焙以及联系表格

样式:现代简约风(方格布局)

导航:我很喜欢固定下拉菜单的设计,点击每个菜单可以看到相应的内容

Build Coffee

网站布局和设计指南,零基础也能看懂

页面:单页网站,模块包括:主页、关于我们、营业时间、地址、网上商城、餐饮、活动以及联系方式

样式:简约风,白底文字中间穿插全幅图片

导航:很容易导航

Sawada Coffee

网站布局和设计指南,零基础也能看懂

页面:主页、关于我们、食品饮料、媒体报道、联系方式及营业时间、餐厅以及招聘信息

样式:主要为图片,文字较少

导航:导航不太容易找-我差点没注意到右边角落的侧边栏

记录下对自己网站有用的点

浏览了一些咖啡店网站之后,我们更清楚他们的相似点,心中也大致了解哪些对我们有用哪些用处不大。

基于以上调查,你可以记下对自己网站有用的点。

我认为即将建立的 Central Coffee 网站,是包含以下模块的简约风单页网站:

  • 头部导航栏

  • 主页

  • 关于我们

  • 菜单

  • 地址/联系方式

  • 页脚

规划网站布局

此刻我们已经勾画出这个网站有了的大致框架,接下来就是确定各个页面或者模块需要填充的内容。我们最终确定的布局也可以被称为“线框图”。

现在我们还没给这个线框图具体的设计,也就是字体、颜色或者照片都不确定。我们只需要大致清楚需要填充什么类型的内容,或是他们在页面中的位置。这更像是现阶段的结构图或是蓝图。

头部导航

我喜欢 Seven Coffee 和 Caffe Streets 的顶部导航栏。


网站布局和设计指南,零基础也能看懂

不过这两个网站的 logo 都是居中的,我喜欢设置为靠左,首先是 logo,然后是其他部分。

这是桌面版本,对于平板电脑和手机,可以默认在顶部排列 logo 和侧边栏。

点击侧边栏,从右边展示收缩导航菜单。

主页

因为这是单页网站,“主页”就是一进入网站时在屏幕上看到的部分。我喜欢 Seven Coffee 网站店名下的小标签设计。

网站布局和设计指南,零基础也能看懂

这里可以是一张背景图片(像是 Build Coffee)上面有文字,这样的布局同时适用于电脑和手机端。

关于我们

所有的网站的都会有简短的关于我们模块,有些是图片介绍。我准备放一段关于咖啡店的介绍文字以及一些店内环境照片,这样可以吸引用户来店里看看。

菜单

每家网站都有不同的菜单:

  • Seven Coffee 的菜单是一个价格表

  • Caffe Streets 只有商品清单

  • Build and Sawada 提供的是 PDF 版本菜单的外部链接

我个人不喜欢在手机上浏览网站的时候还需要下载个 PDF 文件,因此我准备提供带有图片的简易食品饮料菜单。

地址/联系方式

我想把地址、营业时间和联系方式放在页面底部。用户习惯从网站顶部开始滚动到底部,这样把有行动诉求的放在底部,当他们浏览完所有内容想着接下来的行动时,这些内容可以促进他们采取行动,特别是看到咖啡店的路线指引。

页脚

页脚部分很小,只有小块的版权信息。

完整框架

下面是我用免费在线工具 Mockflow 创建的电脑和手机版本的完整网页框架。在这个网站上创建首个项目是免费的,之后如果你还需要创建模板,就需要付费。Mockflow 很好上手,我也很喜欢这种素描风格,挺有趣的。

网站布局和设计指南,零基础也能看懂


网站布局和设计指南,零基础也能看懂

确定基础设计规范

再提醒一下,我们不是要制作一个很详细很漂亮的网站。不过我们也需要掌握一些基础,像是:

色彩方案

简单来说,色彩方案就是用于网站的不同颜色,就像是绘画、装修自己的家一样。通常你会大面积使用像是灰色白色的中性色调,再结合一两种明亮重点的颜色以突出重要的部分,例如链接和按钮。

如果你需要一些色彩灵感,可以尝试 sample color palettes 这样的画布。

而对于我们的网站 Central Coffee,我将使用 Canva 链接中的 Fall Collection——这是个基于棕色的暖色调。

网站布局和设计指南,零基础也能看懂

我想要营造舒适怀旧的咖啡店风格。

字体

回到之前提到的网站,其中大部分网站都使用无衬线字体(这种字体没有衬线,或是像打印出来的文字)。

<p style="margin-top: 1.4em;margin-bottom: 1.4em;color: rgb(26, 26, 26);font-family: -apple-system, system-ui, "Helvetica Neue&q


专业苏州网站建设,还有很多朋友不知道SEO该从哪里学习,可以添加QQ交流群:913261867,指导+学习资料发放!


cache
Processed in 0.005143 Second.