Anthony Sutton Digital Sketchbook Module: Professional Practice
Project: Self promo & Website
Blog: http://anthonysutton.blogspot.co.uk/ Pinterest: antsutton93 Twitter: @MrAntSutton Email: Anthony_sutty@hotmail.com
WEBSITE RESEARCH This booklet will contain research I have gathered to inform my ideas for this module. Pages will consist of imagery I find both primary and secondary to create a mood-board of inspiration to help me progress through the design cycle. I have a link to my pinterest board where I have collated my secondary research.
Hochburg.net Hover - Cool hover on this website. When you hover over a project the image inlarges and highlights a bar at the bottom. Layout - 4 column grid for the portfolio. When you click onto the project the portfolio doesnt load another tab, its on the same page. The background is hidden behind a colour. Scoll - when you scroll the header bar follows you down, so you can acces the menu and other options like social media etc.
ronaldvarney.com Layout - Simple, centred, clean looking. Big image across the page. Header - As you scroll the header bar follows you down the page. Would like to try this on my website.
Ufho.com Hover - Image enlarges, Fades to black and shows text Layout - Mixed up grid, that had a cool effective flicks through the work. Header - Fixed header that stays as yo scroll. Footer - Other projects stay at the bottom of the page so you don’t have to go back to select another project.
domjacob.com Layout - Horizontal Layout, All on one page. You don’t get directed to another page waiting for it to load. Very simple, minimal layout. Simple navigation. Header - fixed side header, 3 topics, work, about and contact. Hover - Simple fade and text explaining the project.
justinaguilar.com Layout - I like the idea of the home page being an interactive image of the sections that I cover. For example having an object to represent branding, illustration etc. Header - Simple header, logo in the top left, than navigation in the right corner.
twistedfork.me Scroll - When on a project, the scroll is a nice function with the navigation at the side for each image. Header - Simple header, logo in the top left, than navigation in the right corner.
thebeastisback.com Layout - Really like the simplicity of the website design. Simple header that follows with you down the page. Projects are all on the home page, bespoke to the page. About me - Page is simple with a picture of himself and other things that mean a lot to him. Projects - navigation through the project is nice, with info on the project on the left, options to go to the next project are as arrows or at the footer the projects are listed like the home page.
-This image inspired an idea for my about page. Laying my items out including myself as an interesting way of introducing myself.
studioairport.com - It could be cool to have icons instead of type in the navigation. A bit more interesting and different than other websites I’ve seen.
- Another feature I could include. This would show how many images there are and what image you are on. I do like the simplicity of this website.
stevenbonner.com
- Cool little info button that Expands when clicked on to show the info of the project. - I do like how Stevens website spreads across the whole screen, utilizing the screen space. Arrows to click through to different projects. Very user friendly and easy to navigate.
markstupic.com
- Simple design again but with a few added details. I do like the simple nav bar and the way the projects have been displayed. I think for me a design like this would suit me personally based on my style and my skills in coding.
WEBSITE IDEAS & DEVELOPMENT This section will show my ideas and development of my website. I will be sketching the wireframe design, this will be my skeleton to refer back to as I am coding. I will then present screenshots of my design and how it is being developed. making comments on what I have done along the way.
- Thumbnails of my wireframe design. Keeping it really simple based from my research. - Looking at 3, columns that can expand when I have more projects. - Home, about and blog will feature in the nav along with my logo.
- Footer will include social media icons. - Project page will scroll downwards with a brief description at the top.
- Beginnings of the website I’ve started to code. I have created a navigation bar that features across the top of the page. Also I have included the pages, Work, about and blog. - 3 columns that feature inside a 960px wide width. This keeping it visible when scaled down. - Project page features a large image again the features across the 960pc wide wrapper. The portfolio images will be places in this space. Scrolling down will present the rest of the project work. -As there is a navigation I had to adjust the margin so it would stop below the nav bar rather than going behind it.
- I have began to place in the thumbnail images that will feature on the front page when visiting the site. - I produced I Photoshop file that was the specific size and was at the resolution of 72 dpi. This keeping the file at a low memory resulting in it to load fast. I simply cropped the work down to fit the space I created. I had to consider the right position for each thumbnail as the work is of different sizes. - Hopefully once I have more work the arrangement of thumbnails will fit more bespoke to the screen.
- I have made a few changes to the design. The more noticeable one is the background colour. I decided to darken it as I think it draws the attention to the work more. The white was quite bright and uncomfortable to look at. - I have also brought the pages over from the right to sit next to the logo. This is to minimize the distance to travel to click through the website. I was thinking about usability when making this decision and I thought this works much better.
- Finalising the website now placing all my design work into the allocated space I provided in the CSS code. I created another Photoshop document to place my work in. - I now have the basic structure of my website that I can edit further in the future. I can add more projects and begin to add little features like the social media icons and anything else. - Add a scroll to top button - Add side arrows to switch between projects. - Make a more interesting about page. Maybe an illustration. - Add social media Icons to footer. - Try and make the design more responsive allowing it to fit onto smaller screens. - Buy domain, server, and Transmit.