Collective Ray

While working on a project (We’ll be announcing soon!), our design team wanted a nice color-changing background. Now, we know we could have used a static gradient, or simply faded between sections, but we thought it would be cool if the background changed as the user scrolled down the page, in a fixed manner. Usually when we meet a challenge like this, the first thing we do is check to see if anyone else has already done it, and in no time we found this jsfiddle: http://jsfiddle.net/cgspicer/V4qh9/. It’s great, but we needed a bit more. The current version only supports fades between two colors so we forked the code and expanded on it a little bit.

Installing

If you'd like to use this method for your next project, you’ll need jQuery, jquery.color-2.1.0.js, and the bits of HTML/CSS/JS included in this jsfiddle: http://jsfiddle.net/jguffey/mxkx9j2o/.

Make it your own.

In the fiddle, we use `<section>` elements to mark the content boundaries, but you can use any element you want by changing the selector on line 8, and the corresponding CSS and HTML. The array of strings in the call to `scrollColors` (line 16) is where we store the colors we’d like to transition to. Remember to change the CSS background-color property for body (our color-change target) to match the first element in this array, or you’ll still get the bright pink color when the page first loads.

Thanks to the jQuery Color plugin, hex, rgb, and even rgba values are allowed. This can yield some cool effects when layered over an image or video. The alpha channel in RGBA is animated just like the other color channels, so you could have a sold color change opacity with scroll.

Here at Collective Ray we love to learn and create. So when we had some time to devote to internal product development we reached into our archives and found some inspiration. A dribbble shot of Brian’s provided the perfect weekend project for us to learn about using WatchKit.

Horoscope applications are typically ugly and featured bloated. We wanted ours to be clean, airy and straight to the point. People who check their Horoscope want to do so while on the go. So, we updated the UI and created an iPhone and Watch app that allows users to quickly check their daily horoscope.

We’re giving it away for free! Please check it out here, share it with your friends, or drop us a line and let us know what you think.

Technical Details

With Watch OS2 just announced a lot of things changed but the basic ideas should continue to be useful. We won’t go into details about the code behind this project, but we’d like to share some of the high level approach, along with links to that go into the nitty-gritty details.

Our app consumes an API to get the daily horoscopes. To make this easier, we use ObjectMapper to turn JSON feeds into Data. It’s an open source Swift framework that does all the dirty work for you, we highly recommend it (one can install it using CocoPods). We use ObjectMapper to do double duty in our app. Firstly, it consumes our JSON-based API that provides horoscope data to the phone. Secondly, we include it in the WatchExtension to handle receiving the data from the iPhone. We’ll go into the details of that second point now.

Getting data from the phone to the Watch is paramount for any Watch application. There is a great presentation by @NatashaTheRobot available on video here. In her talk she covers a few ways of accomplishing this, but for our application we take advantage of ObjectMapper and simply have our iPhone app’s AppDelegate respond to `application (application: handleWatchKitExtensionRequest userInfo: , reply:)` with a JSON string of all our horoscope data. `Mapper().toJSONString(data, prettyPrint: true)` does the work of putting the NSObject into JSON format. We run a short loop that collects all 12 signs, converts them to JSON, puts them into a single response, and sends that off to the watch in the “reply” callback. Easy.

When you’re reusing Models in both your iPhone app and the Watch Extension- bundle the Model code into a framework, and add your custom framework to the build process for both apps. That’s the DRY way. In our watch extension, we have a function that calls  `WKInterfaceController.openParentApplication()`, and in the `reply` callback, we parse the JSON response that we setup earlier, again we use ObjectMapper to translate JSON into a NSObject. Then we render the data.

Collective Ray is searching for a versatile designer with the experience and proven track record to help lead and manage projects for a busy creative team. The ideal candidate has first-rate organizational and design skills and wants to contribute to a fast-growing, dynamic business. The candidate should also have an entrepreneurial mindset and a desire to work in a fast-paced environment. We are a group of talented, fun-loving people, with a high expectation for quality.

Responsibilities

Work on projects from initial concept through final delivery.

Present deliverables to clients and walk them through design decisions.

Help shape and maintain the company's external image by engaging with the design community

Manage an array of projects including web, mobile, and other digital executions from initial concept through final delivery.

Allocate resources and track schedules for individual projects.

Contribute to overall strategic effectiveness of the creative team.

Qualifications

Mastery of Photoshop and Illustrator from the current Adobe Creative Suite. (Knowledge of Sketch, AE, InDesign, C4D is a plus.)

Experience managing the creative process from kick-off through delivery.

Experience with relevant project management software (Pivotal, Asana, JIRA, etc.)

Self-starter who is ambitious to pursue projects and new skills without needing the help of others.

Excellent communication skills and a healthy balance of taking individual initiative and wanting to learn/collaborate with peers. 

3-5 years relevant experience at a creative agency or in-house creative team with a strong focus on digital product and production processes.

Knowledge of HTML/CSS and other web technologies is a plus.

Knowledge of print production processes from pre-flight through final delivery is a plus.

There's been growing unrest about the future of interaction design trends. In the past week alone, I've read three separate discussions about the so-called "end of flat design." This kind of talk is awesome because some of the best aesthetic and interaction design work is done at the dawn of a brand new trend. It gets designers thinking and inspires that special kind of creativity that our industry thrives on.

The pendulum swings

In the beginning, CSS only allowed for basic control over HTML documents. As web design technology grew up, the skeuomorphic aesthetic took hold, pushing the boundaries of what was possible on the Web. But as the style matured, some interfaces became difficult to use, confusing, or downright ugly. We abused the textures, shadows, and fine details that helped us define our industry. Designers wanted something fresh and simple to replace it.

The flat movement was born out of a need to get as far away from skeuomorphism as possible. Shadows and metallic sheen were replaced with solid hues and typography-driven design. It was a harken back to the Swiss 'international style' of design where strong typography and blocks of color reigned supreme in print.

But perhaps the pendulum swung too far in the flat direction. In the transition to flat we lost some of the helpful affordances – especially on buttons and forms – that more traditional aesthetics used to make our products easy to use. When everything became flat, creating a clear visual hierarchy became a constant challenge.

Can you tell which Shift key is enabled?

Flat has been the predominant visual style for over a year, and some brilliant work has come out of it. But it's clear that now it's time to let the pendulum swing back – if even only a little bit.

Post Flat

I propose post flat design – not just as a new way of thinking about design aesthetic – but also creating sensible visual hierarchy and more understandable interfaces for our users. Some qualities of a post flat interface may include:

Hierarchy defined using size, and composition along with color.

Affordant buttons, forms, and interactive elements

Skeuomorphs to represent 1:1 analogs to real-life objects (the curl of an e-book page, for example) in the name of user delight or affordance

Strong emphasis on content, not ornamentation

Beautiful, readable typography

Both skeuomorphic and flat extremes have uniquely beautiful and useful qualities, but merging the two styles allows us to leverage the strengths of both. For example, a mobile app might have dimensional buttons instead of colored text to represent primary actions within the interface.

Flaer by Brian Benitez

Without strict visual requirements associated with flat design, post flat offers designers tons of variety to explore new aesthetics – informed by the best qualities of skeuomorphic and flat design. Designers won't have to sacrifice usability to "fit in" with the latest trend.

Light and Switch by Sebastien Gabriel

Animated Safari Icon by Ray

Monitor your dog’s movement and exercise.

Collective Ray had the honor of helping Whistle bring their groundbreaking pet-tech product to market. Our mobile design team collaborated to map user interactions, establish mobile design concepts, produce, and help test a prototype of the mobile application, at the core of their product’s experience.

Users can purchase the device from Whistle.com, and download the companion app to monitor their dog’s daily activity. In addition to providing owners with a never-before-available level of insight into their canine’s health, the device also provides raw data for vets that can be used to help diagnose and treat pups that may be experiencing changes in their daily activity.

Whistle approached us with clear, articulate goals and explained the data that the device collects. We then developed interaction concepts – mapping user flow from on-boarding to sharing reports with friends. The flows were used to develop wireframes and an on-device prototype. We explored ways of exposing complex data to users in a user-friendly way and defined a style guide to help keep the app on brand. We worked with Whistle’s co-founder and product lead, Steven Eidelman – to develop the activity dial, a quick way to digest your dogs current activity compared to a recommended goal. In addition, we produced, illustrated, and animated an on-boarding sequence to help new users set up their new Whistle. Finally, we assisted Whistle in user testing, and used those findings to inform changes in copy and designs.