Website Development- step by step

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

The specifications for this document where such.

Screen Shot 2015-05-19 at 22.07.20
new site specifications

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.

Screen Shot 2015-05-21 at 17.33.55

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.

Screen Shot 2015-05-21 at 17.21.55

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.

Screen Shot 2015-05-19 at 22.15.18

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.

Screen Shot 2015-05-19 at 22.21.56
contrast of black browser fill against white page
Screen Shot 2015-05-19 at 22.18.01
pulling down the browser page fill from top and bottom of page

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.

Screen Shot 2015-05-12 at 22.37.14

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.

Screen Shot 2015-05-12 at 22.37.28

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.

Screen Shot 2015-05-12 at 22.37.00

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.

Screen Shot 2015-05-19 at 22.38.44

By clicking and dragging a menu bar like the one below is place-able on the page.
Screen Shot 2015-05-12 at 22.47.31

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.

Screen Shot 2015-05-12 at 22.53.28

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.

slideshow widget
slide show widget selection
Screen Shot 2015-05-19 at 22.56.01
slideshow positioned and resized on home page

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.

Screen Shot 2015-05-19 at 23.51.13

Since I had the basic layout for all of my pages I was able to start designing them. For my about page I had a photo of myself in a circled frame which after some feedback, I decided to change it.Screen Shot 2015-05-20 at 00.05.15

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.

Screen Shot 2015-05-19 at 23.52.46

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.

Screen Shot 2015-05-19 at 23.59.27

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.

Screen Shot 2015-05-19 at 23.56.19Each 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.

Screen Shot 2015-05-15 at 12.33.47

I then placed a jpg copy of my work by using the place button on Photoshop. Screen Shot 2015-05-15 at 12.38.27

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.

Screen Shot 2015-05-15 at 12.38.50
adjusting and resizing image within box frame

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).

black opacity layer over image
black opacity layer over image

Back on Muse I then placed a ‘Photoshop button’ which allowed me to choose the different states using the PSD file’s layers.

Screen Shot 2015-05-20 at 00.22.03

Screen Shot 2015-05-20 at 00.21.41

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.

Screen Shot 2015-05-20 at 23.56.36
plus button to add a ‘child page’
Screen Shot 2015-05-20 at 23.27.19
Individual work pages underneath 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.

Screen Shot 2015-05-20 at 23.26.15

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.

Screen Shot 2015-05-21 at 00.05.45

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.
Screen Shot 2015-05-21 at 00.06.01

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.

Screen Shot 2015-05-21 at 00.31.17

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.

Screen Shot 2015-05-21 at 00.36.55
showing how the work is using the inner 8 columns. Repeated on each work page.
Screen Shot 2015-05-21 at 00.32.13
grey fill around work that proportionally doesn’t size up to the space

Following the same structure on all the work pages.

Screen Shot 2015-05-21 at 01.15.57

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.

Screen Shot 2015-05-21 at 16.38.41
Added recent work section to the home page + More work link on the bottom

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.

Screen Shot 2015-05-21 at 16.53.06
Screen Shot 2015-05-21 at 16.53.43Web design brief folder on desktop with all work going on website
Screen Shot 2015-05-21 at 16.54.00
website development folder within, with all my screenshots

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