Research into Portfolio Websites and the design thereof, as well as the technical aspects behind the creation of them, was conducted in the initial stages of the assignment. Regarding the technical aspects I investigated both the programming languages and coding styles used to create web pages, as well as how the structure of the world wide web operated, with an emphasis however on the communication between the client-side and server-side in relation to web development and access.
The research into Portfolio Websites and their design allowed me to identify good and bad elements, of which I then used to inform my own design process; avoiding bad design choices while ensuring that the good elements of design that I have analysed help inform my own work. The combination of written analysis and mood boards create a wide coverage of the design elements, allowing one to analyse and decipher the thought process behind certain design decisions, of which help inform one’s own work.
After having completed my research I moved onto sketching out my designs, ideating various wireframe compositions, flow-charts, pages, and design styles, accompanied by annotations and notes to further help the ideation process. Once I had settled on a design style; minimalistic and elegant, utilising negative space and clear font styles, I moved onto digital wireframing using Illustrator.
In this stage I was able to further fine-tune and trouble-shoot layout issues, using rulers and measurements to establish the desired composition and style. Once happy with the over-all layout I moved into Muse to begin creating the finished site.
For the settings of the site I made sure the Max Page Width was 1200, the Min Width 320, and the Min Height 1000, with there being 0 for Margins and Padding.
Inside the document, breakpoints were created at 450, 960, and 1200, rough estimates of different device screen sizes. This, in conjunction with Responsive Width and Height settings, as well as Pinning and composition changes on certain breakpoints, helps to create a website that contains Responsive Web Design elements.
Starting out with the actual website design, I made sure to use a Master page first. On this master page, I made sure to include all the elements that I wished to persist throughout every page on the website, these being; my name, short summary of my ‘position’, and the categories in the site.
To create this ‘header’ I created text boxes, and after some experimentation with font, settled on Batang and Batang Che for my name and sub-heading. Arial was used for the Categories section, with careful placement of each word/text box with the help of rulers. Once happy with the placement of these elements, I created a box that allowed me to hyperlink certain areas of the web-page with other pages.
After testing out the different break-points I realised that the numerous text-boxes were not aligning properly when resized. Therefore, I went into Illustrator and created a PNG of the categories section. Once completed, I moved back into Muse and placed the image, creating multiple boxes for each individual word/category that linked to their relevant pages. To make sure that the Responsive elements of the webpage worked, I ensured that Responsive Width and Height were ticked, certain elements were pinned in the right places at the right breakpoints, with composition changes being made in the relevant breakpoints as well.
As mentioned before I opted to go for a minimalistic approach for my portfolio website, allowing my artwork to be the focus. The Home page allows one to navigate to the Portfolio, Services, and About pages through interaction with the images presented. A certain hierarchy is established on this page, and persists through the others, with the placement and size of the images helping to create a composition that grounds the page and guides the eyes; this is especially true once the font, and placement thereof, is taken into consideration.
The inclusion of a pure white background, with the header parallaxing behind due to the careful placement of layers, helps to create a readable and easily digested format that allows the artwork and information presented to be the focus.
I decided to split my portfolio up into two sections, ‘Paintings’ and ‘Drawings’, with preview images at the main portfolio page that entices the viewer to investigate my body of work. This does, however, create one extra click for one to access my artwork. Although, the structure of this system provides the user with a degree of control, placing in their hands the illusion of choice as they decide which half of my gallery to view. Not only that, but the other gallery is easily accessible from the sections presented near the top of the page, with the current page highlighted in bold.
This type of design, one where the user always knows exactly where they are on the web-site and how to navigate back or to other pages, helps to create an enjoyable experience for the person viewing your work. The presence of good User Experience design directly correlates with the careful design of the User Interface, allowing all who happen upon the site to understand exactly the purpose of it, as well as how to navigate the pages.
The gallery used to display my artwork in my portfolio is a Responsive Lightbox Widget supplied by out lecturer, allowing use to upload thumbnail and full-sized images into a gallery that adapted to the web-page’s size and orientation. The resizing of the images for use as thumbnails was done in Photoshop, with short descriptions being made using the Widget’s menu. To ensure that the gallery operated smoothly, a separate element had to be added first, allowing the gallery to work as intended.
Lastly, I included various information regarding my services, skills and proficiencies, about myself, as well as ways to contact me. For the Contact page I used the built-in Hyperlinking functionality in Muse, highlighting the relevant text and adding a hyperlink to an email address or external web-page. Once completed, I published the site to Business Catalyst after naming it ‘ryannothard-portfolio’.
The link to the website is here: ryannothard-portfolio.businesscatalyst.com