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.

Designer-Kakarod interactive

website-www.kakarod.com
Designer-Kakarod interactive

They have designed it with link less capabilities for creative expression using flash. There is a series of dangling letters and blob shaped tags that jostel playfully under the mouce crusor. You have the option to either reveal the content or pull variuos instructional tabs up or down. Making you as the user engage with the website and the content. It isnt wide in the approach to a wider audience as it doesnt have specific parts of the content in English, with no easy PDF translation or option. Apart from this the site has the novelty factor and is stylish non the less. Including extra features in PDF and slidereels and archives of their work. The only real downside is some of the loading due to the flash based content.

Validation..

Validation-w3 schools. Photography website
I have Validated my webpages on the website. There was minor mistakes that needed adjusting only a few left to check but their hopefully wont be too many errors or problems to fix. Once this is done the vaildation will be complete and the site will be ready to go.

Colour Index-Book by Jim Krause

colour index book
This is a book I purchased years ago when doing graphic design, but is a valuable asset to all designs. It contains different colour wheels and diagrams/illustrations. Showing the colours that complement each other and colours that clash. The book is called Colour Index by Jim Krause.

Rob Edwards

Rob Edwards is a graphic designer and web designer. Based in Surrey and London as a freelancer whilst working in creative agencies. The portfolio website is what stood out to me as it is designed with typefaces and numerous font styles. Using little colour stopping the audience’s attention being stolen from the typography. The main header graphics has a vintage newspaper feel with visuals surrounding it. The website almost has an old school circus themed poster with the effect similar to antique poster art. This design stood out to me for its strong layout and use of little colour but still managing to stand out, with a unique long page structure. It uses floating sections with dabs of jquery coding on the portfolio. It has simple screenshots of his work broken up with thin black borders and other small silhouette images. All fitting to the circus based genre throughout the publication.

Chris King-Illustrator/Designer

Chris King is an illustrator and designer specialising in animation and character design with work featured in numerous publications and media worldwide. I managed to look at this illustrator whilst gathering some inspiration for my drawing and art work. It didn’t give me any new ideas for the set project but he proved to be an interesting artist.

Original wireframes-Portfolio Site

Here is x2 screenshots of the original design for my first portfolio before I chose to rapidly change the theme and layout.

Database Ideas

After studying aspects of the database and trying it on the maeda server. I plan to put into practice with a news/blog page that will display a maximum of 3 captions at a time. Or I will create a simple comment page using PHP similar to the design used for the contact form. I intend to trail both and make possible variations, developing them to incorporate some form of database into my website.

Putting Percentages Into practice

I have just began trying different possibilities with the percentage css coding for the mobile site. It works well so far, but still needs finishing. I have set a max size of 699px and min of 580px. This gives the effect to fit and resize to the screen of the browser, with the freedom of over a 100pixcels to readjust to fit and still look good. I have chosen to incorporate this throughout and hopefully polish out the errors to perfect the navigation throughout all portable devices.

Mobile Layout-possibilities

Fluid/liquid and the fixed website structuring.
The fixed websites which I have created in the past have their pros such as easier to edit with no 'max size' or 'min size' but to achieve the mobile version of the photography site, including good usability and efficiency the fluid site fits the purpose more. Fluid layouts are usually set in percentages. So they may adjust to the user interface. Giving more compatibility to mobile and tablet users. Whilst looking the same amongst all browsers. A possible third option I investigated was an elastic layout. Which is a mixture of the two main layouts. It works using ems. (A pixel is an unscaleable dot on a computer screen, where as an em is square of its font size. As font sizes vary, ems can respond to text size preferences).

Mobile Site

In the making of the photography portfolio site I had the task of achieving a mobile site as well for all portable devices. I chose to make the portfolio site and if the users screen resolution was any smaller than 699px it would be transferred to the mobile version. Also I decided as an alternative to add a link button on the home page so users can use the mobile site if preferred. The colour scheme and design are both of the same style on the mobile and normal website. After achieving and coding both I looked into Fluid/liquid layouts compared to the fixed I was used to. Using percentages rather than fixed pixels. After playing around with both I’m still undecided whether to keep my fully functional mobile site which works and if in the rare case the screen needs to navigate horizontal as well as vertical or add the percentages that will adjust the structure when there is the rare anomaly of a screen too small. In theory the mobile site is a smaller and simpler version with its own unique layout.

Portfolio Website

Portfolio website
I began the development of my portfolio site by firstly brain storming ideas and possible plans after reading through the brief. I drew up some wireframes and illustrated some designs. I made the basic structure and styled a few of the pages with css. After this I decided on a complete new approach to the design and changed the whole interface and re designed the backgrounds and imagery. I chose to appeal to my audience in a different manner with an unusual six boxes index page with each image being a link to one of the six pages. I also created a opening slide to introduce the users to my name LT design and introduce them into the site. After making the site fully functional and visually looking the way I wanted, I have decided to add a flash based animation incorporated in to aspects of the design. This will hopefully work and achieve a all-round techno themed site.

Qwiki

Qwiki- A prototype search engine
Qwiki currently in alpha. Is a site similar to Google search engine but at the same time very different. It could compete with the white rectangular shaped box of Google, and turn the quest to gather information into a full interactive media experience.

Floursih design

Dunnellon Historic Society is one of the website’s I have looked at by Floursih design. a web design and Graphic design company.
The overall site includes strong content relevant to the target audience, but the actual content is silm with potential for more grown.
The overall layout consists of a box type layout. With banners and back shaded content boxes to break up the basic rectangular shape.
The colour scheme used through the website stays the same including basic creams and whites with green and orange tones to break up the
the theme. On the opening slide to the website you are greeted by a visual comic style image that uses bold primary colours whilst being positioned in the top part of the page. Making it the first thing you see when entering the website. The logo and title also stand out but to me I find the attention on the home page almost stolen away from their brand logo by the side bar that has this 3d shadowing,. Having the effect to make it stand out from the page. This side bar stays throughout the website on everypage with the content being a j query photo gallery which is also on every page with the exception of the index page. The visual message is achieved largely by touches such as the white wood-panelled background and the use a of bold colours and a block based structure with simple navigation.