详细分享如何建立一个属于自己的完美站点


Warning: file_get_contents(http://www.linkedin.com/countserv/count/share?url=http://www.allline.cn/2016/02/28/%e6%88%91%e4%bb%ac%e9%83%bd%e5%b7%b2%e7%bb%8f%e9%95%bf%e5%a4%a7-%e8%bf%98%e6%9c%89%e5%a5%bd%e5%a4%9a%e6%a2%a6%e8%a6%81%e9%a3%9e/&format=json): failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /www/wwwroot/allline.cn/wp-content/plugins/tk-social-share/tk-social-counter.php on line 145

需要有一个想法

一直想做一个自己的网站,可以自己定义里面的页面和交互,还可以作为一张不错的名片告诉大家,想想就觉得挺美,不过有时候考虑到不会技术,又好像挺复杂的样子,用模板不符合自己的要求,后来就算了,可是看到漂亮的个人站,这股热情又燃烧了,又考虑到自己不会技术…最后的最后还是没搞成。

而我,和你一样,燃烧几次之后动手了 这次我把我的经验详细的分享给大家。希望对你有那么一点点帮助哈!

给你定个大概的感觉,因为我起初也只会设计,所以由我来讲技术的话应该容易懂 

大概步骤 【 取名、选域名、Logo设计、网页设计、代码编写、网站运营 】

取名

首先当然就是取个名,这和生崽是一回事,不管他以后成事业成不成,首先得树立一个愿望。而我,因为自己做互联网产品也非常热爱,所以我希望我的作品能够全线出击,冲出亚洲,引领全世界。好宏伟吧。

开始取名—我的名字从我的目标中下手,我觉我最关键的就是要全线出击,就从这个分析,首先出击,这个不太好,容易理解成(出JI),那全线吧 嗯, 还不错,有人说他听起来像权限 我觉得没关系,这个时候我想到了手机里的微信,我就觉得这名字好,一个人有没有微信(威信)很重要,一个人有没有全线(权限)也很重要,所以我就取名为全线。

 

微信(威信)  你有没有威信?               全线(权限)  你有没有权限?

 

域名选择

名称确定了就要开始准备域名了,首先是quanxian.com 发现被注册了,然后就想了一大堆的类似的觉得都脱离了那个想要的味道,后面想想自己要冲出亚洲,还是可以往英文方面靠,线的话我想到line  有互联网相关的“online” 我感觉还不错 全的话有whole这个不好看,然后是all ,耶有意思all加上line这样组合起来虽然是不标准的英文,但有意思哇 是不是和追波有点类似 追波3个b(dribbble),不管那么多了就是好看 后面发现 allline.com alllines.com 都被注册了,就注册了中文域名allline.cn。

 

LOGO设计

下面是Logo,这时候我又想到了我的愿望,我说过一开始就一定要宏伟,所以我想先看看大牌的LOGO

看了这些Logo我发现一个特点就是简洁还有就是和圆都有些关系,所以我希望我也能从这个作为参考,首先是寓意,我是做视觉的,这时就想到了画龙点睛(其实我还想了一大堆的事物因为怕自己啰嗦改成说这时我想到了),这个寓意挺好的,分析三个点【眼睛,圆、简洁】然后我就开始疯狂的草图,效果图,自己评审自己的弄了好多飞机稿(实话自己比客户更严格),然后我定下了这个,我觉得很好看。

色调选择

大概的色调,其实这个还是蛮重要的,我看了很多互联网的产品很多都是蓝色,绿色

80731458962891

其实谷歌和QQ的颜色基本已经都包括了,我觉得我需要特别一点,我选择了紫色,我觉得这颜色高贵典雅,有气质。OK 就这么定了

20061458964775

(大家可以现在地址栏输入网址看看效果,手机和PAD都可以看,我都有针对性做优化) 点击打开

网页设计

作为一个UI设计师,专注移动终端的界面,如果我来设计网页的话一定得兼容所以移动端的设计,所以这中间给自己加了点难度(后来发现其实还蛮简单的),我这里就讲讲两个重要页面的设计了,其实我发现网页设计这边有太多的高手了,大部分都可以去请教他们,这里我就讲讲我的思路,抛砖引玉了。

05

 

首页,这个很重要,这有几个点要讲一下的是头部,我这里用了深颜色,我这样是我想让导航区稍微弱一点把更多的点给到下面的大banner,然后导航和顶部LOGO融合成一块,这样就不会太分散,Logo放最中间比较有统治性君王的感觉。然后就是下面的banner,其实看似简单的大广告,定尺寸比较难定,我就定了好多个尺寸,为了这个我还买了个大显示器,为了看效果和设计(听起来有点扯淡,不过这是真的) 首先是高度,不能太高,太高小屏幕会截断,不能太矮,太矮了小气(真的小气)我们不能拿淘宝的那个尺寸来设计不符合,后来调来调去就觉得这个舒服(还希望高人指点), 然后就是宽度,第一是考虑大部分显示器的宽度,第二个是你以后做多大的尺寸的图就会占多大的容量,太大可能会影响访问速度。总结起来就是全屏看起来要大气多了,但是做成全屏的要很大的图片,然后我就想了一个办法,搞个背景根据我的广告图自动换背景(这个属于JS知识后面会分享到) 这样可以做一个假全屏,效果很好,最后我定了1000的宽度554的高度。感觉效果不错,这个也就是顶部部分了,也是最重要的部分。 百度浏览器尺寸统计图

06

然后就是作品页,作品也是非常重要的,毕竟精华部分都要在这里出现,先找参考这个是我的习惯了,我访问了很多设计师的个人站,很有名气的,一般名气的,国内的,国外的,看了很多很多,我发现一个共同点大部分都是列表展示然后点击去看详情,在这一点上我感觉体验不是很好,首先小图很难展示产品的细节,我有尝试做列表展示图,直接放大图空间又有限制,第二个我想到了信息扁平化,人家来看你作品还得点那么多次,第一次关掉,所以我越来越觉得这种方式不好。就开始尝试很多种设计办法,我又开始找案例,发现有一个交互不错,上面是小图下面放大图,可以定位,我觉得这个完全和我想的一样,我借用了一下他的思路,根据自己的网站形象进行了定制设计出现在的这个样子。

感谢原创作者。 现在是首页和作品展示页都出来了,后面的页面就自己发挥咯,想做什么就做什么,我的网站就只做了一个博客,解决方案和联系我。大家可以去发挥自己的想法加一些自己的页面

07

 

到目前为止我们已经完成了 取名 域名 Logo设计 主色调 网页设计

接下来我们要完成的就是写静态页面了,因为我要考虑适配所有终端,要用的技术就包括DIV+CSS HTML5 css3 和JS 了 这些东西我一开始也不懂,看了一些视频教程后开始做一两个页面差不多就会了,特别是DIV+CSS html5 和 CSS3这些东西掌握起来非常快,当然我们做个自己站也用不到高难度的技术,现在就是JS还不是很深入研究。而我学到的这些我想今天如果分享的话这篇文章太长了,就在第二章的时候一点点来讲吧 今天的结尾我就分享一下我是怎么去学习这些技术的,第一个是我们公司到处都是技术大咖,可以问他们,第二个是网上学,实在太多教程了。在这里我要特别感谢中间层的yiteng和服务端的wangyu半夜都在给我讲解技术。谢谢你们

如果你网站设计好了 静态页面也写好了的话,就可以捣鼓捣鼓后台,我用的是国内的开源程序,国外的我也用过wordpress 这个我也可以给大家分享都很简单,只要掌握一点你马上就会了。 这些都搞好了,就买个空间吧,把网站放上去,下一秒你的网站就可以让全世界访问了!

晚安,好像今天有点晚了 ~~我们下节见,对了,帮我点个赞

 

(大家可以现在地址栏输入网址看看效果,手机和PAD都可以看)   点我打开

allline

发表评论

电子邮件地址不会被公开。