Aaron Baker

A digital media design blog.

Category: Uncategorized (page 3 of 3)

Site design revamp!

I recently revamped the design of my portfolio site. Since the early concept stage I’ve showcased before where the design was fairly monotonous and greyscale, I have decided to go with a bolder, brighter colour scheme to make the site more appealing. To this effect I have also incorporated a banner/header image at the top of the homepage for aesthetic appeal.

I have also changed the positioning of the navigation bar so that it is more central. This is to make it easier to spot quickly to minimise confusion in traversing the site.

Here’s a sneak peak at the new design:

website screenshot

I feel the red/blue theme exhibited here is more eye-catching and visually appealing than previous designs.

Design Vs. Usability

Something that has come up for me during the design process for my portfolio site is the issue of design versus usability. I have had to make a decision based on this a number of times so far.

My initial idea for the website was to take the JavaScript slider that I previously made, and apply it to the entire site. The ‘pages’ would then be laid out horizontally across the browser, and the navigation bar would scroll across them. I liked this idea as it would be something different and catch the attention of those using it. However, I have since come to the conclusion that this really isn’t the best idea for the site.

For one thing, the scrolling action would be done utilising JavaScript, rendering the page somewhat unusable to those that, for whatever reason, have disabled JavaScript in their browser. This is not good for getting the page to the widest audience possible.

Another problem with this side-scrolling page design would be that it would be impossible to link someone to a specific page of the site (for example, mysite.com/mywork). This is because it would all be one page, and the scrolling to different sections would be done using JavaScript functions attached to the navigation bar, rather than just hyperlinking to a different resource.

For these reasons I have decided not to pursue this design. I may however still go with a single page design, but a more traditional vertical scrolling one. I may also opt for a multi-page site.

Simple JavaScript Slider

Recently I started teaching myself basic JavaScript from online tutorials and resources. One of the products of this has been a basic content slider/carousel. I have seen many similar sliders built in jQuery, and using one of these pre-built solutions may be easier than building one from scratch in pure JavaScript, however this was done as  a learning exercise as well as to get the final product. I feel that the creation process really helped improve my coding skills, and particularly the compacting I did after it was complete and functional, whereby I stripped out a lot of extra code. I may or may not include the slider in my portfolio  website.

The slider can be found here.

Experiments with Responsive Design

A few years ago, it was commonly accepted that websites were for looking at on a computer. That was just the way things were. The mobile phone was a tool for talking, texting and playing snake, and a tablet was something you took when you were ill. It  wasn’t really until the dawn of the smartphone that people started to want to view web content on these smaller screens.

To solve this, people began to develop multiple versions of the same website aimed at different screen sizes, and while this certainly works to an extent, it has its flaws. Nowadays, for instance, the number of different devices of all different shapes and sizes makes this method simply not viable for covering every possibility.

That’s where responsive design comes in. This is a method of website design using percentage-based measurements and fluid grid layouts to adjust the presentation and arrangement of content based on the size of the viewing window. Targeting certain common widths of devices (usually utilising CSS media queries), this method can be used to serve the same website to desktop, tablet, and smartphone users alike, yet still present a custom experience to each of them.

One trade-off with this method is that the designer has less control over the exact design the end user will see, as it will differ slightly from device to device if they are of different sizes. This can be mitigated however by targeting more varied device widths with media queries. In my opinion this is an acceptable compromise, seeing as how the benefit is increased usability and compatibility across a range of devices, so you’re not cutting out a section of your potential audience.

I will be trying my best to use this method of responsive design across my portfolio site.

Concept & Ideation Group Projects

Group projects. That’s what is currently going on in our Concept & Ideation unit. Brief, 2 week projects where the aim is not so much to come up with a product, but to conceptualise a potential solution to a (usually) theoretical brief. I say usually because as it turns out, the current project has a chance of becoming a reality. I’ll get back to that in a bit.

Bristol Zoo Logo

The lovely Bristol Zoo logo.

The first project was about a zoo. Bristol Zoo, to be precise. In the scenario given, the folks at Bristol Zoo were requesting a digital user experience to help improve and promote their existing facilities. According to the brief, they had a back catalogue of historical images and facts about the zoo that they wished to be included somehow in the project. 

Our group met up and started talking about how best to go about fulfilling the requirements, and we decided upon a physical experience within the zoo, rather than a purely digital product. To this effect, we came up with an informational roller-coaster type attraction, utilising projection mapping to immerse the customers in the history of the zoo.

We also designed a wristband that would be given to customers on arrival at the zoo, which would be customised with an RFID tag to hold the name of the family. It would also include GPS functionality. This way, the bands could be used to track lost children or to navigate the park, either from information points or from an app that would accompany the bands. Funds would also be able to be loaded onto the band for easy use of the onsite shops and restaurants.

Bristol Zoo wristbands

The initial concept design for the wristbands.

Overall this project went quite well, and helped me personally to improve on some key skills such as team work, and also allowed me some practise with image manipulation in designing the wristbands.

Image

The second project was based around the ‘Fire Kills‘ campaign. The task was to come up with a media solution to help inform people of the 6 main points of the campaign, including keeping doors closed and always planning an escape route. It was made clear that it should be innovative and grab peoples’ attention.

Our group decided on an interactive infographic/quiz, which would be trialled at bust stops, before being spread to other areas such as shop windows. The idea was to use mainly pictures rather than going for a text-heavy approach, as images can be made easily recognisable to a global audience, regardless of the language spoken. We felt this was important as fire safety is an important message to get to everyone, not just those who understand a certain language.

We also thought about future development of the idea with upcoming technologies, such as incorporating a hologram of a fireman or other such imagery, to draw attention as well as making the experience more memorable and immersive.

All in all, I think this project was a success, since we managed to cover all the criteria in the brief and come up with a good idea. 

Unfortunately I can’t say anything about the current project, since it’s not done yet. We wouldn’t want to give any group secrets away now, would we? (There’s also some contractually obligated secrecy. Very hush hush, this DMD lark.)

With that said, that’s about all there is on this particular subject. To summarise – group projects going well, personal skills developing, all is good.

Brilliant.

 

Personal Site

Personal Site

Beginning work on my personal website. Just a starting basic design so far.

Newer posts

© 2020 Aaron Baker

Theme by Anders NorenUp ↑