行，今儿个跟大伙儿掰扯掰扯我折腾咖啡店网页的事儿。这事儿，说复杂也不复杂，就是费工夫。

起个头儿

我那朋友不是开了个小咖啡店嘛名字挺文艺。之前就在朋友圈发发图，结果老有人问地址、菜单，麻烦。他干脆就说：哥们儿，你不是会鼓捣点网页吗？整个简单网页呗！得，这活儿就落我头上了。

动手之前

我琢磨着，咖啡店网页，得让人一看就想喝咖啡对？ 光秃秃一堆字肯定不行。先跑去他店里，咔咔一顿拍：

• 门口那个带点锈的铁艺招牌，挺有味儿；
• 台上咖啡师拉花的瞬间；
• 店里最角落那个洒满阳光的沙发座；
• 还有那几款招牌咖啡和甜点。

拍完心里大概有点谱了，想着得暖和点、慵懒点的感觉。

开整设计

回去先没开电脑，抓了张纸瞎划拉草图。

• 最上面：大大的一张店面招牌图，菜单按钮就挂在招牌右下角那种感觉。
• 往下：直接整块儿放最显眼的几款咖啡，图要大！名字要显眼！旁边飘个‘招牌推荐’小标签。
• 再往下：分两块，左边放那几张环境图，右边堆文字：讲讲故事，营业时间，电话地址啥的。
• 最底下：简单粗暴，就店名、地址、电话，还有个小地图标记。

颜色上，基本围着咖啡色、米白、一点暖橘色打转，看着像咖啡里加牛奶那种柔和调调。

电脑上折腾

草图瞅着还行，开电脑干活！直接打开PS，别问为啥不用新的，顺手！ 新建个空白画布当底子。

• 把拍的招牌图拖进来，裁剪一下，让它占满顶上那块儿，大气！
• 菜单按钮嘛就搞成圆角小方块，字体选了个秀气点儿的，鼠标放上去颜色变深点，让它有反应。
• 轮到那几个推荐咖啡了，可劲儿找角度好的图，一张张处理亮度对比度，背景调成淡淡的米色。
• 下面环境图那块，左边拼了个照片墙，三张图自然点排开；右边，字体选个看着舒服的，行距稍微大点，不挤得慌。
• 联系方式那块最省事，大字体把店名、地址、电话怼上去，下面再贴了个简易地图标记图标。

边做边感觉，图片多了好像有点拖速度？管他，好看要紧，回头让他找个靠谱点的主机。

差点掉坑里

预览了一下，感觉还行。发给朋友看，他倒是乐呵，但指着‘招牌推荐’那块儿说：你这字颜色太浅，我这老花眼差点没瞅见！我一拍脑门，真是！ 赶紧把那个小标签颜色改成比咖啡深一点的棕色，一下子跳出来了。

整完了

导出那堆图片和画好的结构样式（学名叫管他，反正就是个布局图），打包扔给朋友。完事儿！ 跟他说：找个便宜点但别太拉胯的网页托管的就行，照着图弄上去完事。回头需要加比如菜单详细、活动啥的，再往里塞模块呗。

至于为啥要这么搞？ 朋友非让我加点高大上的理由。说白了，开咖啡店不就是卖个情调、卖个方便吗？网页让网上溜达的人一眼看见咖啡，一眼知道你家在哪儿，一眼找着电话能预订，这就够了！整那些花里胡哨的动画，不如咖啡香来得实在！

得，今儿就唠到这儿。对了，刚才倒咖啡发现笔记本键盘上洒了几滴...淦！擦键盘去了！