+$And if you're fully convinced and inspired to make your own site, you can get started here with aWordpress教程

01. +$Middle Child

WordPress websites: Middle Child sandwich shop

+$Middle Child is built on a completely bespoke WordPress theme – click the image to explore the site

+$Award-winning, Philadelphia-based sandwich shop Middle Child needed a website that matched its quirky, unpretentious vibe. Full-service design and technology studio+$Self Aware+$rose to the challenge, creating a site based on a completely bespokeWordPress主题运用+$Timber+$ACF+$– a combination that studio partner Mike Wagz calls "a game-changer for serious WordPress theme developers".

+$Self Aware also made use of the latest web technologies in order to offer an optimal experience: the layout was created usingCSS网格,和服务人员+$caches static assets including CSS and JavaScript files in order to speed up initial load times.

+$"Middle Child oozes atmosphere from every nook and cranny," adds Wagz. "It warmly welcomes customers from all walks of life with just the right amount of fun, kitsch, and quirk. I think this design is successful because we were able to capture this spirit and translate it to the web."

02. 海洋收获

Sea Harvest website on iPad

ED在其基于WordPress的网站上使用报纸式布局进行Sea Harvest

当基于堪培拉的海鲜市场Sea Harvest需要一个新的品牌标识和智能数字存在匹配时,它转向澳大利亚网络和品牌代理机构ED。 WordPress网站采用引人注目的报纸式布局,有很多奇特的探索方式。

+$"When we think about seafood, many of us are taken back to a memory of eating fish and chips by the beach with friends and family," says designer Cam Tidy. "Often these takeaway joints would wrap your food in newspaper, so it felt natural to explore that as a visual idea."

+$Replicating a static, print layout on the web wasn't without its challenges, though. The team used CSS Flexbox to reposition content whilst maintaining consistent spacing, regardless of screen size. Nearly every measurement is based on a responsive scale using REM units, making it easier to maintain control over type and image proportions as the browser scales.

+$Developer Bryn Shanahan's favourite feature is the fact that users can 'draw' on the site, including via an互动文字搜索+$. "We achieved this by covering the site with an HTML5 Canvas element, which was then used to draw the user's drawings onto," he explains.

ED使用WordPress进行很多网站项目,发现它对用户友好且直观。 “[WordPress]具有简单的后端开发,可以让更多的时间专注于前端,将设计变为现实,”开发人员Adam Forcucci补充道。 “的能力使用WP Rest API使其无头,允许我们使用React等框架,这将成为我们在平台上未来发展的核心。“

03. +$KOBU

WordPress websites: KOBU creative agency

+$The website for KOBU opens with an undulating lava lamp-style homepage

+$Portfolio sites, unsurprisingly, continue to provide some of the web’s most fertile ground for creative expression and inspiration. This online calling card for Portuguese agency KOBU follows that ethos with a tasteful, restrained WordPress website that still bubbles with character. Calling itself a 'brand laboratory' that is unafraid of experimentation, the technical work here demonstrates imagination over complexity.

+$Over a series of elements, we get a reminder of how CSS and SVG can be combined for maximum frontend character. Absolute positioning is used to overlay charming wireframe motifs, breaking up the lines between bold background colour blocks and linking sections together. A looped HTML5 video panel gets a unique wiggly edge using an SVG shape as a mask positioned above, before case study images have their border radius halved to go circular. The site makes neat use of the slick.js carousel library to ‘trot’ the KOBU team, with office horse, through the middle of the main page.

+$The zenith, though, is probably the bit we see first, opening on an undulating lava lamp-style header produced by manipulating SVG paths. Utilising the anime.js plugin, a polyvalent JavaScript animation engine, it’s an eye-catching trick for establishing colour palette, if nothing else.

作者:+$Mark Billen


noformat homepage


Noformat是一家位于纽约的战略设计工作室。主页采用动画眼球设计,跟随访客在屏幕周围的光标,而覆盖文本循环遍历noformat可以创建的所有内容。为了创造眼球,该团队首先探索了设计After Effects CC在使用three.js构建交互式版本之前,noformat的创始人兼创意总监Ian Brewer解释道。

+$"We used vertex and fragment shaders to optimise for GPU rendering and made it pulsate and flash the noformat logo inside," continues Brewer. "We then applied post-processing effects to give it a more organic and less 3D look by blurring the edges and adding bloom to the highlights."


+$"We chose WordPress for our site for speed to launch, and flexibility," explains Brewer. "Over the years we have built our own libraries and module-based editing systems that allow us to create or edit a site faster than any other CMS solution."

05. 女人和凶猛

荷兰体验设计工作室仙境已经为Femme和Fierce提供了电子商务。 WordPress网站的面对面,冲突式配色方案提供了在线时尚零售商的品牌信息。动画'贴纸' - 旋转棒棒糖,刺箭,舔嘴唇 - 创造一种厚颜无耻的感觉,应该与Snapchat / Instagram一代产生共鸣。

06. Puree Maison

Purée Maison WordPress website



07. 我们实际上是

We Virtually Are's site


当您的业务就是用虚拟现实来吸引人们讲述情感故事时,您需要一个吸引人们进入您工作的网站。精品VR工作室We Virtually Are已经管理了那个,然后一些。它的网站,由Herdl在WordPress上,使用大量尖端技术,包括WebGL和360度视频,为您提供不可抗拒的沉浸式服务。查看奥迪的VR测试驱动器,以及意外的名人客人。

08. +$Asaro

WordPress websites: Asaro

+$Asaro's site is responsive enough to look beautiful on all screen sizes

+$Asaro is a provider of unique adventure experiences and entertaining journeys for superyacht guests around the world. As part of a broader corporate rebrand, this slick website was designed and developed by Bristol-based agency绿色变色龙

+$Built on a custom WordPress framework to keep ongoing content editing easy for the client, visitors are taken on a voyage of discovery packed with charm. Subtle scroll effects are linked neatly to an interactive dotted line, plotting navigational progress in the way a yacht captain might mark charts. Custom CGI renders have been utilised as a graphical device for representing Asaro’s exclusive service offerings, in light of a scarcity of photographic assets due to the private nature of the events.

+$“The art direction was inspired by a mixture of water drop photography and theatrical poster design,” explains creative director Tom Anderson. “We loved the aesthetic of the photography style and felt that it tied in nicely with the underlying nautical theme of the project.”

+$Responsive enough to not only look beautifully consistent on smaller screens, access speed was also a motivation for streamlining performance. With boat dwellers at the mercy of marine web connectivity, load times are more chipper than choppy across desktop, tablet and mobile.

作者:+$Mark Billen

09. 丹麦设计博物馆

WordPress websites: Danish Design Museum



10. 华特迪士尼公司

Walt Disney website



11. 凯蒂佩里

Katy Perry's website


流行公主Katy Perry使用WordPress来主持她的官方网站。聚焦 - 可以理解 - 在视觉和社交媒体线索上,该网站利用艺术家的高规格投资组合作出大胆的陈述。向下滚动以查看旅行日期,商品等,或使用图标查看更多信息。


12. 墨水盒

Ink Tank website

Kao Collins的网站旨在让您考虑墨水

+$Starting out in 1989 as Collins Inkjet, a one-man operation supplying ink for Kodak's continuous inkjet printer, today Kao Collins is one of the world's leading suppliers. And if you've never really thought about ink (beyond cursing when your printer runs out), Kao Collins' site, The Ink Tank, is about to change that.

由__建造DBS Interactive+$, The Ink Tank is an eye-catching WordPress site that pulls out all the stops to bring you cutting-edge news from the ink industry and showcase some of the creative ways businesses and artists are currently using ink. The highlight, as far as we're concerned, is its History of Printing section: a gorgeous parallax single-pager packed with animation and effects, taking you all the way from clay tablets to today's high-speed single pass printing, and looking ahead at some of the future possibilities of printing.

13. 哈佛大学设计研究生院

Harvard GSD website


陈规定型的大学网站往往是一个非常无聊和过时的事情。但是,哈佛大学设计研究生院的网站,由设计Upstatement+$, sets the bar much higher. "The GSD is a fantastic place where all kinds of amazing ideas are being generated, and we wanted to really bring out the stories and topics inside the school and surface them in a way that showcases the ideas and energy of the community," says Mike Swartz, partner at Upstatement.

GSD的设计引人注目,充满乐趣和积极进取,尽管它可以在需要的时候让内容显示出来。周到的动画在恰当的时刻交织在一起,而不是压倒性的。每个悬停状态都会调用动画,帮助用户与内容进行交互。图像的使用是有目的的 - 没有一个用作背景或纹理。所有都有功能,大多数都有评论。

除了所有视觉复杂性之外,网站背后的开发团队将这个项目带到了另一个层次。 Swartz说:“Upstatement在这个项目上的工程负责人Mike Burns与学校一起收集并对其基础设施进行了现代化改造,将其全部整合到一个由WordPress驱动的API中。”

14. 旅行波特兰

Travel Portland website - built on WordPress

精彩响应的Travel Portland网站建立在WordPress上

+$Travel Portland aims to inspire people to visit Portland in Oregon, US, and to help them plan their trip with tools and content, highlighting the unique opportunities in the city. Every page of its site has been designed cleanly, with images capturing the Portland experience – from waterfalls to food trucks.

响应精美的网站建立在WordPress上,并使用基于Zurb基金会框架的定制响应主题。整个站点也使用第三方API,包括Storify,MapBox,Weather Underground和ChooseCulture。