建站知识
首页 > 网站建设 > 建站知识 > 个人网站规划(产品策划)、设计阶段和开发阶段

个人网站规划(产品策划)、设计阶段和开发阶段

发布时间:2021-03-20    来源:广州网站优化公司     浏览次数:

personal web.png

[网站地址:]

如果您想学习网页设计,那么做项目是最快的学习方法。另外,如果您要切换到设计,则必须具有真实的作品。所以我想到了制作个人网站的想法。

产品开发过程通常分为7个阶段:产品计划,交互设计,视觉设计,前端开发,后端开发,测试和发布。建立个人网站时,我的工作流程大致相同。

我只在FreeCamp上做了简短的代码研究。我对HTML和CSS有一个大概的了解,并且我没有开发能力。因此,我邀请工程师0neSe7en帮助开发部分。

本文分为三个部分:初步计划(产品计划),设计阶段和开发阶段。

一、初步计划(产品计划)

在我真正开始之前,我先整理了我的特定需求。个人网站主要展示个人设计作品,摄影作品和经验分享。详细信息如下:

个人网站map.png

设计的初始阶段就像学习乐器,首先学习如何演奏别人的歌曲,然后学习制作自己的歌曲。从其他人的实践中学习,参考他们的布局网站架设,交互,运动效果,颜色匹配等。有关网站设计的灵感,您可以查看Awwwards和SiteInspire。

这是我用来参考和参考的网站

之后,我浏览了许多有关在国内外建立个人网站的信息。其中包括国内设计师朱利安(Julian)的文章,讲述了他在建立个人博客方面的经验分享。尽管这是2014年的文章,但其内容详尽且仍对初学者具有参考价值:

二、在设计阶段进行交互设计

首先在纸上画草图,这是一种低成本,高效的方法,可帮助设计人员快速表达概念。

然后使用“草图”进一步绘制线框。市场上最主流的线框图工具是Axure,较旧的OmniGraffle也是许多设计师的选择。但是,关于使用哪种工具尚无最终结论。工具就是工具,只要清楚地表达出来即可。您可以从Zhihu看这个问题。请移到此处以获取完整的线框。

视觉设计

使用的设计工具主要是Sketch,某些图像处理使用Photoshop。

样式

网站的整体风格是扁平的,使用空格来创建简单而慷慨的功能。

网格系统

网格系统是一种合理地计划页面的方法,可以帮助设计人员科学有效地实现对齐和一致性,而不仅仅是依靠直觉。它可以使网页看起来整洁网站架设,结构化。

当前,家庭使用的主流是960网格系统,一方面是出于历史原因,另一方面是出于对长文本的易读性的考虑。许多新网站也开始采用1024网格系统。我使用1152网格系统,该系统分为12列。

字体

在Web设计中,英文字体有很多选择,而中文却很少。我使用的英文字体来自Google字体,即Playfair Display和Open Sans。 Google字体提供的字体可以免费下载,因此设计人员可以大胆使用它们,而不必担心产权问题。中文字体是Pingfang(在Mac下使用)和Microsoft Yahei(在Windowed下使用),它们都是官方的默认字体。

Google Font.png

颜色

颜色冷,以黑色和白色为主色调,重点颜色为红色。

三、发展阶段

视觉草稿完成后,进入开发阶段。

开发的详细内容由0neSe7en引入,如下:

发展

开发分为两个部分,一个是博客系统,另一个是“关于我”页面。

Ghost直接在博客系统中使用,并且选择了一个主题。我选择Ghost而不是Wordpress,因为Ghost比Wordpress更轻巧,并且模板熟悉Handlebars。因为它是博客系统,而不是复杂的CMS系统,所以Ghost更适合。

“关于我”页面是纯静态页面,使用bulma作为基本CSS框架。因为它面对的是一小群人,所以它直接使用bulma(一种现代CSS框架),并使用flexbox进行布局。由于使用npm和es6语法,因此使用webpack进行构造和打包。

测试

上一篇: 如何编写代码来开发一个有吸引力和功能的站点

下一篇:制作一个网站一般要多少钱?注册几十元就能搞定

返回顶部

售前客服QQ

售后客服QQ

加微信交谈

加微信交谈

x