Wix Website.

(Project 7)

For two weeks I was tasked to make edits, improvements where needed, and to evaluate my Wix website that holds all of my coursework. To start with, I was tasked to do some research on some existing creative industry websites and take the features and apply some of them to my website.

Below is my plan and then examples of the sites I looked at and the features that are similar to my own site that I took inspiration from.

Plan.

My overall plan for this unit is to go over my website and, most of all things, make it more accessible and easier to navigate. I also wanted to make it look a little bit more creative and professional. I plan to do this by adding in more titles, better descriptions and rearranging what I can to make the website look more finished and artistic. I know that I am limited on what I can do due to the template I chose for my site at the beginning of this course therefore I plan to stay away from this when I eventually go on to create another site on my second year of the course.

99 Designs.

The whole website 99designs.co.uk was extremely useful to me as it features the websites of 40 famous design companies. A common theme that has to be featured on all of these companies websites if they want to end up being successful is accessibility.

Accessibility comes down to things such as colours, fonts and ease of navigation. This is something that I think my site does fairly well. I have chosen a black background with white text as this is easiest to read for most people because black and white are extremely contrasting. I have chosen a third colour in my colour scheme too that can be found throughout my site and this is a sort of bright lime green colour which I think also contrasts well with the background as it is bright and the background is dark. I use this kind of colour for the name text on my introduction page and for links within my blogs so it is easier for people to tell where the links are and which parts they would need to copy into my browser.

Below are some edits I made to my site to make it look that bit more professional and understandable.

One thing I did was add a title to my 'Blog' page as before I had forgotten to add one in and thought it could be a bit confusing for viewers without one.

Furthermore, a common occurrence I found when looking at these sites were that they all have an 'About' page. My site did have one however I hadn't really edited it much since I started creating my website.

The first thing I did was edit the title section as before it had a strange striped patterned background and this would have probably been confusing for some people to read. I added my title, edited my description and then arranged them with a picture to look more professional. I also added my contact details beneath it so people know where to find me however I am still unsure on the positioning of this as many other sites I've seen have their contacts arranged at the bottom of their page, so I may make some edits to this in the future.

After this, I ended up looking specifically at some sites from this website and coming to some more conclusions about my own work. Read below for some examples.

Pentagram.

https://www.pentagram.com is a multi-disciplinary, independently owned design studio.

Their website has a common theme throughout, mostly, and a good style. Sometimes the colours will change - for example on their 'About' page the background changes from their usual white to black - however they still manage to make this fit in and be effective.

Their site is well structured and easy to navigate with five buttons featured at the top. To make it even easier, the site also has a search button so that viewers can find things easier. My site also has a functioning search feature which is extremely helpful for viewers, especially when it comes to looking through certain talking topics on my blogs. I think however that my search feature would be even more effective if the text did not have to be featured as images on my project pages. I may in the future see if adding alt text to the images helps with this problem.

One thing that immediately catches my eye within this website and many other design websites like this one is the way that the projects, images and text are arranged on the page.

I have noticed that a lot of these sites arrange their projects in a collage type manner, where not all of the project covers are equally sized. In my opinion, this catches your attention more than if the projects were all the same size next to each other.

I have reflected a similar thing within my own website on my 'Projects' page already, however, after looking at this site I decided to experiment a bit more with how my projects are arranged. Below you can see my progress.

Here is what my site looked like before I went to edit it. I think that it looked good however the page is quite full and crowded.

After noticing this, I went on to fixing the issue, I used this menu to the right to experiment with different arrangements.

Originally, my page was set to the 'Masonry' layout.

Below is my attempt at trying the 'Collage' layout and also trying something different with my text, however I ended up running into some problems with this. As can be seen below, when using this layout, some of the projects become very small so you cannot see the covers or the full text stating what the project is.

I also just didn't like the way the text looked like this, I felt as if it took focus away from the cover designs and some of them I put a lot of effort into designing so did not want to cover them up.

Below is something I experimented with where instead of it being limited to having 2 projects per row there are a maximum of 3 projects per row however this to me looked a bit too much like a grid and strayed away from my original idea of a more random, eye catching arrangement.

Below is something I did to try and make the text stand out more without it taking to much away from the cover designs however I still felt that this wasn't so effective.

I looked more into how pentagram positions their text and noticed that they place theirs underneath their projects. I decided to take a page out of their book and try the same thing as therefore the text is visible at all times, legible and doesn't take away from the cover photos and designs at any point. Something I also did was increase the space between projects and increase the size of the margins of the web page, I did this because I think it made it look much more professional and less overwhelming for viewers. Below was my final decision.

My overall impression of Pentagram's website is that it is very professional, well arranged and structured so that it is easy to navigate and it is very effective and creative without being too overwhelming with too many animations, videos and images etc. at once. The website is accessible and the search tool makes it easy to find what you are looking for.

15 Best Wix Website Examples.

I found the website https://www.wix.com/blog/2016/03/wix-websites-examples/ extremely useful when looking at Wix Site designs as it opened me up to the possibilities of Wix itself and I know that if I were to create a site/web page again with Wix I would definitely take inspiration from a lot of these.

Something I really like about these websites are the common occurrence of videos and visuals where they play if you hover over them throughout making the sites more interactive and interesting with an artistic feel. I also like the use of visuals and typography in these sites in general - it doesn't have to be videos - as they look extremely unique, artistic and creative

I tried to do something creative on my 'Home' page too. I wanted to do something that fits in my whole website design while also being interesting to look at, drawing in attention so that people are more enticed into looking through the rest of my site as this is the first page my audience will see.

Here, above, is what I added. I think that this is so much more effective than what was there in its place before (below).

Something that I also noticed while editing this part of my site was that the 'Contact' button I added in didn't actually have anything linked to it and it therefore didn't function so I quickly fixed that and linked the button to the contacts section on my 'About' page. Buttons are something that I found to be extremely useful for finding specific things within the design company sites I looked at.

Animal Music.

An example of a site that inspired me to do the above could be animalmusicweb.com due to their web design on their first page as the instant you click the link to their website you are hit with good quality and effective visuals, images and text with some examples of their work below.

I really like the design and style of the Animal Music site too, it is structured as one page however when clicking the buttons at the top it scrolls to the right section of the web page, making the navigation on that part simple and easy. Overall, I like the design work on the site and think that a lot of it looks great, at times however, I think that the level of accessibility could be improved because of the amount of different videos/GIFs moving and flashing next to each other could be quite overwhelming for many.

Sonja van Duelmen.

After looking at the Animal Music web page, I went on to look at another site from https://www.wix.com/blog/2016/03/wix-websites-examples/ and came by Sonja van Duelmen's website. I was drawn to it because of its overall style and its design work from its structure to its typography. The site has been created by an artist so she can showcase her work so therefore it's obvious that the site is going to be full of creativity and passion.

On top of this the site is easy to navigate and even the blogs on the 'Blogs' page - shown below - are arranged creatively.

This inspired me to experiment with this in my own website. Here are some examples of the things I tried below.

I liked and considered the arrangement below as the blogs had almost all of the qualities of how they looked previously however were arranged more interestingly and looked most similar out of all the layouts to the example I was inspired by, therefore this was a layout I heavily considered using.

I heavily considered this layout below as I quite liked how it looked however one thing I didn't like was how it doesn't show a preview of the text on the blog cover. It also darkens the images which made me feel like they didn't stand out as well or look as effective as before.

I ended up considering this grid layout below but thought it looked a bit too crowded on the page making it quite overwhelming.

I didn't end up liking how this one column layout looked as I thought that it made it so one blog takes up too much space on the page

Overall, I think that this artist's approach to website design is amazing and you can tell that she is passionate about her work. A clear amount of care has been put into it all as a whole and you can tell this from the amount of detail.

Another thing I wanted to add to my site was a page for my official work experience. I wanted this page to contain an example of the final product and a summary and evaluation of my thoughts about the final product and the creation process etc.

I was originally going to put all of this on my 'About' page however wanted to keep that page relatively brief and more like a CV whereas I wanted the 'Work Experience' page to be in more detail. I chose to put a button at the bottom of my 'About' page linking to all of my official work experience.

Future Improvements I Would Make To My Site.

One thing I'd definitely want to improve on in the future would be the templates I choose for my site as at the beginning of creating this site I chose a template that doesn't have many good functionalities and doesn't really function in the way I intended it to. Examples of this could be that when I add something to one website page, the template will sometimes make it so it is added to other pages too. As you may notice, all of the text on my Projects Pages are actually added to the site as images, this is the reason, as when I add text to any of my projects pages it ends up being featured on every other project instead of the specific one I am adding to.

In addition to this, continuing on from my previous point about accessibility, this website template makes the accessibility levels a bit lower as it isn't easy for people to make text larger or more legible on many pages because the text has to be featured as an image.

I am excited to eventually create something new with this insight.