经验分享!教你设计自个儿的WordPress主题 - 优设网 - UISDC

经验分享!教你设计自个儿的WordPress主题

2014/04/23 8666评论区

@十萬個為什麽 :如果你是个网页设计师,并且经常使用wordpress,你可能会喜欢这个案例研究,我将展示我设计wordpress主题的过程。尽情享用吧!

几个月前,我应Slocum Themes之邀接受一项挑战,为博主们设计wordpress主题。理念是运用所有wordpress默认功能,创造一款简洁有效的主题。

我决定从社交媒体汲取灵感。毕竟,社交媒体的升级版可以被看作微型博客。对于像facebook、twitter、google+和pinterest这样的社交媒体平台如何展示文章,我做了一些研究,尤其是带照片的文章,然后Socialize就诞生了。

网页设计推荐教程:

《PS教程:教你设计有范儿的个人作品时间轴网页》
《PS经典教程:从零开始设计一个漂亮的网页》

设计过程

第一步永远是在纸上画线框图,然后在Photoshop中进行设计,再是编码。鉴于是wordpress主题,我能够列出网站所有的组件和元素,所以我决定遵循基本的wordpress博客样式(页头、主体、侧边栏、页尾),不用画太多线框图。

相反,我想创建一套样式指南,所以我将一切分解,一次设计一个组件,保持整体设计的统一。我只在所有组件完成后,才将它们组合起来,而非采用常规方式,首先设计首页再是内页,我想要创造一套能够用在所有页面的可靠的指南。

Case Study - WordPress Theme Design

文章组件

考虑到这一点,我认为我的关注点应该在博客最重要的元素——“文章组件”上,它在首页上要如何展现,才能吸引用户深入阅读。所以这就是一切的起点。我将文章组件分解为更细微的元素,例如:

  • 文章日期
  • 文章作者
  • 文章标题
  • 文章缩略图
  • 文章描述
  • 操作项

我决定忽略某些其他的常见元素,例如分类、标签、评论数。

画了几稿后,我对于自己想要设计什么有了固定的概念。我不是在重新发明轮子,而是在试图简化它,如今多数博客主题有着数量惊人的选项,我的理念是让它在桌面和移动设备上都保持简单有效。

Case Study - WordPress Theme Design

随着第一个也是最重要的组件完成,我列出其他所有需要设计的组件和元素。

  • 颜色
  • 字体
  • 栅格
  • 图片
  • 导航与按钮
  • 侧边栏
  • 页尾
  • 文章翻页
  • 文章评论

颜色

由于主题会有各种配色方案,使用多少颜色,用在哪里就显得很重要。我是这样分解它的:

  • 主色
  • 辅助色
  • 背景色
  • 文字颜色
  • 链接颜色
  • 链接
  • 鼠标悬停状态
  • 鼠标点击状态

Case Study - WordPress Theme Design

一旦颜色指南创建好了,可以使用Adobe Photoshop轻松将它换成另一套颜色,降低饱和度到黑白,再覆盖一层所选的颜色。

字体

下一步是定义一套字体结构基准,用来指引首页和内页的文章。这个项目中,我所选的字体是Source Sans Pro,由Adobe出品的一款无衬线字体,在用户界面中表现良好。尽管我在photoshop中创建了一套简易指南,还需要编码出一套完整版以供参考(查看字体指南)。

Case Study - WordPress Theme Design

栅格

我创建了一套对于带有侧边栏的博客非常有效的栅格系统,流式布局,完全是响应式的,最大支持1200像素宽

Case Study - WordPress Theme Design

图片

尽管主题是响应式的,某些图片的尺寸会根据屏幕尺寸变化,我还是想根据栅格设定最大和最小尺寸。

Case Study - WordPress Theme Design

导航与按钮

导航保持非常简洁,颜色效果由我所选的色彩决定,为了保持整个主题的一致性。

Case Study - WordPress Theme Design

侧边栏和页尾

页尾和侧边栏用的是相同的组件,所以我将它们设计成一个,唯一不同的是,页尾的背景色使它的组件略感不同。

Case Study - WordPress Theme Design
 
Case Study - WordPress Theme Design

文章和评论组件

要完成我样式指南中的所有组件,还差文章和文章评论组件。

Case Study - WordPress Theme Design
 
Case Study - WordPress Theme Design

最终的设计

一旦我的样式指南完成了,我只需要把一切拼凑起来,我编写了HTML和CSS,交给我在Slocum Studio的朋友把它处理成wordpress主题。有些元素在编码过程中有轻微的改动。

这是最终的首页,这套主题完全是响应式的,特色是支持8种不同色彩。

Case Study - WordPress Theme Design

WordPress主题演示地址

http://slocum.me/slocum-themes/socialize-pro/

原文地址:abduzeedo
译文地址:colachan

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量67万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/case-study-wordpress-theme-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里