Site Redesign

So during a moment of madness, I thought that three days from the deadline it would be a good idea to completely change the template from my site.

Fortunately using Squarespace this isn’t a massive deal because I can keep the version of the site that is currently live whilst editing the new template in a ‘preview’ mode, meaning that if I decide I don’t like it then I can just delete it and nothing has changed from the site before I started trying the new template:

Preview Layout

Preview Layout

When I have finished making adjustments to the new layout I can then click the ‘set as live template’ option which will then make that template the one people will see when they actually try access my website. It also keeps all the settings that I have used on the previous one meaning I can revert back at any time, which is very useful.

I personally feel that the new template that I have started using has a much cleaner feel to it and I prefer the way the drop down menus look on this one. Here is a picture of my modified version of the layout:

New Design

New Design

I like being able to have the option to have my navigation bar at the top which was previously unavailable as I tend to think that navigation bars work better for users when they are positioned right at the top of the page.

Another thing I like is that the navigation bars now come down directly below the folder option within the navigation bar. Before it was like a ‘collapsing’ animation when clicking on the folder, which I will admit looked quite nice. However I just think that this style of navigation is more obvious and more what people will be used to. Simplicity and usability is key.

Nav Bar

Nav Bar

A problem I had with this new theme is that because it is one of Squarespace’s older themes, that apparently it doesn’t provide the customisation option to hide your social icons from your web pages within your site. This meant that I was having the issue of having these icons displayed on every single page, whether I wanted them or not:

Social Icons

Social Icons

I did a bit of searching and found an answer to my problem at this link on the Squarespace forums.

It told me that I had to go into my control panel and change the ‘connected accounts’ setting to turn off all my social icons.

Control Panel

Control Panel

Icons Off

Icons Off

Sometimes displaying your social icons can be a good thing, and I wanted these to appear on my contact page so that it gives people various ways of getting in touch with me depending on their preference and Squarespace allows me to add them individually as and when I please without having to have them constantly displayed on all pages.

I can also customise the settings to show the icons with colour, as well as whether I want them to be round, square, or just the original icon.

Here is how they look on my contact page:

Contact Page Icons

Contact Page Icons

I have also changed the format of my gallery on my website.

On the original I had it to display the images as a slideshow, and whilst this is sometimes good, I thought that it made the site look very plain and boring because if you were to just look at the site it looks like each page just has one image on it. In the new layout I have changed the format to have a ‘grid’ layout and I think this makes the whole site look a bit better as it allows my work to be more eye catching to a potential suitor rather than them having to flick through a carousel of images to find what they may be looking for:

Gallery Grid

Gallery Grid

This also makes it less of a problem for the issue that I discussed before whereby when some images were landscape and some were portrait within the same category it affected the aesthetics because when you were flicking through the slideshow the dimensions would keep changing which could be a bit annoying whereas now the layout can line them up side by side with no trouble at all and the user can click on the image they want to view. The image is then opened up in a lightbox mode and they are then given the ability to view the images as a slideshow if they so wish. The best of both worlds.

Curation Boxes

Curation Boxes

This screenshot shows an issue I had with creating the links to my various curation pieces, in that there was no specific outline to the image boxes because they were the same background colour as the site background creating an infinite image almost. I thought this might confuse users and make it all look like one thing, so I imported the screen shots into Photoshop and added a black ‘inside’ stroke to all the content boxes so that they were more obviously clickable boxes.

Box Outlines

Box Outlines

I then uploaded them to Squarespace and added a clickthrough URL to take you to the respective page where the Storify curation is embedded.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s