The planning, design and development of the new www.blakes7.com - the official site for the classic science fiction television series.
Over the course of several months, I worked with B7 Media on coming up with ideas, from rough wireframes to full pixel-perfect mockups for a new blakes7.com to update the ageing site that occupied the domain.
The new site is now live at www.blakes7.com
![](https://cdn.myportfolio.com/c5c3407f5145903162509398e28ee687/a5ca936c0cf5276278646e78_rw_600.jpg?h=94330a52e356a586283c586a600cdea5)
A collection of loose wireframes, mainly to gauge the overall structure of the site, and a possible separate classic series site. Clear from the start was the need for either a dedicated mobile site, or one that was responsive enough to handle mobile devices, and strong social media integration.
![](https://cdn.myportfolio.com/c5c3407f5145903162509398e28ee687/bb9bbb771ca22bf147ea2c3d_rw_1920.jpg?h=4b4ba8f848eeaeddb8d9ff531ce75ac5)
Mockup of possible site UI - focusing on social media elements, advertising placement to partners with licensing deals, and a graphics-rich design ethic.
![](https://cdn.myportfolio.com/c5c3407f5145903162509398e28ee687/9d599eeb85ae94c4eb84a3a3_rw_1920.jpg?h=24e8b4f251fe2957579660ec92d23ce1)
Mockup of possible site UI - focusing on social media elements, advertising placement to partners with licensing deals, and a graphics-rich design ethic, this time with a full-width slider.
![](https://cdn.myportfolio.com/c5c3407f5145903162509398e28ee687/8b6618e9304652473d2f55d2_rw_1920.jpg?h=309819f30975095e32674dc162c2b6c7)
Mockup of possible site UI - focusing on social media elements, advertising placement to partners with licensing deals, and a graphics-rich design ethic, this time with a larger focus on classic series items at the bottom. The show was in development at SyFy at the time, so this was a possible post-green-light look to the site, separating out the new series and classic series items.
![](https://cdn.myportfolio.com/c5c3407f5145903162509398e28ee687/b431aa105ca6541425c31d96_rw_1920.jpg?h=5f0f24080e9412b7125c2373638f2492)
We also discussed having a dedicated site for the classic series - our own repository of information. This was a concept for the layout.
![](https://cdn.myportfolio.com/c5c3407f5145903162509398e28ee687/f14c11add82e834b1aef3f01_rw_1920.jpg?h=89c2fb725182e989f900fca3642d6327)
We also discussed having a dedicated site for the classic series - our own repository of information. This was a concept for the layout.
![](https://cdn.myportfolio.com/c5c3407f5145903162509398e28ee687/07614b5d274b48540f22a318_rw_1920.png?h=68b576898017cfa270e967f8920372ad)
Refined, simpler content plan and layout guide/wireframe
![](https://cdn.myportfolio.com/c5c3407f5145903162509398e28ee687/56ee868fbe2e8e24f81f8de9_rw_1920.jpg?h=fbbebfa04735e693428002bd63f11f7f)
The final design (landing page); site based on wordpress, using a heavily-customised premium theme.
![](https://cdn.myportfolio.com/c5c3407f5145903162509398e28ee687/f93282d5ec1c8bd66c3f24b5_rw_1920.jpg?h=2c3b186a61a88f88461110c304f5ffd6)
The final design (landing page); site based on wordpress, using a heavily-customised premium theme.
![](https://cdn.myportfolio.com/c5c3407f5145903162509398e28ee687/eeb47212ea547a63cabdea90_rw_1920.jpg?h=d3f8c6af84cc7b0726f6f9d40d01e7f6)
The final design (article page); site based on wordpress, using a heavily-customised premium theme.
![](https://cdn.myportfolio.com/c5c3407f5145903162509398e28ee687/eea73aae2d4e8fe006951312_rw_1920.jpg?h=f511a485ec400bf4f3a68c18a69b8407)
The final design (About Blake's 7 page); site based on wordpress, using a heavily-customised premium theme
![](https://cdn.myportfolio.com/c5c3407f5145903162509398e28ee687/0203de9ce692c73f2822f567_rw_1920.jpg?h=52903bcab660a86324cdf0e10b5c5fd4)
The final design (merchandise page); site based on wordpress, using a heavily-customised premium theme. The items expand out to list product details and feature trailers and CTAs to buy from iTunes or direct from the licence holders.
![](https://cdn.myportfolio.com/c5c3407f5145903162509398e28ee687/24dde1e004ab1fdeb0cce6a5_rw_1200.jpg?h=56b858adc3831b36cec4daacc44db33d)
Using a responsive theme within Wordpress means the site maintains some design dignity when viewed on different sized devices
![](https://cdn.myportfolio.com/c5c3407f5145903162509398e28ee687/3c6e19456490dcf5451d3773_rw_1920.jpg?h=2de77892735b11eee9bde31989251360)
Using a responsive theme within Wordpress means the site maintains some design dignity when viewed on different sized devices