I decided I would be using an Adobe program called Muse which I haven’t used before to create my website. This is a program tailored for people who want to focus on the web design side of making a website and not so much the web development (coding, css, etc.) as to what Dreamweaver would be used for.
I wanted to try out a different one of my ideas/sketches (website 4) for a website this time focusing on a minimalistic design with pages and not a just single page scroll down like my previous design. I began by looking into grids that are appropriate for web design and how they can be used to design a website that maintains its proportion when being viewed on different sized screens. That’s how I ran into to a grid layout called 960 grid from museresources.com.
The specifications for this document where such.
Muse is very similar to Indesign in terms of usability and ease of use once you know what you are doing. You have three design stages which you can jump to and from at any stage of the development. On the ‘Plan’ page you have the master pages which control things on all pages which that master is set to simply by clicking and dragging the master onto the page. You want to modify things such as the header, footer and page layouts on the master so that all pages are the same.
The second one is the ‘Design’ stage, on this you can work on individual pages and as the name describes, design them. The third is the ‘Preview’ stage, you can use this at any stage of design as Muse has an inbuilt browser. This is a great feature as it allows you to view you active state of the website as you are building it. The fourth stage is the ‘Publish’ button only used when the design is done and you want to upload you site. You can also view test the website by going to File> Preview page on browser or site.
After opening the document this is what the grid layout looked like on my master page but I wanted to have margins on the top and bottom of the page.
By dragging the browser fill guide line by clicking and dragging the blue cross like icon on the left hand side ruler (the bottom one) you are able to drag down the browser fill allowing for some extra space below the page, you can do the same at the top of the page by dragging up the by the same icon above the header guideline.
I wanted to have my website to be minimalistic and have a black and white colour scheme with my work being the only colour on the page so I decided to have the browser fill white as well as the page.
I wanted to have the page to have a frame hence why I kept the large margins but I didn’t want to have a stroke around the page and I wanted to keep it white so I added a drop shadow to the page with zero distance and some blur. I think this effect works very nicely looks clean and helps the page pop out in a discreet way.
After designing the layout of the page on my ‘A-Master’ I created four pages which would be the pages found on the navigation bar.
Back on the master page I was now able to select a menu bar from the widget menu. By selecting a horizontal menu, clicking and dragging it on to the header area of my page. By placing it on the header section this allows for it to show up on every page and stay within the header of the document.
I then added a logo I designed recently for the purpose of adding onto a portfolio website, the black and white colour scheme of my logo was the inspiration to colour scheme of the website.
I placed it on the top left with in the header and then later moved it inwards one column . I then decided to remove the fill in the menu boxes and make the text white. On the home page I added a tag line, and then a basic slide show from the slide show widgets menu and added some images. I made the slide show box rectangular imitating a banner (as seen on many website portfolios) to be going across most of the page and I fit my work to fill the space intentionally focusing and magnifying details of the work instead of showing the full piece proportionally. Having this banner/slide show that automatically transitions to the next image gives and active and modern approach to my website.
Back on the master page I added a copy right and mobile number to the footer of the page. Little touches like this makes the website look and feel more complete.
Here I rearranged the type to fit better within the grid and at a better line length giving the layout a more balanced feel. I am using an illustration of myself as Collin gave me the idea to include an illustration of myself in the same style as the illustrations seen on by work gallery. This would add personality and help connect the pages. At this moment I only have this illustration of my self which I don’t really like and is too serious for an ‘about me’ page in my opinion but it’s something I can change in a future time.
On the contact page I was able to add a ‘simple contact’ form from the ‘Forms’ menu on the widgets library, this is something I wanted to include in my design because it gives the user/target audience the accessibility to contact me in that way without out having to use external methods or even opening their own email service if they so chose. This followed the same layout as the about me page by placing the content two columns inwards.
For the portfolio page I wanted to use a grid style structure to display my work this is something quite common for graphic design portfolios but I do like how the work looks displayed like that. I did find that websites with more than 4 thumbnails per row started to look cluttered or the thumbnails a bit too small. I added a drop shadow to each of the thumbnails to help them pop out, and it goes with the page design.
Each of the thumbnails were placed as a ‘Photoshop button’ (I’ll get to later) allowing me to have different states when interacting with them. By adding a rollover state there can be an effect when hovering over the thumbnail. To make these buttons I first created some squares on the portfolio page to get a size proportions how I wanted them. Using those dimensions of 180 x 180 pixels for the squares I opened a new document on Photoshop.
Having placed the image I was able to resize and arrange the image within the rectangle to show what I wanted. I intentionally wanted my thumbnails to be a just a snap shot of part of my work instead of displaying the full image in such a small thumbnail. The reason for this is that having the full image in a small area would be too small, and the abstract detail of each work piece makes the thumbnails look more interesting and encourage people to click on them to view the full image.
I then added a black rectangle on a new layer and changed the opacity to 50 percent, I also added short text descriptions for each of them. I merged those two layers afterwards leaving me with one opacity layer with text and a layer of the work piece comes in to play when placing a button state on muse. repeated this process for all of the thumbnails and home page (added later).
Back on Muse I then placed a ‘Photoshop button’ which allowed me to choose the different states using the PSD file’s layers.
After creating my four main pages that are linked to the menu bar, I was now able to create the individual work pages linking back to the portfolio page. I wanted to display my work in a simple yet effective manner. I thought of having a pop up slideshow appear when clicking on a thumbnail on the portfolio page but I think this is not always the most effective way to display the work because it gives you limited space for a description of each piece and to have several images of each project would get confusing if you suddenly change to a project that has fewer images. By having individual pages this allows for more in-depth and descriptive displays of each of the projects In my opinion.
I added the pages on the website ‘plan’ interface by adding child pages below the ‘Portfolio’ page.
By clicking on the plus button below the portfolio page on the ‘plan’ site navigation on Muse I was able to add ‘child pages’. I could have added the pages horizontally but I wanted them to sit below the portfolio page to keep them better organized on the site plan. I now had to remove these pages from showing up on the menu navigation bar.
After this was done I needed to make sure each individual page was linked to the thumbnails on the corresponding thumbnails on the portfolio page.
To do this, on the portfolio page I first selected a thumbnail and on the menus on Muse there is a ‘hyperlinks:’ option by clicking on that a drop down of all my pages appears. Using this I can select the correct page to link to so that when someone clicks on the thumbnail it will open up the corresponding work page.
I wanted the work on these pages to follow the grid layout in all the pages so that there is more correlation with the different pages. So I used the inner 8 columns to display the work and have the work occupying the same area on every page. Keeping the work on the center of the page and resizing my work to fit within this area a big as possible. Keeping my descriptions with in those same 8 columns.
If there was any work that the proportions didn’t quite fit in with that space I added a grey fill to keep the same spacing with all my work. This helped keep things looking more organized and flow together rather than floating around the page.
Following the same structure on all the work pages.
I thought the home page was too plain and could do with some content, so I added a ‘recent work’ section below the banner/slideshow inspired by some of the websites I’ve looked at like the Design Gruppe Koop . I think this has a good effect to the website as it looks like its kept up to date and not obsolete. I did this by adding three thumbnails slightly bigger than the ones on my portfolio page and a summarized description just below each one of them. I placed them as Photoshop buttons just like the ones on the portfolio page so that they could have active states when hovering and clicking on them. Just below that I added a ‘more work’ link allowing for direct access to the portfolio page without having to scroll back up the page, as well as having the thumbnails linked to each corresponding page. I think this gave a much more complete look to the home page.
Keeping files organized
In order to facilitate the process of building a website and having all my work organized in a location where its easy to find and update if needed I created some folders.