A recent collaborative project has developed a new online learning resource for teachers delivering religious education in schools, launching in conjunction with a new national approach.

Taking place over the last few months this venture with Junction Media and Birmingham’s Standing Advisory Council on Religious Education (SACRE) has resulted in the website www.faithmakesadifference.co.uk to be used by teachers, parents, governors, local authorities and faith communities.

A new RE syllabus is already implemented in over 400 schools and Early Years centres in Birmingham and the new site will support that delivery. The site provides additional benefits to schools using the new syllabus with the way in which it offers materials.

The syllabus has a revised emphasis of learning about faiths, respecting one another and living by rules. The website communicates these themes and aids lesson planning for teachers. All the materials are easily accessible through key stage or faith and disposition, making the site easy to navigate and its straightforward user journeys, it’s simple to access what you need.

If a teacher wants further help, they can book a session with a specialist RE advisor through the online calendar and booking system built into the site. This site negates the need for teachers to call the city council requesting RE support and advice, either all the information relating to the nine major faiths present in Birmingham is online for them, or even if they want some more help, all they need to do is book a session.

The site needed to provide information quickly for teachers and have all the new syllabus material reflected and easy to access. With a large amount of learning material available, teachers can easily access learning matter for their classes and with the way the site is developed with straightforward user journeys material is simple to find.

We've been back a couple of weeks now and are all fired up for a fantastic 2012.
Here's a sneak preview at some of the work we're doing this month...

In partnership with the Royal Institute of British Architects (RIBA), the Birmingham Architecture Association and the Birmingham Five Counties Architecture Association (BFCAA), Substrakt designed and developed an iPhone application and website to represent Birmingham’s finest architecture.

The objective was to create an application that appealed to both users who are interested in architecture, and the general public who either may have an interest in the buildings that they interact with on a day-to-day basis, or who are visiting and keen to learn more about their surroundings.

Information about buildings is available in list format, or viewable on a map. The app also uses GPS to filter buildings that are near you at the time.

A number of buildings are collated into tours within the app. These are themed, e.g 20th Century tour, and can be individually curated while building information can be tailored for that particular tour. Users can use GPS within the app to help guide them on the tour.

All the data (buildings and tours) for both the website and application is easily managed from a central web based database.  The application is built natively using Objective C.

Visit the website to download the app:

http://www.walkingarchitecture.co.uk/

Art Map Wolverhampton is an integral part of Project Dandelion, a public art project that enables new art commissions and projects to take place across secondary schools in Wolverhampton. Supported by Centro, Substrakt were brought on board to work alongside the students to produce a printed map and website showcasing art and culture across the city for visitors and residents.

We began the project by visiting the King’s CE school for workshops with the students. Over the sessions we introduced the students to various stocks, inks and finishes. We took samples to spark debate and presented existing maps to engage in discussions, using the feedback to work towards our design. Within their lessons, the students were producing artwork in response to public art within the city, which we were to incorporate into the map.

During the research the students realised they were keen to produce something that stood out from the other tourist maps; we explored different folds, introduced them to Pantone swatches and looked at various ways of illustrating Wolverhampton in a clean simple form that would translate into print and web.

We collated the students’ research and mapped out places of interest and public art onto a vector-illustrated map. Using tones of grey with fluorescent red and green we ensured a bold contrast, the grey representing the industrial city and brights celebrating the culture and vibrant art scene.

The result was 22k A2 art maps; 24pp printed black, Pantone 803 and 805 onto 130gsm uncoated stock.

The accompanying website is based on the visual style of the printed map, and expands on the initial idea and concept of Art Map Wolverhampton. Using the online version people have more information available to them, such as bus routes, transport type accessibility, links to further information on other websites and easily accessed directions through Google Map.

It's built on Wordpress to manage the content, Google Maps API 3 to generate, style and control the map & locations, and is responsive to the browser size & device being used. This means users on larger screens will see a scaled site, with larger images, larger maps and more info on screen, where as small screens still get to view the site at a scale more appropriate to their display. It also works with mobile, meaning people can take an optimised version of Art Map Wolverhampton with them to the art locations instead of, or as a companion to the printed map. www.artmapwolverhampton.co.uk

We first worked with Rare games earlier in the year designing vinyls for their new Birmingham office, so when we were approached in September to help out with their press day we were keen to get involved.

October was to see the worldwide release of Kinect Sports: Season Two and Rare were set to hold a press day on 8th September, inviting UK, European and American journalists to preview the game. Rare HQ, Twycross, was to be transformed, each new sport having its own area - stylised with artwork, character cuts outs, lights, bars and even an igloo!

Substrakt worked with Rare producing assets, large-scale prints and vinyls for each individually themed room spread across the site - in the building, marquee and igloo. Some of the deliverables included twelve 5ft character cut outs, large logo wall vinyls, material banners, designed flags and magnetic signs for the golf buggy.

During the installation, Andy and I also got a cheeky play on the darts and baseball, top stuff!

Thanks to Rare for the photos!

K4 Architects is a recently established architecture practice newly based just a stones-throw from our Birmingham studio on Fazeley Street. They came to us looking for a new web site to mark the new chapter of their business.

Websites for architects run the gamut from great to poor. They have in the past been dogged with an expectation of hard-to-use form-over-function inaccessible Flash offerings.

The trend for obscure menu systems, dreadful copy and pixel fonts can safely be left behind, but such sites often used beautiful large / full screen background images and custom typefaces - great for showing off the company portfolio. Whilst these only really benefitted the large-screened desktop they often  responded to browser sizes (up to a point) better than their HTML-based counterparts. (remember sizeListener.onresize = function() {};Stage.addListener(sizeListener); ?)

We wanted to select the best parts of this status quo and, at the same time, add our own modern take.

Welcome, Responsive Web Design ¶

Image credit: Smashing Magazine

Just over a year ago, Ethan Marcotte published an article on A List Apart on 'Responsive Web Design'. The article draws similarities from Responsive Architecture, a class of architecture or building that demonstrates an ability to alter its form, to continually reflect the environmental conditions that surround it. He observes -

Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.

Since then it has become a hot topic, and has forced web-designers to think differently when designing a site. He continues,

In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. It’s an interesting phrase: At face value, of course, it speaks to mobile WebKit’s quality as a browser, as well as a powerful business case for thinking beyond the desktop....But what’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience? At some point, this starts to feel like a zero sum game. But how can we—and our designs—adapt?

Media Queries ¶

We used a selection of CSS Media queries to detect different browser sizes and capabilities and morph the pages to best suit the situation. This way we avoid creating separate user-agent specific, and an intelligent system that creates a 'one size fits all'.

A matter of style ¶

K4 showed us a copy of Process; A Tomato Project. The book details the abstract of Tomato's concepts, memories and approaches to work in layers of abstract photographs and layered transparency. We used these styles to inform the site's look and feel, using rgba transparencies (degrading gracefully for non css3 browsers of course) and background overlays to build up layers of depth.

Launch Event Invites ¶

As well as the site we designed some great invites to send to VIPs for their launch event. These minimal invites featured metallic embossed foil in the same accent colour as the site on 540gsm Pristine white Colorplan.

View the site: k4architects.com

Over the last 12 months, Substrakt has noticed a very positive trend in the West Midlands - organisations learning the value of digital data and using it to empower and encourage local people to make the most of the places and spaces around them. Our most recent completed work, the Radiu5 Project, is a great example of how this can work really well as a collaborative and engaging initiative for young people in particular.

Radiu5 is the brainchild of Sampad, a dynamic development agency for South Asian arts based in Birmingham. It has a particular focus on youth arts projects, encouraging young people to grow their skills and experience and further them whilst taking part in cultural education opportunities. Radiu5, a key Sampad project for 2011, saw volunteers collecting digital data which highlighted the creative and arts opportunities available within a five mile radius of mac Birmingham for young people, with the intention of inspiring wider involvement and creating a lasting online archive.

Substrakt's job was to design and build a digital way of showing the data that the young volunteers had collected.

From the start, the project was fun and hectic to work on for all the team. The 30 young adult volunteers had some fantastic ideas of groups of information they wanted to collect, from Birmingham's graffiti art, venues for band rehearsals and affordable places for groups of friends to meet. We worked with them in groups, helping them decide on how they wanted to see this material come together, and importantly, how it can be connected to create an overall story. The Substrakt team coached the volunteers in data collection methods and upload techniques, subject matter brainstorms and feedback sessions at every stage of the design process.

Front-end interaction with the exhibition was via a touchscreen which in turn powered a matrix of large displays. We had to think carefully about using animations that responded to touch, avoiding 'hover' effects. The specification of the displays was still an unknown at the time of design, so we opted to design an interface that intelligently scaled to the dimensions of any given display. This way users were able to play using any type of device. The data points bubbled up on the left of the installation, changing in radius depending on the popularity of the tagged content. Navigating through the bubbles brought similar 'linked' data points into view. Any content (images, video, audio, editorial) that related to the data points then appeared on the right. Content that was geotagged was displayed on a minimap. The whole interface was powered via jQuery & Ajax in order to maintain a smooth immersive experience, avoiding the need for jerky page refreshes.

We focused on ensuring that each visitor got a unique experience from playing with the visualistion, finding data that took them on an informative storytelling journey.

Substrakt trained the volunteer teams to guide young users around the exhibition and encourage users to upload new content of their own. The visualisation was also made available as a website for future use, with the project ending in May 2011.

We’ve been busy working with Rare, the games designer that produces Kinect sports, as well as legendary titles such as Banjo-Kazooie and Perfect Dark, on the interiors of their Birmingham and Twycross offices. Rare opened a new testing and production facility in Fazeley Studios last year and soon became our neighbours. With their 10,000 sq ft office space and the 25th anniversary rebrand they were keen to implement their new look.

Using a pattern of simple graphic shapes with bright hues we mapped out a series of locations for the designs that flowed around the interesting shapes of the studio space.

During the project we were invited to Twycross to revamp their reception area. Working alongside the Assistant Art Manager at Rare we produced large scale wall graphics and implemented the new identity in the space.

Having previously worked with Mark Rose and Andy Williams we were approached by the former Capita Lovejoy directors to give their new venture an identity. In our first workshop we developed a name for the new planning and design practice; assessing their skills, background, target audience and brainstorming their key values as a company.

Design, development, delivery, derive, detail, depth were a few of the key words we came across – all beginning with De. We found the prefix De is often used to indicate removal or separation that we felt was quite appropriate to this new company - branching off from Capita. We explored various visual directions and felt that hyphenating the De could be a strong asset to the visual identity, following with some of the above key words across various media. During development we were drawn towards the name Define: “To determine with precision; to mark out with distinctness to ascertain or exhibit clearly”. We explored the colon mark as it often follows the word Define preceding a definition, set as two equal circles it lent itself to an interesting abstract element that could be implemented across the identity in a bold yet simple visual way.

As a new company we believe it’s important to invest time in all the small details, in this case - embossing, foiling, fluro ink and a subtle animated background on the site. We are currently working on the full website and introductory brochure.

Creative Careers Festival organised by Bright Space was a two-day event for 13 – 18 year olds. The creative and cultural sectors offer a multitude of opportunities for interesting careers, although there seems to be a lack of information and guidance out there, therefore these pathways become unclear. The aim of this was to highlight careers in the creative industries offering workshops, demonstrations, seminars and networking opportunities.

We were approached to work with Bright Space to create an identity that would engage with young people and we produced a brand, website, flyers, banners and a 54 page event brochure. The event took place at the Mac, Birmingham last Friday and Saturday and attracted over 1000 attendees. Some involved organisations included MADE, Rare (Microsoft), 4Talent, The Rep, THSH, Fused Magazine and Substrakt.

On the Friday afternoon I was sat on the Young Creatives Panel in the Hexagon Theatre alongside Emily Jones (Town Hall Symphony Hall), Annabel Clark (Blogger / Flatpack Festival), Courtney Salmon (Music video producer) and Matt Windle (Poet). The aim was to give young people a chance to talk to those who are already working in the creative industries but close to their age group. The panel lasted an hour and we were asked questions about our experience, routes and aspirations for the future. Tips and advice, that as professionals we can often take for granted. Very informal, we shared answers and openly discussed opinions based on our individual experience and journeys. Coming from all different backgrounds it was a great insight to hear about all the amazing stuff happening in Birmingham and it reinforced how important it is for us all to work together and collaborate as young creatives.