改善博客设计的6种方法

 Dain Miller. 经过 Dain Miller.  |  2012年2月28日

迄今为止,博客通常可以在寒冷中排除在寒冷中。在我们的博客方面,很多美国折扣了对密集设计的需求 - 无论是我们的公司,还是我们自己。

但重要的是,我们必须以清洁而直观的方式设计我们身份的各个方面,以任何您更喜欢的风格。网络工作的这种难以捉摸的方面是我们不断努力的东西。是的,包括我们花费博客的时间。

很多时候博客都迷失在洗牌中,因为我们认为它们是大量的‘text dumps’谈到信息架构时,当然是他们身份的一个方面,但它们比这更潜力。

一些博客在设计时,很好地展示我们的思想流以及一些投资组合信息,而其他人则非常适合展示新闻和摄影。

关键是,博客可以是各种主题的伟大举行罐,其显示屏归结为您在整个中所做的特定设计选择。在过去的五年里,很多事情都有,使世界比曾经是博客的博客。例如,WordPress是伟大的,主题为我们做了很多设计工作,但如果你’d喜欢向上刺激它,然后有一些你需要牢记的事情。

同样,如果您想编辑主题’S导航或布局然后还有一些您想要了解的东西。这几乎是任何博客引擎,或者在自己工作时。以下是我对我认为这些重要位的几个想法。

 

使用基于阴影的文本效果

文本效果是提出标题标题,导航栏或内容介绍的好方法,提供了它们的博客’重复使用。让’我们经过一些我们看到在网上过度使用的更常见的效果,以及如何正确使用它们。

复古文本

It’往往是一个痛苦的工作,但它似乎已经在过去的一年里一直在一半,尽管这一事实。随着CSS3的出现,操纵和发现完美的阴影是更容易的。我有一个例子来帮助我们了解如何正确创建此效果,然后我将何时何时何时使用它。复古效果的游戏名称没有模糊半径,并使用双阴影。所以让’S说我们正在使用一个黑暗的彩色字体(#707070i),我们想使用双重文本阴影来实现这一目标。它看起来像这样:

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

这应该给你一个漂亮的双边界效果,一个非常70岁’看看它。当然,为了得到真正的70’S Vibe您可能需要添加各种颜色操作,但至少我们有基础效果。虽然,不要’用着色太疯狂了– and definitely don’对于文本阴影的x和y偏移,t太疯狂了(因为它可能会非常快地变得不可读)。在使用复古效果方面,最好的使用是标题标题。这不是一种与小尺寸文本或描述性信息很好的效果。最好让它坚持在博客的顶部,并留下它。

 

让terpress & inset text

CSS. 3影子的另一个流行功能’S优惠是一种插图类型的造型,否则被称为‘letterpress’。这绝对是CSS3文本效果世界的热门话题,所以让’审议如何正确完成它们。通常通过抵消y轴的缩小量来实现插入造型,以在文本的直接背景下给出微妙的突出显示的印象。通常你会看到它被用作与背景对比度的相反(光与暗),因此效果更多地对读者产生了更多的影响。让’跑下一个例子。

浅色背景,黑暗文本:

body { background-color: #888; text-shadow: 0px 2px 3px #666;}

黑暗的背景,浅色文本

body {background-color: #666; text-shadow: 0px 2px 3px #888;}

这将提供一个非常好的分层/插图效果,可用于标题或博客标题。虽然在整个网站上谨慎地使用它,因为没有什么比过度的文本效果更糟糕。在这种情况下,可以在各种子标题或各种侧栏或页脚元素中使用它是可以的–但只是确保你不’T在描述性信息上使用此功能。同样,任何基于阴影的文本效果都不应用于此类东西。

 

使用博客上的图像

让’脸部脸,作为网络设计师,我们喜欢炫耀我们的工作。我们非常喜欢它,即甚至我们的个人博客也可以与投资组合形象一起爆发,并将标题散布在一起。那么为什么不合并这两个?使用标题信息的最佳方法是在图像本身内包含相关信息,以及最佳方法是直接在图像上实现CSS3效果。

如果您很奇怪,我认为这是使用图像的一个如此重要的方面,只需将返回到Google Chrome Web Store(附加组件)。它们能够在没有任何文本的情况下显示数千个图像,但仍然给我们有关所述图像的信息,以知道我们是否要点击它。这很棒,我们更多的人应该是实现这样的技术,不仅可以清理不必要的标题文本,而且还可以在用户体验中提升。

所以让’s重新创建为您的个人博客,但使用自己的触摸,以便您可以为您工作的网站图像显示客户端信息:

首先,我们需要为图像创建一个容器,然后在其中我们需要为我们要使用的文本创建另一个容器。在这种情况下,我们将使用子标题,一点文本和链接。然后在内部为文本创建一个容器,并链接到客户端’我们在显示的网站。

<div><img src="portfolio_image.png" alt="" />
<div>
<h2>Website Title</h2>

<p>Some descriptive text about the project</p>

<a href="#">Read More</a>

</div>
</div>

接下来是图像框的CSS样式,并且在文本效果中发挥之前我们将使用的基本引导样式。这是漂亮的标准,并完全归功于您的个人喜好,所以我赢了’T与普通OLE一起做什么’CSS。只需使用您喜欢的任何东西。

现在是重要的部分,这是文本将在图像本身内显示的方式的样式。有许多方法可以做到这一点,但个人我喜欢保持简单和使用的东西“ease-in-out”使用图像内部的文本的方法。在某些情况下,真正喜欢文本过渡很好,但在很多情况下,最好保持尽可能简单。虽然需要考虑的事情,是您正在写的什么样的博客。

这是一个时尚博客吗?还是冒险博客?因为如果是这样,您可能希望自定义您用来定制的过渡技术,以便您认为最能代表所述主题。虽然(正如我们所说的那样),我们将从想要在他的投资组合图像中进行一些描述性文本移动或过渡的网络设计师的角度来看。

所以让’潜入我们如何进行这次转型,然后我们将审议正在发生的事情。

.image_container img { transition: all 0.3s ease-in-out; }
 .image_container .text_container { background-color: (whatever you want);
 transform: translateX(-300px); opacity: 1; transition: all 0.4s ease-in-out; }

在本节中,我们正在做的是将实际的图像转换出来,并准备文本转换。我们还识别我们希望图像沿X轴留下而不是Y轴,因此这意味着我们将有一个推拉门类型的效果。

现在,我们将设置鼠标悬停效果,并在此事件时获取过渡。

.image_container:hover .text_container { transform: translateX(0px);}
 .image_container:hover img { transform: translateX(300px);
 transition-delay: 0.1s;}
 .image_container:hover p { opacity: 1; transition-delay: 0.4s; }

正如您在这里看到的那样,我们所做的就是与我们上面所做的图像相似。我们只留下了左侧图像后的文本,并给出了一个+ 0.1s延迟,以确保它顺利进行。然后’s about it.

您可以使用一堆其他方式自定义此方法,并且肯定可以使用您可以使用的其他转换效果。请记住,如果使用更高级的过渡唐’T以这种重复的方式使用它们,因为您将与之简单的东西。它们最谨慎地用来强调关键图像。

 

使用创造性布局

通常,作为网页设计师,我们将看到过度使用的趋势,这些趋势已被滥用了一年,并希望成为有关它们的变化的声音。但违背谷物可能是一个冒险的练习,特别是如果你逃脱了’妥善行事(作为一个纸条 - 我并不是说你必须在创造力里‘right way’因为没有‘right way’是创意的)。我提到的是,因为我认为是创造性的是它非常定义,我们从限制或创造性规范中取消了解自己,事实上我会鼓励那个,但我也认为我们应该谨慎,因为这些规范在我们的网络中没有产生的原因设计主题以及我们可以做的创新,并考虑到。

唯一的文本对齐

当以创意或独特方式(即不是12pt Arial Center-Anigate)一起使用文本时,请记住您的文本不是页面上的主要内容非常重要。它已被降级到支持元素,尽管重要的是。

有一个问题总是在使用文本时问自己,“这与页面的其余部分均匀余井吗?”它可能与某些投资组合工作,某种随机图像,或者也许只是页面两侧的各种文本中的各种文本。

但无论它是邻近的还是垂直,你都需要尽可能地尝试平衡它。想想网格线,如果你必须(960电网系统 is what I’d推荐)。研究他们将网格布局放在页面上,然后问问自己为什么 - 如果您的是与此相同的均衡,则推断。想象一下,您正在沿网格系统本身铺设您的内容,并尝试在这种情况下考虑它在CSS中的复制。

 

创造性的页脚

创意页脚可以真正为博客或网站添加很多个性,似乎是有点思考的。我们是否正在谈论jQuery滚动,以在一个美丽的页脚中落地我们‘under-the-Earth’风格,或只是在公司的底部’S网站或博客,这是一个网站的一部分,但一个可以产生非常强大的影响。意见分为案件的程度,以及为什么可能是。我有自己的理论:当我们读取网页时,我们从顶部开始并进入底部,它位于页面脚下,我们得出了我们的结论’ve read.

在使用创造性的页脚时,您想记住一些事情,以及我注意到我最爱的页脚上使用的一些最佳实践。对我来说,使用以这种方式使用页脚的最重要部分是使用与您的网站相同的颜色方案,但是  不同的 对比。这是非常重要的,您当然可以在字体颜色上泵泵对比度,这是一个对比的对比度,您可以在第一名的页脚上的总体主题上工作。

要记住的重要事项是,您希望为此部分拥有一个很好的深层风格。它给出了一个很好的完成意识。使用此技术时,您可以使页脚与您一样高’d在原因内,因为具有对比的颜色方案,很明显,这确实是页脚部分。

就内容而言,在新页面的世界中,它可能是适当的,添加您的徽标插图和博客名称,社交网络图像或链接,您的最新推文,甚至是一个很好的简单接触形式。这当然可以根据您的个人偏好而有所不同,但我的观点显示所有这些选项是为了说明过去的演变,以便在网站或博客的底部显示。

 

jquery滚动

这是我在网站上进行导航的我最喜欢的方法之一,我也认为它专门适用于导航博客上的帖子。有几种不同的方法可以使用jQuery,所以在这里,我将介绍我最喜欢的(和最简单)的方法是做一些平滑的滚动,然后通过发生的事情以及如何实现它。

这是垂直滚动的代码,作为水平滚动isn’t as desirable.

$(function() { 
 $('ul.nav a').bind('click',function(event){ 
 var $anchor = $(this);

$('html, body').stop().animate({
 scrollTop: $($anchor.attr('href')).offset().top
 }, 1000);

event.preventDefault();
 });
 });

这里发生的事情可能看起来很复杂,但它实际上非常简单。我们正在打开一个功能“.class”我们将点击的导航元素(我们调用此点击事件)。因此,这里最重要的部分是标题列表(UL)的类别“nav”. Or replace the “nav”在代码中,无论您指定该类。这对一个运作的jquery滚动来说是几乎是它,只是把它扔进你的网站并链接到 缩小的jquery. (优选),你们都准备好了。

就用法使用垂直滚动来说,它非常无限。很多人享受不必手动向下滚动,他们真的很喜欢这样做的页面,它也是从帖子发布在网站上的辉煌方式,特别是如果这些帖子很大。我经常会用它来移动到我博客中的各种投资组合子部分或通过网站上的类别。如果您正在主题为您的网站,或为您的类别或博客主题为主题,也是一种完美的技术。

我希望这些技术中的一些人有助于你们在试图在博客上应用各种设计美学。请记住,谨慎使用它们,并尝试在使用Flashy Effect时确保您的最佳判断。我们有义务创建互联网’没有像外界的某些方面一样丑陋。虽然这是一个大而压倒性的任务,但如果我们在一次和一天一天一次,我们可以实现一项设计。保持简单,保持诚实,保持真实,并始终激情在你做什么 - 因为它将永远闪耀。

 

你最好的博客设计技巧是什么?什么是一个真正伟大的博客设计?让我们在评论中知道!