CV Site- The other pages

I went ahead and continued designing the whole site. I began to get really into making this site because I think it has value outside the course too. I wanted to make this a real portfolio site for after university. So here all the completed pages:

Design Page

This is my Design page. I was very pleased with it when I finished, I wanted to make an infinitely scrolling slideshow of my work. This turned out to be a lot harder to accomplish than I anticipated. This is because I did it in CSS and HTML only, so no jQuery because I still don't know enough about jQuery to incorporate it right now.

I looked at a tutorial for this which was really helpful but I had to change all the keyframes of the animation to make it look infinite and smooth. The images in the tutorial were a different size and they were the same size for each image, unlike my images. It took a long time changing the variables to the exact settings:

Music Page

The next page on my site is the Music page. I embedded a Soundcloud playlist of my music and added a description and some images of me working. In this video you notice a problem emerging regarding the responsiveness of the website. When coding I forgot to add responsiveness to it so the layout doesn't look right in certain screen resolutions. I am using a 1280x1024 resolution right now but when I coded the website I had a 1920x1080 resolution so all the elements of the site don't fit properly on this smaller screen. I have to adjust the zoom and window size of the browser to show you exactly how it should be. I will fix this in my next update.

How it should look:

Contact Page

In my Contact page, I was going for a minimal design so people can focus on messaging me. When I update this, I will have social icons on the left column under the home button. Once again the layout is effected by non-responsive code. I am still considering making this page a bit more interesting to look at.

Conclusion

I really enjoyed setting my very first website up. I have learned so much so quickly and it didn't take long at all to get it working. I opted for using Notepad++ instead of Dreamweaver and this allowed me to learn the code from the ground up without having any complicated GUI spoon feeding me what I should be doing. I plan to add a CV section to the site too and video backgrounds. My main concern right now though is making the site responsive. 

Week 6- Fonts of the Web

In this lesson we were put into groups to research typography based on a given question. My group were given this one: Are Google Fonts Open Source? Does it matter?

So we began looking up Google Fonts and came across a library of free fonts for people to download and use. So I knew that they were open source quite quickly. The real question we began to realise was does it matter? Google is a very big business and has access to so much information. They give a lot of things away for free use but this may seem innocent until everyone becomes dependant on these 'free' things. One day when Google has monopolised all things digital, they may decide to incur costs to these once fee things leaving us with no choice but to pay the costs. A good example of this is how supermarkets are taking over all kinds of markets and shutting down local businesses with their lower costs.

CV Site Improvements

After looking at other people's designs this week, I realised my design was not as well polished as it could be, so I went back to the drawing board and designed a new sitemap:

This new sitemap had a bit more going on; the previous sitemap meant my site came across as a bit too simple and this new one would give my site a bit more depth. I thought my wireframes were still quite solid, I just needed to add more buttons and more colour and elements. I began designing over the other digital design I was making:

I quite liked the backgorund colour and decided to go with a colourful theme for the whole site, using different colours to represent different sections. However, after a while I started to think the colours were too vivid, much like the IDM task. I didn't want to make the same mistake twice, so I chose just a few colours in my next design:

In this one, the sitemap was complete. All links were ready. But I didn't like the colour of the buttons so I went ahead and revised it:

Changing the whole theme to blue really improved it. I decided that each page would have it's own colour theme. In later versions, I would ultimately want the background to be a video of moving lights.

CV Site: Sitemap and Wireframes

After research, I began thinking of what would be the an effective and minimal design. I quickly came up with a sitemap:

I considered that this was a bit of a simple sitemap, but with a good wireframe, I think that is that that was needed. 

Now that I had a sitemap prepared, I began wireframing:

 The top half would be the home page, after clicking 'projects' you would be taken to the lower half of this wireframe, I was thinking it could slide there in a smooth animation.



This is the 'projects' section. Putting your mouse over an image would reveal text as the image dull in colour to see the text properly.
This would continue to scroll indefinitely. I was thinking of having sections but I thought this might be more seamless, less clicking=better, less effort, more minimal.

At the homepage, if you clicked 'contact' you would be taken to the relevant page.

The page would look like this (right) it would look like a book with social network icons as bookmarks and the message form below on the pages. The contact details would be on the left. 

I then went on to a more digital version of the wireframe:

I started adding more detail, the background, social icons, text. It all started coming to life. I was now ready to move on to more finished designs.

Research: CV Website

The task for week 6 was given to us. We are required to design a sort of online portfolio site to promote our work. Step one is to research similar sites to get an idea of how to design it.

Site 1:

I like this site because it is simplistic yet effective. The homepage offers three main links which is all that is needed. The background is animated too which balances the minimal design to make it more lively.

Clicking on the Projects link sends you to a portfolio of work laid out in a tile design. This is a popular design in recent times. Hovering over a piece of works will show more context with an animated text box. This is a very slick and straight to the point site. Not too much is going on either which really adds tot he clarity.

Site 2:

Another minimal design. I love the background on this site. The icons are clear and follows a similar structure to the previous researched site. No background animation on this one but I don't think it is needed. 

When you click on work, the screen slides up and transition into the portfolio section. The tile design is presents here to but it is more subtle. The global website navbar is present and discrete.

Site 3:

The first thing that drew me to this site was the background. The imagery of a website is very important because it usually the first thing people see. The saying a picture says a thousand words is very true in web design. One good image can prove the proficiency of a designer, which is highly important when trying to sell yourself to users. 

Scrolling down will reveal more content and animation. The navbar is reduced to an options menu in the top right. This is another popular design I have seen a lot of. This also suggests the site has a responsive design for other devices too. I really like sites that make good use of the scroll wheel. It means less clicking and allows for more info on a single page. 

Now that I have researched some sites, I feel like I'm ready to have a go at making my CV site. 

Week 5- Feedback & Navigational Structures

Feedback

This week we all showed our finished IDM site mockups. I was optimistic about my design until I got my feedback. The feedback really opened my eyes and I learned that my design was not very good at all. In fact I was told the original IDM site is better which really hit home to me. I noted down all the constructive criticism:

-The icons are too unclear as to what they link to
-The layout is not structured properly
-It is not clear enough
-Too many thick grey borders

Learning about how bad my design was just made me determined to improve. After looking at all the other designs other students made, I could see which way to go in terms of my next site design.

Navigational Structures

After the feedback, we had a look at different types of sitemaps. There are many different styles when it comes to sitemaps because they used in a variety of ways, not just in web design. Here are the main ones you are likely to encounter:

Linear

This one is the most basic of the sitemaps. It allows for only one path to one goal. In web design this means there's only one general direction to take with every link you click further into the site. This linear system is also used for things like looking through photos on your phone for example. 

Out/In

This navigation relies a lot on the main central display. Clicking a link will take you to a different page but in order to get to a new page, you must first go through the central page to get to your destination. An example outside of the web would be a mobile phone operating system because all the apps are located in one central place.

Hierarchy

This is one of the most widely used structures. In order to navigate to different areas, the user must first go to a higher level of the structure which dictates a section of the navigation.

Simultaneous Access

This setup is used all the time in websites. This structure follows similar principles to the hierarchy structure but with one major difference; it allows the user to jump to any part of the site from  any section. This makes navigation more fluid because it requires less clicks to reach the user's destination. A real world example could be driving because you can reach our destination by taking any number of routes.

Web

A web structure is the least organised and has no real structure. You can get to anywhere and there is no obvious flow or main section to the navigation. A photo gallery in a random playlist is a good example.

Mixed

Whilst Simultaneous Access is the most popular layout, nearly every navigational structure is a mixed one.

IDM Photoshop Final Design: Responsive Design

Once I finished the main site, I moved onto designing a mobile version of the site. To create the best design, I did some research on some good responsive websites. I found that they almost always moved the navbar to the side to allow for more important things in the vertical sections. After research this is what I made:

I changed the order of the sections around from the main site. I thought that people using mobile devices would be more interested in learning about the business rather than seeing pretty pictures. So I put the info section first. I kept the colours and basic layout the same to keep it consistent with the main mockup. The only problem with this version is I couldn't think of what to put in the bottom left corner of it. It seems a bit bare.