Search
  • James Dodsworth

MAKING THE WEBSITE

Updated: May 14

My role in the 4th year Visual Communications degree show exhibition was to create a website which would act as the face of the class. This website is ideally where I would want anyone who has come across or followed the RGB Instagram page to be directed, as this is where they can get a glimpse of the designers and their work, before gaining access to the virtual exhibition.



THE PLANNING STAGE (MARCH 11)

I was not able to attend class when the original plans for the exhibitions were put in place, however, I made sure that I was informed about the general updates regarding the theme, roles and planning.

In early March, I arranged a meeting with the majority of the class to discuss what they wanted to include in the website, and to mock-up some wireframes. This was helpful as I received suggestions and feedback which gave me a basis to work from. These are some of the suggestions:


· YVES LOADING SCREEN MORPHING OUT TO REVEAL LOADING SCREEN ON HOME SCREEN (File didn’t work when imported into wix)

· NO SQUASH LAYOUT

· RULE OF THREES

· STRIP FOR DESIGNERS PROFILE PAGE (SWEEPING MOTION)

· DESIGNER PROFILE PAGE: ARTWORK, DESIGNER NAME, DESGINER PIC, DESIGNER BIO, LINK (SEE FULL EXHIBITON HERE)

· SOCIAL MEDIA ICONS ON FOOTER

· PAGE SCROLLS WITHOUT BACKGROUND IMAGES

· DESIGNER PROFILES MERGE IN WITH SCROLL EFFECT (0 OPACITY TO 100)

· LOAD CUSTOM FONT ON WIX/ SAME FOR HEADING, ALSO ANOTHER SANS SERIF (USED FOR BIOS)

· BLACK DRIPS AS THEME THROUGHOUT WEBSITE

· CHECK ABOUT FREE WIX WEBSITE DOMAINS




When designing the website, I tried to incorporate many of these elements. However, I did not want to include these at the expense of the overall finish and navigation of the site. I started by making a wireframe mock-up of the home page with different elements and design options for the class to give opinions and feedback on. Unfortunately, I did not receive any response from the class. This was not a complete loss as this allowed me to start the site with complete creative freedom, as long as I include some of the original elements from the first feedback session.




THE FIRST MOCK-UP (MARCH 27)

I started by importing the fonts and files from the class Google drive. I went on to create the first mock-up, this focused on experimentation of layout and clearly presenting the RGB theme to viewers. While I preferred a central layout, I felt that the RGB background was too much colour at first, also the file was not large enough and showed some pixilation.




THE SECOND MOCK-UP (APRIL 12)

I then moved onto the second mock-up, this time I left out any RGB on the home page to focus on the layout. While doing this, I thought that the “RGB” letters might look good in the swirling colours, so I took to photoshop to cut out the letters and import them back into Wix. During this time, I also edited the designer profile pictures, softening the edges and converting them to appropriately sized JPEGS to use in the site.



THE THIRD MOCK-UP (APRIL 19)

The third mock-up I made eventually developed into the final home page. I started by placing all elements in a central layout, these were separated by horizontal lines to act as breaks in the page. The RGB letters were then laid on top of the black layers, timed animations were then added to each letter, to make them appear one after another. Lastly, I thought although the white background works with the RGB lettering, it looked unfinished,

I therefore added a plain white wall texture as a background to finish the design.


I moved on to the menu and header design as this had to fit in with the theme of the home page, while still being functional in site navigation. I started by making the menu the same font as the “RGB” letters, adding separate red and blue colour commands for “hover” and “click” inputs. I turned my attention to the left side of the header as I felt it was empty and made the site feel imbalanced. I placed the RGB logo to fill this space, I then added a horizontally flipped version of the coloured RGB letters and placed them at the bottom of the black letters to act as a coloured reflection/shadow. I feel that this completes the home page and provides a theme link between all pages.



THE FINAL HOME PAGE DESIGN (APRIL 28)



THE DESIGNER PAGES


I turned my attention towards “The Designers” page. I created a dropdown menu of the designers, slideshow of everyone’s work alongside a clickable name which linked to the individual’s designer profile, allowing each student to present their best work to viewers. This was placed on top of a blurred version of the RGB swirl background, this solved the issue of pixilation and gave a nice backdrop for the slideshow. The slideshow was also placed at the bottom of the homepage to encourage viewers to click on students work from the start of the journey through the site.




THE BLOG PAGE


The blog was also designed to keep in with the themes of the other pages, incorporating the same fonts, RGB background and central layout. I have managed to invite all of the class to be contributors of the blog so that they can share their role and experience of the exhibition development with you soon.


EDIT: I have fixed the small issues that some of the students have pointed out such as duplicate pages and type errors. I have incorporated the exhibition video trailer of the exhibition and re-made the site to be mobile friendly.


While I have not received feedback from all of the class, I am pleased with feedback I have received. I feel that the final site keeps the RGB theme throughout without being overwhelming to look at. All of the students have their own profiles, complete with a picture of themselves, their work and bio. The blog is accessible by the whole class and does not look like an extension of the site.

15 views0 comments

Recent Posts

See All

Finalised profiles

Once I had a design for the plaques that myself and the class were happy with all that was left to do was make everyone's plaque. It did not take me long to make up everyone’s plaques. The final desig