12 must-have user testing tools

New user testing tools and frameworks seem to pop up every day. Below is a varied list of tools that accomplish various testing needs. Each one should be investigated to make sure it fits with your tech stack and technical needs.

01. Jasmine

Jasmine is a behaviour-driven development framework for testing JavaScript code. It doesn’t depend on any other JavaScript frameworks and it doesn’t require a DOM. However it does have a clean, obvious syntax so that you can easily write tests.

02. Mocha

Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.

03. Chai

Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.

04. QUnit

QUnit is a powerful, easy-to-use JavaScript unit testing framework. It’s used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code.

05. Sinon

Sinon.JS provides standalone test spies, stubs and mocks for JavaScript. It doesn’t rely on dependencies, and works with any unit testing framework.

06. Karma

Karma is a framework-agnostic test runner for connected browsers. The results of each test against each browser are examined and displayed via the command line to the developer such that they can see which browsers and tests passed or failed.

07. Selenium

Selenium has a straightforward aim: to automate browsers. It is used primarily for automating web applications for testing purposes, but it can just as easily take care of web-based administrative tasks.

08. WebdriverIO

WebdriverIO lets users control a browser or a mobile application with just a few lines of code, making test code simple, concise and easy to read. The integrated test runner also lets you write asynchronous commands in a synchronous way so that you don’t need to care about how to handle a Promise to avoid racing conditions. Additionally it takes away all the cumbersome setup work and manages the Selenium session for you.

09. Nightwatch

Nightwatch.js is an easy to use Node.js based End-to-End (E2E) testing solution for browser based apps and websites. It uses the powerful W3C WebDriver API to perform commands and assertions on DOM elements.

10. PhantomCSS

PhantomCSS takes screenshots captured by CasperJS and compares them to baseline images using Resemble.js to test for rgb pixel differences. PhantomCSS then generates image diffs to help you find the cause.

11. PhantomFlow

PhantomFlow delivers UI testing with decision trees. It provides an experimental approach to UI testing, based on Decision Trees. A NodeJS wrapper for PhantomJS, CasperJS and PhantomCSS, PhantomFlow enables a fluent way of describing user flows in code whilst generating structured tree data for visualisation.

12. Percy.io

Percy provides iterative and fast feedback about visual changes, delivering what is calls continuous visual integration. It does this by running with a test suite, taking DOM snapshots, and uploading the, to the Percy service where they are rendered in a modern browser.

This article was originally published in net magazine issue 285. Buy it here.

Related articles

How to automate your Sketch handoffs

Design handoffs usually require multiple assets, developer walkthroughs, and even tedious redlining for every element. It’s a lot of work that risks misinterpretation.

With the right tools, however, you won’t just automate redlining — you’ll also be able to hand off a single prototype with all the interactions, specifications, and documentation developers need to reference. No more scattered assets or documentation. Just one single source of truth for development to match design.

In this tutorial, we’ll explain how to synchronize design and development using Sketch (for creation) and UXPin (for prototyping, specification, and documentation).

01. Create your design

Whether you’re building an app or a website, you can create a design either in Sketch or in UXPin itself. Here, we’ll create a quick confirmation message inspired by Material Design.

If you created your work in Sketch, import it into UXPin. The process is simple: 

1. Select an artboard and find the UXPin Export function in Sketch’s Plugins menu. 

2. Then drag the resulting file from your computer into a UXPin project folder. The system will create a prototype automatically.

Once you’ve imported the design, you could leave it static and move straight to steps three and four below to generate your documentation and specs. A prototype, however, is always more useful for communicating system behaviour to developers. 

Now let’s explore how to transform your static file into a lifelike prototype.

02. Make it an interactive prototype 

Prototyping is key to communicating ideas before spending time in code that, frankly, might follow the wrong path. Designers should always plan their prototype, share it with their peers, and review it with stakeholders, before handing it off to developers for implementation.

Even the humble call-to-action button needs careful consideration. Should it match the rest of the page’s color scheme, or should it stand out? Does green always mean “submit” or “save changes” to the intended audience? Should it have an icon? What size should it be? What size should its text be? Should it have rounded corners? The list goes on.

And, of course, there’s the interaction. In this case clicking the “save” button will take users back to the dashboard view.

Only after designers answer questions about its functionality and appearance should they write the right code behind that creates it.

03. Add permanent documentation and snippets

The prototype shows how the design should look, feel, and behave. The documentation and code snippets explain how to get there. 

Luckily, you can assign custom fields (like code snippets or descriptions of use cases) to individual layers in UXPin. That lets you communicate the context of the designs while helping your team to follow code standards. 

Code snippets

If you imported the design from Sketch, never fear: the export plugin preserves all your layers. 

You or the developer can add custom code snippets:

  • Click “Specification” on the right
  • Click “Add new field.”
  • Choose “Code” as your type of field
  • Insert snippets from a language that follows your code standards (like HTML, Javascript, or CSS).
  • Now that code snippet is permanently attached to your element. Anytime you reuse that element (e.g. in a repeating navigation), developers can see the right code snippets to use. Repeat the process with different languages, if necessary. 

Use cases

Tricky interactions sometimes require further clarification. In that case, text fields are the perfect choice for adding use case descriptions.

  • Click “Specification” on the right
  • Click “Add new field.”
  • Choose “Text” as your type of field
  • Describe the context of the design element or notes on implementation. For example, “Use the @include button for primary actions. This will generate the styling for the button.”

Of course, you can add any custom fields you’d like — we just described two of the most common types. 

04. Auto-generate your specs 

Now we can automate the most tedious part of the handoff process: the redlining. 

First, switch to Preview. Then, click on the “>” icon for Spec Mode to reveal pixel-level specifications for:

  • Dimensions of all elements
  • Borders and radiuses
  • Grids, margins, gutters, padding
  • Colors (in HEX and RGB)
  • Typefaces, font families, font sizes

You can see all of the above in pixels, points, Retina, LDPI, MDPI, or HDPI. Every asset is also downloadable so developers can easily grab an image, icon, or whatever they need.

On top of all the specs, you’ll also get automatic CSS snippets for every element. 

At this point, if anyone on the team has questions, they can simply drop in their comments and everyone will get notified. Resolve issues before they come up in development. 

Next steps…

That’s it! Now your whole team can work off the same design and code standards, down to each snippet and pixel. In one place. Together.  

If you want to try Spec Mode yourself, go ahead and start a free UXPin trial.

Painting distorted glass: 3 top tips

Light travels fast. However, some transparent or translucent materials slow it down. Water and glass are like that. They refract light: that is, they bend it because of their comparative densities to air. Sometimes they can even splinter it into its components, which are pure colours. Remember those experiments in class with a prism? Sure you do!

All that said, the main thing to keep in mind when it comes to how to paint glass is that we can see what’s on the other side of it. When the surface isn’t flat like a window, refraction causes distortion. I’m working in ArtRage, mainly using Pencil, Chalk, Watercolour, Wet Blender and Eraser tools.

Reference is there to inform and guide you, not dictate every mark

Our scene is a hungry ogre eyeing his next snack in a jar in the foreground. For reference, I take a couple of photos of empty jam jars with a few objects behind. I start drawing while referring to a few preliminary sketches. I want to contrast the background detail with the obscuring quality of the glass. I keep the background simple and clear. Don’t forget that reflections on the outer glass surface help describe the material.

01. Setting the scene

Perspective lines are created with a separate layer

I lay out the composition with the glass jar prominent in the foreground, and lay some tonal washes over the drawing. I keep perspective lines on a separate layer so I can turn visibility off, when necessary. I include some other jars in the composition. The main light source will be the fire burning in the range near the ogre’s feet.

02. Lighting the jar

Blocks of colour exaggerate the distortion

Before dealing with too many refraction effects, I work up the form of the jar, introducing a few reflections. My jar has bright reflection down its left side, but is darker down the other side. I block in some exaggerated distortion of the table top and blue jar, and have light coming through the middle.

03. Adjusting shapes and textures

Light and texture help to establish the surface of the jar

I work up the jar’s edges (translucent watercolour), bringing a few glints where the light catches the thickness of the glass, using an Opaque Chalk tool. I alter the shapes of what can be seen through the glass, and soften edges. I also add some water droplets and condensation to help define the surface nearer the viewer.

This article was originally published in ImagineFX magazine issue 139. Buy it here.

Related articles

Gucci turns artistic installations into virtual spaces

Fashion, art, and technology come together in the latest creative initiative from the luxury fashion brand, Gucci. Located in the company’s Tokyo store, Gucci 4 Rooms is an immersive installation created by four international artists who have been given free reign by Gucci’s creative director, Alessandro Michele, to interpret the brand’s key motifs.

Want to see the installations but don’t live anywhere near Tokyo? You’re in luck, because Gucci have transformed the rooms into immersive online experiences that everyone can enjoy. Taking the shape of short interactive videos, visitors can either watch the rooms unfold before their eyes, or click on certain areas to explore products in detail with artistic cutaways.

The installations themselves vary from Tokyo-based contemporary artist Mr ‘s post-apocalyptic wasteland littered with scorched manga and anime debris, to Chiharu Shiota’s classical room engulfed in interweaving strands of red thread that look like a giant game of cat’s cradle.

As for the other two rooms, these include Daito Manabe’s surreal pinball game-themed space, and Brooklyn artist Trevor Andrew’s lo-fi graffiti realm, complete neon ghosts and a recurring diamond motif.

For a luxury fashion brand like Gucci, creating strange spaces such as these could be seen as a bit of a risky move. However we think they help to present the company in a new light, and since when has high end fashion been about conservatively rehashing the past anyway?

Gucci 4 rooms is available to visit until November 27 at Gucci Ginza 7th Floor.

Related articles

How to get more from GIFs

GIFs work in seamless cycles, which Rebecca Mock describes as ‘the perfect loop’. This loop should ideally erase the first and last frame, so that any frame could be the first. When crafting your own GIF, make looping a priority – it causes less distraction to the viewer and adds mesmerising, visual interest. Mock also suggests adding an extra frame: “Let the pause last just a bit longer,” she says. “The space between two actions can imply a lot.”

This GIF was made for PC World to accompany an article about the app Evernote

Basic techniques

The basics of movement can be expanded and built into complex animations. As you begin creating your image in Photoshop CC, be sure to keep it organised. Work in layers and animate each piece separately. That way, if you’ve got to change one element later, it’s easy to isolate it without having to undo the rest of your hard work. 

Positioning can be done manually or by setting start and end points and letting Photoshop do the work – it all depends on what kind of movement you want your GIF to have. Using your cursor and dragging the object frame by frame will produce an irregular path. Tweening – generating intermediate frames between two images – will give it a steady movement.

Image 1 of 7

There are two styles of animation panels available in Photoshop: timeline and frames.

01. Timelines and frames

Image 2 of 7

Select which frame to tween and the number of frames you want to add.

02. Select a frame

Image 3 of 7

Start the flicker effect by creating a straight line with a rough edge.

03. Start the effect

Image 4 of 7

Copy and paste the rough edge at the top of your original line.

04. Copy and paste

Image 5 of 7

Create a layer mask to obscure part of the line. When animated, it will resemble a flicker.

05. Layer mask

Image 6 of 7

Hold down the Shift key to rotate a shape in 15 degree increments.

06. Rotate the shape

Image 7 of 7

The Save for Web panel allows you to customise your saved colours. By unclicking a hue, you can remove it from your palette.

07. Save

Mock likes to use the flicker/fading effect for steam rising and flames. To create it, draw a straight line using a rough brush. Add a Layer Mask (such as a flame) so that part of it is obscured. Then, make a clean loop using a pattern-making method – cut your line in half and move its rough bottom edge to the top of its line, filling in the middle and overlapping the Layer Mask. Use the Tween command to make sure the line moves vertically at a consistent speed. At this point, the loops should be seamless. 

The spinning and rotating motion is created with tiny, incremental turns of an object. Make an irregularly-shaped circle and move it in 16 to 24 steps until you have a full turn; hold down the Shift key to rotate it in 15-degree increments.

Creation Can Change The World was made for Sony Digital Entertainment.

Exporting your work

Exporting your GIF may be the final step, but it’s something you should be thinking about throughout your process. The more pixels that move, the larger the file size will be, and ideally, you want a GIF that is under 1MB. GIF files are limited to using 256 colours, and things like heavy textures and gradients don’t compress well – you’re better off with flat colours and sharp edges, which will keep files manageable and easy to upload on the web.

This article originally appeared in Computer Arts issue 259; buy it here!

14 top packaging design resources

The web is a wonderful thing, brimming with resources and tutorials for people interested in packaging design. But, sometimes, too much choice can be confusing, so we’ve picked out the top packaging design resources to help you really get to grips with it.

01. Designspiration


Find and share awe-inspiring packaging designs with Designspiration

All sorts of creative goodness comes together at Designspiration. Created by Shelby White, Designspiration is a hub for collecting and sharing ideas including a whole host of interesting and innovative packaging designs.

02. CreateID

This brilliant blog captures the best of package design, news and articles from around the globe. It’s not updated that regularly, but everything that’s posted here is definitely worth a look.

03. Lovely Package

Packaging design resources

Lovely Package curates the very best in packaging design from around the globe

If, like us, you can’t resist a lovely package, then you should definitely check out this cool blog. Lovely Package showcases some leading design work in the packaging world, covering eveything from wine and beer bottles to toothpaste and kitchenware. The site features work from both professionals and students alike, and with over 300 pages of projects to browse through, you’re sure to find some inspiration here.

04. Package Design

Packaging design resources

For all things packaging design related, check out this brilliant blog

In operation for almost a decade now, Package Design Magazine is a fantastic resource for all things package design. The site features work from designers all around globe, the latest industry news, upcoming talent in the field, a resources section and much more. What more could you possibly need?

05. Retail design blog

Retail design blog has a huge archive of packaging design projects to inspire you

Packaging design resource Retail design blog has a huge archive of packaging design projects to inspire you. Here you’ll find everything from sophistcated alcohol branding to luxury chocolate packaging. 

06. Packaging design archive

Packaging design resources

Packaging design archive features every kind of project you could possibly think of

If you’re looking for package design inspiration, head over to Packaging design archive. Containing every kind of design you could possibly think of, this extensive catalogue of packaging is a brilliant resource. Projects are organised into categories, with the site featuring a handy side bar that allows a search by the type of design you’re after, including identity by typography, shape and much more.

07. Pinterest

Packaging design resources

With hundreds of images to browse through, you’re sure to find some package design inspiration on Pinterest

With hundreds of thousands of inspirational imagery in its archives, we couldn’t not include Pinterest on this list. Simply type in ‘package design’ into the keyword search and watch the work appear. A popular subject on the social networking site, you’ll find yourself scrolling down on what seems like a never ending page of packaging design projects.

08. The Dieline

Packaging design resources

Find the latest top packaging designs from around the world at The Dieline

If it’s information and inspiration on packaging design that you’re after then The Dieline is a fantastic place to start. Founded in 2007, the site aims to define and promote the world’s best packaging design. The Dieline is incredibly easy to navigate. It also features a packaging directory, which is an inspiring library of different company designs.

09. Brand New

Brand New focuses solely on corporate and brand identity work

A division of design firm Under Consideration, Brand New focuses solely on corporate and brand identity work, and features a vast library of inspirational packaging designs. But this is not just a showcase site, as well as all the beautiful imagery featured, much of the designs here are reviewed in detail, with experts giving their opinion on if,how and why each concept works.

10. Ambalaj

Packaging design resources

Check out designer Kristina de Verdier’s blog for inspirational examples of packaging design

Ambalaj is actually the personal site of packaging designer Kristina de Verdier. But if you want to see some inspirational examples of packaging design, then you should definitely check out her blog section. In it, Verdier has carefully selected new works from all over the world, describing them on her site as, “Material innovation, sustainable information, structural packaging, graphic design as well as beautiful brand stories”.

11. Packaging of the World

Packaging design resources

Choose from hundreds of packaging designs to inspire you on Packaging of the World

Packaging of the World is a creative design gallery, showcasing the most interesting and creative work worldwide. This site is really well organised; you can choose to search for projects by category, country, student work, most popular, etc, so it caters for everyone. A brilliant resource in the area of packaging design.

12. Packaging UQAM

Packaging UQAM

French site Packaging UQAM is an excellent showcase of innovative packaging research

Looking for packaging inspiration from slightly further afield? Then be sure to check out Packaging UQAM, a French site that collects together amazing packaging that might have flown under your radar.

Here you’ll find creative solutions for storing trowels, golf tees, wishbones and plenty more unusual products. It’s the place to go if you’re looking to shake-up your research and discover original ideas.

13. Brand, Packaging and Opinion

Packaging design resources

Freelance designer Richard Baird shares his thoughts and opinions on new branding work on his blog BP&O

BP&O is a blog run by British freelance designer and an editor of The Dieline, Richard Baird, who specialises in the development of branding and packaging. Baird picks recently developed designs, provides a short background and shares his thoughts and opinions on each. A great site for finding new work from around the globe.

14. Behance

Packaging design resources

There’s an awesome collection of packaging design work to inspire you on Behance

Online portfolio sit Behance features top work in all manner of packaging designs. Here, you’ll find numerous packaging design projects, created by artists of all skill levels, in everything from shoe and pharmaceutical design to alcohol and electrical product designs.

Related articles:

Build amazing apps with the Learn to Code 2017 Bundle

What you don’t see behind the interface of your favourite apps and websites is the code that makes it work. Go behind the scenes and learn to build your own apps with the Learn to Code 2017 Bundle, now on sale for a price you pick!

The Learn to Code 2017 Bundle is the perfect starting place for all aspiring developers. This 10 course bundle will give you the groundwork to code with powerful languages like Python, Ruby, Java, and more. With over 156 hours of actionable content, you’ll be able to immerse yourself in coding fundamentals and build your own apps and sites in no time at all.

The Learn to Code 2017 Bundle is valued at $1,573, but you can get it now for a price you can pick. Beat the average to unlock all the courses, or just pay what you can for the bottommost course. No matter what, you’ll score a valuable resource for a price you can afford!

25 top-class website templates

The very notion of using website templates for your website layout is something that makes a lot of web designers and developers cry out in sheer horror. Website templates, we’re helpfully informed, are some kind of evil incarnate, out to wreck the industry with their ‘readymadeness’ and general awfulness.

The thing is, while website templates do have something of an iffy reputation, there are plenty of decent examples out there, crafted by some truly smart designers and providing some amazing web design inspiration.

To illustrate the point, we’ve rounded up some good options that might open your eyes to the possibilities templates have to offer, at least when they’re created by people who know what they’re doing.

01. Definity (Bootstrap)

Definity’s modular design makes it easy to play with layouts

A multipurpose single and multi-page template by Ocarine Themes, Definity is built on Bootstrap 3 and comes crammed with stuff: it’s 100 per cent responsive with cool features such as video backgrounds, hover effects and parallax scrolling, and its modular design makes it easy to move sections of your pages around until you’ve nailed your layout. The latest version, which you can get for just $29, features three new templates and five new shop layouts.

02. Enfold (WordPress)

Enfold comes with plenty of demos to try out

Designed to be the most user-friendly WordPress theme ever made, Enfold is a versatile and fully responsive theme suitable for business sites, online stores (with WooCommerce support) and portfolios. Its drag and drop template builder is just the thing for creating your own layout, but it also comes with a stack of ready-made demos to inspire you. The regular licence will cost you $60, which includes future updates and six months’ support.

03. Porto (HTML5)

Porto is available on various platforms

The basic HTML5 version of Porto will cost you just $17 and features a stack of homepage styles as well as unlimited header layouts and a style switcher that enables you to customise your site on the fly. It’s also available in WordPress, Drupal and Magento flavours, with an additional admin version so you can manage your site much more effectively with a swish dashboard and all the widgets and charts you can eat.

04. Maple (WordPress)

Maple is easy to use and fully responsive

There are six reasons you’ll love Maple, say its developers: its bold and unique design, it’s responsive and retina-ready, it features light and dark styles, parallax header backgrounds and multi sidebar support, and it’s super-easy to use. With 15 layout combinations plus plenty of features and widgets, at $49 it gives you your money’s worth.

05. BeTheme (HTML5)

Website templates - BeTheme

They can’t all be zingers, but you can’t go far wrong with BeTheme’s selection

Why settle for one theme when you can have over 210? Described as the most complete, comprehensive and flexible HTML template for business or personal websites, BeTheme is simply crammed with stuff. Fully responsive and retina-ready, with all the parallax and smooth scrolling features you’d expect, it’s an absolute monster and the biggest headache it’ll cause you is trying to choose from the enormous selection of pre-built sites. For $19 you can’t go wrong.

06. NOHO (Muse)

Website templates - NOHO

Designed for creatives, NOHO’s perfect for portfolios

Designed with creative professionals in mind, NOHO is built to be easy to edit in Adobe Muse, enabling you to get your agency site or portfolio up and running in record time. Its templates come in desktop, tablet and mobile flavours and in multiple layouts, and you’ll find ample features such as image sliders, parallax scrolling and CSS rollover effects. The results are clean and eye-catching, and it’s yours for just $21.

07. Jupiter (WordPress)

Website templates - Jupiter

Jupiter’s not cheap but its output is gloriously fast and lightweight

Jupiter confidently describes itself as the world’s fastest and lightest WordPress theme ever, and its latest version been completely reviewed and rewritten to deliver lightning-fast pages that won’t thrash your CPU or drain your batter.

It uses GPU rendering to deliver smooth parallax scrolling, it features adaptive image resolution to ensure that pictures look great regardless of devices, and it comes with over 85 templates in case you don’t have time to build your own pages with its drag and drop interface. It’s not cheap at $59, but the results are worth it.

08. Summer (Ghost)

Website templates - Summer

Summer features parallax blog background covers and author pages

PXThemes specialises in Ghost template and themes, and Summer is one of its most popular offerings. For $19 you get a simple and clean template with plenty of options to help your content stand out, including author pages and full screen covers, parallax blog background covers, and Foundation 5 and Disqus integration.

09. Type & Grids (HTML5/Statamic)

Website templates - Type & Grids

This website template offers speed and great typography

Jeremiah Shoaf’s seemingly on a mission to free people from complex content management systems and so Type & Grids embraces the notion of the flat-file CMS.

The template is extremely fast, boasts a number of variations, and has some very smart typography. It’ll work as-is, entirely for free, but Shoaf offers various tiers for pro use, and adds that Type & Grids works nicely with Statamic.

10. Ness (WordPress)

Website templates - Ness

An image-focused website template

A lot of modern themes concentrate on stark minimalism and type, but Ness is far more interested in imagery, aiming for people wanting to rapidly get a photo blog or magazine up and running. It’s Retina-ready and mobile-friendly, and in use feels like high-end photojournal app like Storehouse.

11. Bootstrap (HTML5)

Website templates - Bootstrap

Bootstrap defaults look pretty good in their own right

“Um, hello?”, you might be saying, given that Bootstrap’s really a framework rather than a template. This is true, but as the examples section showcases, even the Bootstrap defaults look pretty good if you’ve a design idea in mind that utilises a lot of rich imagery and backgrounds. It’s just a few tweaks from a beautiful minimal creation — and that’s even faster if you peruse Bootswatch’s free themes.

12. Yuga (Muse)

Website templates - Yuga

Yuga boasts six themes and plenty of tutorials to get you started

If you’re using Muse and you want plenty of options as well as value for money, look no further than Yuga. Billed as a 6-in-1 creative multipurpose true parallax template, it comes with six themes with plenty of transitions and animation that are easy to implement. It has loads of online documentation, including step-by-step editing tutorials, and it’s yours for just $25.

13. Halcyon (Tumblr)

Website templates - Halcyon

A bold and eye-catching website template

Pixel Union is a team of designers dedicated to “reshaping publishing, self-expression and entrepreneurship on the web”, which basically means the company creates templates and themes for content management systems. Halcyon’s one of the team’s top-sellers for Tumblr, a bold and eye-catching $49 responsive grid-based effort.

14. Avada (WordPress)

Website templates - Avada

There are tools of tools for refining this WordPress template

Avada ($60) claims to be the best-selling WordPress theme of all, and it certainly has a lot going for it. It might be a third-party template, but the underlying framework is flexible enough to enable the crafting of all kinds of design styles, and there are tons of user-friendly tools and options for subsequently fine-tuning the resulting site.

15. Vitality (Bootstrap)

Website templates - Vitality

Build a responsive one-page site with this website template

Vitality is billed as a time-saver for anyone wanting to rapidly get a versatile, responsive one-page site live. $10 gets you the licence, and the template boasts six sample layouts, three page styles, ten colour schemes, a PHP contact form, and optional full-page image backgrounds and video background headers.

16. Huge (Tumblr)

Website templates - Huge

This website template is perfect for image- or video-heavy blogs

This $19 effort by Precrafted is aimed at people wanting a blog that is heavy in imagery and videos. Many elements can be fully customised, and keyboard navigation makes it easy to quickly jump between posts when using traditional keyboard input. The design also includes a fixed (but not distracting) menu and options for controlling how photos appear.

17. Red Cap (HTML5)

Website templates - Red Cap

Create ‘coming soon’ landing pages with this niche website template

This one’s a single-page HTML5 template, based on Bootstrap, boasting plenty of customisation options and a MailChimp subscription form. It’s primarily aimed at people wanting to create ‘coming soon’ landing pages for upcoming projects or products, and for $7 saves you the hassle of smashing together countdown scripts and the like yourself.

18. Mediator (Jekyll)

Website templates - Mediator

A responsive, minimal website template for Jekyll

Another creation that’s heavily focussed on content, Mediator is a responsive, minimal template for Jekyll by Dirk Fabisch. It has support for featured articles, enables the use of header images, and includes FontAwesome, in order that you can easily work with icon fonts.

19. Oblivion Magazine (Tumblr)

Website templates - Oblivion Magazine

With over 100 customisation options, Oblivion Magazine has everything you need

Aimed squarely at journalists and publishers, Oblivion Magazine is a responsive Tumblr template that’s crammed with customisation options, features and widgets, including a custom preloader and fancy loading animations, multiple authors, reading time info and SoundCloud player. Made by Alpha Draft, it’s a steal at $24.

20. Valenti (WordPress)

Website templates - Valenti

A website template that’s great for magazine-oriented sites

Where Valenti largely succeeds is in its flexibility and richness. This is a template primarily designed for magazine-oriented sites, and it’s packed with options for vibrant home pages, full-background image styles, and parallax; it’s also high-res- and mobile-ready, provides alternatives for review ratings, and makes it easy to craft mega-menu navigation.

21. Twelve (HTML5)

Website templates - Twelve

An original and creative responsive template built on Bootstrap

Bootstrap is in itself a great starting point for a site, but plenty of template authors have expanded on it, to provide you with something more complete. Twelve bills itself as an original and creative responsive template, and it has vibrant colours, Retina-ready imagery, icons, sliders, and single- or multi-page options, all for $17.

22. Free Minimal Responsive Theme for Perch (Perch)

Website templates - Free Minimal Responsive Theme

A good foundation on which to build a website in Perch

Perch isn’t a product that necessarily lends itself to templates in the traditional sense, but Laura Kalbag created a default some time back, as a starting point. Clift Walker’s minimal theme comes from similar thinking, giving you a little extra help to get started — a simple, sleek foundation on which to build.

23. Muffin (SASS/Jekyll)

Website templates - Muffin

A design-focused front-end website template that comes in four flavours

Richard Bray’s Muffin is a design-focused front-end web template that uses SASS, Jekyll and Gulp. Aimed at the reasonably tech-savvy, the template includes colour variables, SASS media queries, HTML includes and SVG icons. It comes in four ‘flavours’, based around the kind of site you want to design.

24. Lychee (HTML5)

Website templates - Lychee

Lychee has great parallax effects and is also available as a WordPress template

Powered by Twitter’s Bootstrap 3.3 framework, Lychee produces valid HTML5/CSS3 pages and features over 30 pages, six homepages, 20 portfolio pages and two blog styles, all of them perfectly responsive. Excellent parallax effects pair with a clean and professional design, and the whole packages will cost you $17; it’s also available as a WordPress template.

25. X (WordPress)

Website templates - X

This WordPress theme enables you to create your own website template

Rather like Avada, X is a WordPress theme that enables you to construct your own template. It utilises what its creators call ‘stacks’, multiple unique built-in designs that make it easier to end up with something unique. Heavily customisable, your $64 purchase includes loads of typefaces, shortcodes, navigation options, social buttons and custom sidebars.

Alibaba Cloud Expands Global Offering with Four New Data Centers

HANGZHOU, China – Alibaba Cloud, the cloud computing arm of Alibaba Group, today announced the opening of four new data centers by the end of 2016 in the Middle East (Dubai), Europe, Australia and Japan. As a major milestone of Alibaba Cloud’s global expansion, the new centers will boost its data center network to 14 locations, covering key economic centers around the world. The data center in the Middle East, located in Dubai, United Arab Emirates, commenced initial operations today.

Alibaba Cloud’s expansion will provide customers worldwide with improved latency and greater access to its diverse offerings, including data storage and analytics services, enterprise-level middleware, and cloud security services. Strengthening Alibaba Cloud’s position as a major global cloud provider, the new data centers will support Alibaba Cloud’s growing client base beyond the current 2.3 million.
Through a stronger network of facilities and strategic partnerships, Alibaba Cloud also plans to drive a globalization of innovation. The enhanced cloud capabilities make breakthrough innovation a real possibility with artificial intelligence, deep learning and data analytics.

“Alibaba Cloud has contributed significantly to China’s technology advancement, establishing critical commerce infrastructure to enable cross-border businesses, online marketplaces, payments, logistics, cloud computing and big data to work together seamlessly. We want to establish cloud computing as the digital foundation for the new global economy using the opportunities of cloud computing to empower businesses of all sizes across all markets,” said Simon Hu, President of Alibaba Cloud.

Evidence of the potential of Alibaba Cloud can be seen during the recently completed 2016 11.11 Global Shopping Festival, where Alibaba Cloud technology supported all of Alibaba’s online marketplaces and facilitated a record-breaking 175,000 transactions per second during peak traffic spikes. The festival showcased the capabilities not only of the cloud, but also a number of other areas, such as virtual reality, thus helping to redefine technological boundaries.

“The four new data centers will further expand Alibaba Cloud’s global ecosystem and footprint, allowing us to meet the increasing demand for secure and scalable cloud computing services from businesses and industries worldwide. The true potential of data-driven digital transformation will be seen through globalization and the opportunities brought by the new global economy will become a reality,” said Sicheng Yu, Vice President of Alibaba Group and General Manager of Alibaba Cloud Global.

Since its launch, Alibaba Cloud’s technologies have enabled all types of businesses globally, ranging from start-ups to multi-national companies, to benefit from the greater operational and cost efficiency that cloud computing can provide. The new facilities are based in four strategically important trading and economic centers to enable the ambitions to make it easy to do business anywhere. Each of the four will add significant value to the global network and expand horizons.

Middle East
Alibaba Cloud will be the first major global public cloud services provider to offer cloud services from a local data center in the Middle East. The opening of the Dubai Data Center is held in conjunction with YVOLV, a joint venture of Alibaba Cloud and Meraas Holdings, a Dubai-based holding company with a portfolio spanning across key economic sectors in the United Arab Emirates. YVOLV will support and drive Dubai’s Smart City vision by leveraging Alibaba Cloud’s sophisticated cloud computing technologies to create new applications and big-data tools for customers in the region.

To support enterprises in Europe, Alibaba Cloud will partner with Vodafone Germany to open its first data center in Europe. The center is co-located in Vodafone’s data facilities in Frankfurt, Germany, one of the leading technology hubs in Europe with a highly developed infrastructure supporting technological innovation. The facility is well positioned to meet the increasing demand for sophisticated cloud computing services as the region seeks to accelerate the upgrade of its digital infrastructure.

Extending its global footprint in the Asia-Pacific, Alibaba Cloud will open a new data center in Sydney, Australia by the end of 2016. Alibaba Cloud will bring its most popular cloud services in data storage and processing services, enterprise-level middleware, and cloud security services to the Australian market. A dedicated team will be based in Australia, and build up a cloud ecosystem with local technology partners to drive cloud and big-data business in the region.

The Japan Data Center, hosted by SB Cloud Corporation, a joint venture between Softbank and Alibaba Group, will provide Japanese enterprises with competitive and enhanced public cloud computing services from Alibaba Cloud. With the joint venture, Alibaba Cloud will further expand its cloud computing service platform by leveraging SoftBank’s extensive enterprise customer base in Japan.

About Alibaba Cloud
Established in September 2009, Alibaba Cloud (intl.aliyun.com), Alibaba Group’s cloud computing arm, develops highly scalable platforms for cloud computing and data management. It provides a comprehensive suite of cloud computing services to support growing enterprises worldwide, including sellers and other third-party customers and businesses participating in Alibaba Group’s online and mobile commerce ecosystem. Alibaba Cloud is a business of Alibaba Group.

TierPoint Completes Expansions of Marlborough and Baltimore Data Centers

ST. LOUIS, MO – TierPoint LLC, a leading national provider of hybrid IT solutions, announced today the completion of the planned expansions of its Marlborough (Boston West Metro) and Baltimore data centers, adding approximately 15,500 sq. ft. of high-density data center space to its national data center footprint. Both data centers are SSAE 16, SOC 2 Type II compliant facilities.

TierPoint invested a total of $13 million in the Marlborough and Baltimore projects, with most of that investment made in 2016, culminating a total of nearly $45 million invested in expansion projects this year. Additional expansion investments are planned for 2017 in response to the growing demand the company is seeing for its services.
The Marlborough data center expansion added nearly 12,500 sq. ft. of raised floor to one of TierPoint’s largest facilities, which now encompasses approximately 215,000 sq. ft. of total space. In addition to the expansion, upgrades were made to the electrical and mechanical infrastructure, using green technologies to further reduce the carbon footprint of the facility. This is the second major expansion of the carrier-neutral Marlborough data center within the past two years. Because of its location approximately 30 miles west of Boston and away from coastal areas, there is high demand for the facility from clients seeking a hybrid IT provider who can deliver disaster recovery solutions and workstation space.

TierPoint’s Baltimore data center is one of the largest carrier-neutral data centers in the state of Maryland. The completed expansion adds approximately 3,000 sq. ft. of raised floor to the 30,000 sq. ft. facility as well as adding UPS capacity. As a result of strong demand for the new expansion space, the company is already considering further expansion in the Baltimore market in 2017.

Together, the expansions further enhance TierPoint’s capacity for cloud, colocation, disaster recovery and IT security services in the Northeast region. With 24x7x365 onsite security, technical and engineering support, the expanded facilities provide a reliable, secure and robust infrastructure environment to support clients’ unique and evolving technology requirements.

About TierPoint
TierPoint is a leading national provider of best-in-class IT infrastructure services that help clients improve agility, drive performance, and manage risk. TierPoint offers multi-tenant, private, and hybrid cloud solutions; disaster recovery, business continuity and other managed services; and colocation – all backed by a commitment to superior customer service and highly-redundant, carrier-neutral data centers coast to coast.