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:
I feel the red/blue theme exhibited here is more eye-catching and visually appealing than previous designs.
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.
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.
The slider can be found here.
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.