Website Development- step by step PT. 2

After evaluating my progress on the website and doing a small in class survey there where quite a few things I had to do to improve the website. Even though the response I got on the survey was a positive one with people reflecting back on points that I agreed on and was glad they were taking effect. Things like navigation, color scheme and layout got a positive response. I did also get some good constructive feedback with things like lifting the header and removing some of the extra browser fill at the top of the website, adding extra navigation within the portfolio pages (previous, next buttons) and personalizing the website a bit more as it was slightly basic in some aspects.

I agreed with all these points and they are things that I had thought about changing myself. I also mainly wanted to focus on the typography of the site as I thought the ‘web-safe’ font that I was using, Helvetica, was too dull and simple for the website. I needed something to pop out more so I did some research into typefaces on Muse and I discovered that Adobe Typekit is directly accessible through muse giving you more web fonts to choose from, this opened the doors to a lot more variety than just the standard web-safe fonts on muse. Granted I understand that a web-safe font would be the safes bet as the name suggest, meaning that it will be a lot more likely that font will be available to anyone viewing any computer or mobile device. But I certainly needed to improve the typography on the site and the only way around it was to get a more exciting font.

PT Sans narrow and Ropa Sans
PT Sans narrow Bold for heading and Ropa Sans for subheading and body
Maven pro with 3 weights
Maven pro with 3 weights
Screen Shot 2015-05-24 at 23.56.33
Asap 3 weights bold, bold italic and regular
Droid Serif
Droid Serif
Screen Shot 2015-05-21 at 20.39.47
Droid Serif and Asap
Screen Shot 2015-05-21 at 02.30.33
Serif and sans serif combination

After trying out different typefaces I chose to use Asap as it had several weights to choose from. I liked the combination of Asap and Droid Serif for the heading, I think it works well too but gives the website a slightly more academic feel and I am after a fresher look so I decided to just stick to Asap. Another issue with the fonts on Muse is that many of them only have one or two weights only, but with Asap I was able to use a Bold, bold italic, and Regular weights of it. The thick and tall stems on the bold weights make it a good typeface to use for headings. My inspiration for typography was from a website I looked at during the research by designer Adhemas Batista. I wanted a bold sans-serif typeface to pop out and sit on the page with large headers and sub headers helping link the pages together, and balance out the white space on the layout . I think the strengths of this typeface are that they work well as headers specially with a little increment of the tracking makes for a very clean and modern looking font. For the body the regular weight of this font works very well too, its clear and easy to read.

Screen Shot 2015-05-22 at 13.03.03

I had the headers set at 36 pts with a 4 tracking and the sub headers at 17 points with a tracking of 2 using ‘metrics’, while the body was set at 14 pts. These sizes where what I thought worked best after testing the site several times as well as the sizing of the headings were intentionally big to help balance out the white space on the layout. The tracking on the header and sub header made them stand out and look more contemporary as headers.

Screen Shot 2015-05-25 at 00.17.04

I used paragraph styles and character styles to style my typography throughout the website so that the same process can be repeated on each page. I also tidied up the typography on all the pages making sure they where evenly spaced from the header and the work below them as well as I made the column text box 1 column shorted as the body on some of them was a bit heavy.

Screen Shot 2015-05-22 at 13.09.29

Changing the typeface meant I had to make sure I changed it across the website so that it was consistent so I updated the gallery rollover states. I then proceeded with a few other changes, I closed the gap at the top of the layout so there wasn’t too much browser fill and I added some social media icons for LinkedIn, Instagram and one for WordPress which are all live and linked up.

Screen Shot 2015-05-22 at 13.11.01Screen Shot 2015-05-22 at 13.11.13

For the icons themselves I ran out of time so I did not create my own but used some found on Google, I inverted the image so that it was black over white on Photoshop. With more time I would have made my own but I wanted them in there as they were part of my website plan from the beginning to have a social media links. I placed them on the center of the layout out on top of the header on the browser fill, I think this gives the header section a more complete feel as I thought there was something missing. I also removed the home page from the menu by right clicking on it on the plan stage>and selecting ‘exclude from menus’.

Screen Shot 2015-05-22 at 13.13.09

Screen Shot 2015-05-22 at 13.23.55

I did this because I thought it wasn’t necessary and the logo works as a home button anyway. This also helped balance the layout on the header. I also changed the roll over states of the menu bar to be a black horizontal stripes over a white rectangle, this goes with the logo and the color scheme.

Screen Shot 2015-05-22 at 13.14.57On the logo itself I added a drop shadow and bevel to it giving it a 3D effect and it looks like an actual button placed which I think works well with this logo. These effects help it look less static and thus make it more obvious that it’s a click able link. I also made it bigger fitting in on two columns.

Screen Shot 2015-05-22 at 13.16.35
navigation buttons at the bottom of each work page

Navigation wise I added some next and previous buttons to the actual work pages allowing for easier navigation once actually viewing a specific work page without having to scroll back up the page and back into the portfolio gallery. This is something I wanted to do and was also suggested on the survey. The other modifications I have done was to do with the spacing on the pages making sure the work started on with consistent spacing as well as the space on the bottom of the page on between the work and the footer.

Screen Shot 2015-05-22 at 13.28.16Screen Shot 2015-05-22 at 13.28.25Screen Shot 2015-05-22 at 13.31.25

Screen Shot 2015-05-22 at 13.16.35

Thanks to these improvements I think it has lifted the website a lot, it looks a lot better with the typography giving it a modern clean look as well as consistency through out and the layout fixing and tweaks. I achieved all the suggested points mentioned on the survey and improved upon everything that I had myself wanted to change and improve after evaluation.Another thing that was suggested was to categorize my work but I had thought about this since the beginning and I chose not to for the reason that I felt that my body of work wasn’t big enough. Much of my work would overlap a number of categories and I think it would be difficult to decide where to put certain pieces of work.

Through out the entire development I have been constantly testing it using the preview option on Muse and sometimes testing it on browser, but once I completed it I checked it on safari browser and chrome just to double check everything was okay when messing around with the screen dimensions.

Screen Shot 2015-05-22 at 13.41.29
zoomed out on safari
Screen Shot 2015-05-22 at 13.41.40
full screen on firefox
Screen Shot 2015-05-22 at 13.43.24
making the page smaller adjust its self nicely removing the browser fill until fully centered on my page
Screen Shot 2015-05-22 at 13.45.53
Running on safari


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s