Aaron Baker

A digital media design blog.

Month: December 2013

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.

© 2020 Aaron Baker

Theme by Anders NorenUp ↑