Design Report- Lars Thurlow

I approached the project with the brief taken into account with ideas of the journey I would take to arrive at the finished product. Thinking of the possible outcomes and ways of achieving an artist portfolio that not only has functionality to the user, but shows my professional direction and design method. I wanted to capture the originality of my personal technique through the structure and graphic design. Whilst making a very visual and interactive portfolio based website with the additional mobile site.
I began the planning of the site after gathering the content for the site from a photographer who I had chosen to design it for. I got a few captions of text and numerous galleries of photos and gained an insight into what they wanted incorporated into the website.
I was given variuos input from the artist but left to work with no real guidence of what they wanted. So I tried to capture a rustic old school theme with all the fonts and color schemes working together to complement the design and the work. I also used a background that not only added detail to the design but made the site itself pop out from the design its self. In the overall graphics I tried to capture an retro/old technology style with circuit boards and lines. That not only broke up the layout whilst adding detail but gave this polaroid and old photography feel throughout and I personal believe it is fit for purpose and tells the browsers what the site is for. An example of this is the opening illustration that I designed to look like camera leanes and the fronts of the cameras.

I created wireframes for the site and began choosing colour schemes and different layouts. Before deciding on the final design I mocked up a number of different layouts and styles until final deciding this one to be the best. As it fitted the genre and criteria correctly. I began applying the coding and using HTML5 and CSS3 tags whilst coding backup codes and fallbacks for all the alternative browsers that may not support HTML5 or Css3.
I chose to make a simple fixed static layout with bold colors and different typefaces. I made a simple layout that would display the content in bite size chunks making it easy to take in. With the site being more visual based than text, with a real photography and graphic based theme to the structure. Included categorized galleries split into Commercial and Personal, and then split into three sub sections. This worked well and made it very simple for the user to find or look at specific work. I added the jquery light box to these pages to maximize the viewing of the photos and speed up the loading of the site. After facing the problem of displaying all the images in high resolution on the page caused longer loading. Which i solved by adding a smaller images and giving the bigger version available from the click of a mouse on the photo itself. The other pages included a contact page that consisted of contact details of the artist(client) and a PHP contact form that you can write a message and have it sent to the artists Email. Another page was a small gallery consisting of random photos from all the different galleries in a sliding gallery. To finish the portfolio site I created a few other pages to give the possible browser more information in a text based form.

The page I came back to at the end to adjust was the page I started with the Home page. It had a main illustration surrounded by the simple background template used throughout the other pages, with a HTML5 mp3 player. With a central illustration that I created on Photoshop, a slogan and the artists name headlining above the main links. I created the fonts for all the pages using font squirrel font kit and used a royalty free track to make an atmosphere to the website whilst creating interaction with the user. After doing this I checked through the coding and began work on the mobilization after completing the structure and design of the main site.

I followed the same color scheme and design for the mobile site so it would look very similar to the main site but at the same time be a more simple design with the compatibility to work across the range of mobile phones. I did this by creating a few lines of coding diverting any user with a screen size smaller than 699pixels to the mobile site. As another option I added a mobile link on the home page. After finishing the structure I tested and learned the method of fluid and fixed layouts. Taking into account the variables involved. I managed to structure the mobile site to an average size of most mobiles, with some navigation involved and a screen adjust with percentage values.

Throughout this project I have developed existing skills whilst learning new methods and tags in HTML5 and Css3. Facing the problems of different browsers and making compatibility across the board for all users. I added features such as text shadowing with a color tint to back the text content. This only worked in all the browsers but Internet explorer. With it just staying at the basic format. I then added optional font enlarger with JQuery plugins. I adapted these into the correct position and changed the color size. I checked the validation and checked my site on multiple sites to check for functionality and I adapted it in parts with fallbacks and lines of coding to backup browsers that may not surport the HTML5 or CSS3 tags.