Channel Project Brief – The first of our content

Having more or less finalised the brand and theme of our channel project our group is now progressing with producing the content to display on our website.

The site, being produced and managed by another member of the group, is designed similarly to our concepts of the Orb and the OS, using CSS3 radial menus to convey this. The most up to date version can be found here at the time of this post, showing how the menus function like our initial designs.

We have also since discussed the details of the video content we are aiming to produce and display on the website, this is in keeping with our initial thoughts of advertisements and tutorials but with scope to also include the physical orb product as well as the OS. My role in the project will mostly be focused on the video content for this, filming and editing (with which I have the most previous experience) while other members of the group work on 2d and 3d animations for this to show the actual products on our site without physically mocking up the products.

Advertisements

Channel Project Brief – Developing the Brand

After our first meetings deciding on the direction of our channel, we since decided on our brand itself and have developed a logo as part of a 1-day project brief given to us on the 14th of January.

To keep in theme with our use of radial menus in our products, we chose a brand name of “orbit” as many of our products would be designed around the features and functions being around a central start menu on the screen – as if in orbit. We attempted to convey this in our first logo designs along with the user’s direct interaction with the interface as shown in some of our first designs below:

orbit logoLOGO 2

 

 

 

 

 

Here we aimed to show a blending of our futuristic theme merged with the practical approach of modern technology (shown through the hyperlink hand). For our final design, however, we refined the logo and added a visualisation at the tip of the finger to show the user interfacing with a design similar to that of our OS, to more directly convey the company’s products:

logo square

This logo and brand concept was then presented to our peers – the other groups on our course – for feedback, using this presentation hosted on google drive.

Feedback we got was positive and suggested we construct on our initial ideas to take the futuristic theme further, perhaps developing an actual physical orb that a user can interface with as a piece of hardware for the company rather than just an operating system. We’ve agreed to implement this as part of our project going forward.

Channel Project Brief – Our initial ideas

Going into our new modules assigned with a production group we have been set our first brief – the design of a futuristic online brand-specific video channel with a site and sample video and image content. The theme around this channel project is of design fiction, similar to sci-fi but oriented around futuristic design of technologies, media and interfaces, for example. As such, when we were first thinking of what to base our channel around we have considered it from the point of view of designing progressive technologies and products that we might like in the future ourselves, rather than predicting an outcome of society in the future and basing our media productions on that.

We took some degree of inspiration in the initial design and ideation of our channel from this post on webdesignerdepot.com showing potential products of the future from a viewpoint of design and practicality rather than science fiction.

Our group’s initial ideas settled on designing an operating system for the future, themed around a radial menu and a clean, minimalist design. The content of the channel would serve as the developing company’s website, promoting their products with video advertisements and also showing tutorial and demonstration videos showing how to use the system and the perks of it over old (our current) technology.

My next posts will likely focus on the development of this as a brand and as a project, and seeing what happens to our production and design from this initial ideation.

Finalized Portfolio Website Design – Version 1

I had previously not blogged regarding my portfolio website designs, but having finalized the first version of my portfolio for submission I feel it is worth discussing some of my design choices!

The initial idea I had was for my home screen, the first thing visible to a visitor. As first impressions are important I felt simplicity was key, along with a nice visual design, so the user knows clearly the way to navigate the site and access my content. My idea could be simplified into: The headers, a welcome message, and the navigation element. My first sketch of the homepage is below:

20140108_021206

This was the idea I ultimately stuck with, and have since developed. Alternate ideas I had considered took into account consistency with the other pages of my website – the navigation tool is scaled down and kept near the header to maximize accessibility while keeping the content of the page in focus. Attempting to do this meant my home page looked rather empty, whereas I felt merging it with the “About Me” page of the website would feel like too much of a compromise that left me without a true home page.

As a result of these decisions I kept with the initial design – for the home page, the navigation element could be considered its content.

Following on from this, I decided on a color scheme using Color Scheme Designer 3, a tool to help strike a good balance and use of color on my website. Slight desaturation was important to include so the background colors of the pages’ elements didn’t feel like the most visibly striking parts of the webpage, and I decided on a scheme slightly altered from this, using the darkest shade to mark out the header and the lightest for the body’s background.

homescr

The outcome of my design choices is screenshotted above. The icons on each of my navigation buttons were acquired from Endless Icons, available free for use under these terms.

To refine the style visually – getting rid of the rough edges, so to speak – I used subtle CSS styling such as 1px borders and the box-shadow function to add a small, yet noticeable amount of depth to the appearance of the website. Following from this, I imported Montserrat Alternates for use in my header bar consistent across all pages, and Cabin for use in the pages’ content, both from Google Fonts. This displays correctly on all up-to-date browsers as the fonts do not require installation on the user’s computer.

The final stylization I applied to the page was background-color transitions on the navigation buttons when the mouse hovers over them, to add a smooth bit of visual interactivity to the site. Rather than sticking with the blue color scheme used on the rest of the site for the transitions I chose to use this color scheme on the animation. The colors are slightly more vibrant than the rest of the site, but will only be seen on mouseover so the user’s attention will already have been drawn to that element. I made sure the transitions were also not too slow (0.4s), as I wanted the user to experience the whole animation on mouse hover while understanding the users would be looking to navigate to the site’s content, not admire the animation.

I kept the same visual style on the other pages of the site, yet had them filled with the relevant content – about me, and my portfolio work – moving the navigation buttons to the top of the page instead, out of the way of the content yet still accessible.

abtscr

These smaller navigation buttons still use the same CSS background transitions as the main page. When on a relevant page, the navigation button for that one stays in the transitioned color to emphasise that for navigation purposes. Mousing over it brightens the color slightly.

I plan to continuously revise and improve my portfolio site as I get more work and my skills improve, so keep an eye on here for updates!