Week 10- Making Something Cool

This week we were put into groups and showed our work on the brief so far to each other. My group really liked my Photoshop mockups. They liked all of the backgrounds I used and how it was laid out. Then the tutor came over to look at our work and told me he liked what I had done but there were a few problems with it:

-The backgrounds I used were not created by me, they were free wallpapers downloads and I edited
them to fit the design specified. The tutor suggested I should make my own backgrounds as it would look more professional.

-A good place to start for images is the assets that were give to us with the brief. I really should be using those images now.

-The homepage had some cool imagery but it didn't display the actual products. This is something I will need to implement.

- I need to do a lot more research too. This will give me a better idea of exactly what to have in my design. I will also know what images to make myself.

We then had a look at some well designed clothing websites in groups. We were recommended a website called thefwa.com which is a real authority figure in web design.

Major Brief: Reseach

Before making the website, I need to do a lot of research to know enough context and styles. I came
across a timeline of Levis clothing, I took down important times in their career here:

"1853:
LEVI STRAUSS & CO. FOUNDED
Bavarian-born Levi Strauss moves to Gold Rush era San Francisco to open a dry goods business. He sold clothes, boots and other goods to the small retail stores of the American West."

"1873:

THE BLUE JEAN IS BORN
Jacob Davis, a tailor from Reno, Nevada, teams with Levi Strauss to create riveted-for-strength workwear made of true blue denim. On May 20, 1873 the U.S. Patent and Trademark Office grants patent #139,121 to Levi Strauss & Co. and Jacob Davis for their invention. This is how the blue jean, originally called "XX," was born."

"1902:
A PHILANTHROPIC SPIRIT
When Levi Strauss passes away in September, his four nephews take over the business and carry out his numerous bequests to Bay Area charities serving children and the poor."

"1908:
THE HORSES GO GLOBAL
The Two Horse trademark is registered in Japan and Levi's® global reach begins in earnest with markets like Australia and South Africa soon to follow."

"1912:
CHILD'S PLAY
LS&CO. introduces Koveralls for children, a one-piece denim playsuit. This year also sees the introduction of fine khaki pants and coats to the company's line of clothing."

"1918:
FOR THE LADIES
Freedom-Alls make their appearance. This tunic/trouser outfit was designed to give women freedom of movement and release them from the restrictive clothing of the era."

"1950s:
BANNED
The 1950s saw denim banned in some schools, especially in the East, for being a bad influence. The portrayal of denim-clad "juvenile delinquents" in movies and on tv led many school administrators to prohibit denim in the classroom, fearing that wearing the rebel uniform would lead students push against authority in all of its forms."

"1961:
KIDS THESE DAYS
The new, slimmer silhouettes of the 1960s inspire Slim Fits, a 5-pocket twill trouser for young men. Teenagers call them White Levi's® because no one knows what to call blue jeans that aren’t blue."

"1973:
THE ART OF DENIM
The company announces the Levi's® Denim Art Contest, and invites consumers to submit photos of their decorated jeans and jackets for a special judging. The winners tour American folk art museums during 1975."

"1996:
RETRO CHIC
The history of Levi’s® is kept alive through the launch of Levi's®Vintage Clothing, a line that faithfully reproduces the fits, fabrics and characteristics of historic Levi's® garments."

Week 9- More about the brief & Class CV site

We dived into the brief a lot more today. I learned that research is a very important part in order to get the finished product right. I have to take into account the target audience, what is considered 'cool', Pop Art from the past and present and more.

We also continued the CV site as a class. We went into more detail in the coding section and I learned some good techniques when styling the site and organisation with the folders. I also learned some nice keyboard short cuts.

Week 8- Brief Recap & Co-op Web Design

This week we went into a bit more detail about the brief. We also started building a CV site as a whole class. The tutor went through the process with us step by step. It was a fun and interactive task to make the site as a group. Having the process broken down in a step by step manner was useful too and I really began to understand how to code and how to go about designing the site in Photoshop.

Research: The History of Pop Art

Pop Art started to become a movement around the mid 1950s in Britain and later spread to the United States. The movement was quite challenging to more traditional forms like Fine Art; a lot of the Pop Art work involve Pop Culture in some way. For example, using visuals from the news or adverts and then taking them out of context and combining unrelated materials to them. Because artists in the movement would take such items and use them in their work, Pop Art was often labelled as similar to Dada.

Reseach: Pop Art Web Design

After going through the history of Pop Art, I feel ready to consider how my site will look, so I have been looking for website using Pop Art styles in their design:

Week 7- The Major Brief (after Worcester week)

This week we were given the details to our major briefing. We have been tasked to create a website portraying what a pop-artist would be making today. The website has to be 'cool' and must show off Levis vintage products. This will require a lot of research and design sketches to get it right.

We also continued with our CV websites and I feel like I am making good progress with it. I was struggling with trying to get it to be more responsive to different screen resolutions. I was then taught that putting the whole thing in a container and using percentages made things a lot neater in smaller screens.

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. 

IDM Photoshop Final Design

After sleeping on it, I took into account all the flaws from the previous mockup and improved on everything. The first thing I did was research some well designed corporate sites to give me a better idea of what to do.

This site made me realise that minimal design is a good idea. However, the main thing I took learned form this site though is icons could be a good idea for the IDM site. The more text used, the more things users have to read, and no one likes too much text. 

I then had a look at site that use more colour because I wanted to see how to use colour more effectively. This site showed me that colours can be used if they aren't too vivid.

I started to rethink the colour palette so had a look around for a more subtle set of colours and found a more suited one.

Designing the navbar:

After research, I opted for icons rather than text with too many effects. I had a bit of trouble choosing whether to have black or white icons and in the end went with white because it stands out more. I kept all the rulers from my first mockup because they were well placed. 

Finished homepage + other page:

This time, I stripped the old design of all it's effects and started again. After filling in all the sections, I began to think of how the background and section borders should be coloured. I tried several colours but in the end went with different shades of grey because other colours detracted from the focus of the page. It ended up looking almost like a newspaper style. Although it looks a bit more plain now, at least it is more serious and clear. I also redid the logo with better colours, and consequently the navbar icons changed too. The effects added on the the site are more refined too; the navbar icons have a dropshadow but they are flat which is all that's needed to enhance then and make them 'pop' (whatever that means). 

I changed also changed the slideshow to a more developed one, the images can be bigger now but the core function still works. In the info section I changed the type and removed the effects because more is less for more important sections of a site. The job search sections didn't really change too much. The layout is pretty much the same but once again the effects have been removed/altered. The chosen job is highlighted blue and the description box has no inner shadow now. Each job description had images of the job environment to give more context. I got rid of the site footer completely because everything on there before was unnecessary. 

When a link on the navbar is clicked, the clicked icon is highlighted so users know where they are. In the original IDM contact page, it was a bit small and all over the place and the message box was too small. So I made better use of the room. Original contact page:

To conclude, I much prefer this mockup from my previous one. However, trying to find the balance of colour proved quite difficult for me. I am still unsure whether I should have added colour to the background and borders. 

IDM Photoshop Designs: First Design

After the initial wireframes and sitemaps, we were asked to make Photoshop mockups. I started with making a grid with the rulers and the began adding different sections to place aspects of the site in. Once I had the basic layout sorted, I then started to add images and text.

When I looke dat the original IDM site, one of the main flaws I found was it lacked colour and seemed boring, so I looked at the rubik cube-like design they used in the logo and developed that idea further. Each link on the navbar represents a part of the cube. In the final working site I wanted the logos to slide out of the logo. This idea is quite advanced for me and I don't know how I would make it happen, but I think the idea is solid at least.

In the original IDM site, the main picure looked a bit out of place; having a picture of New York was a bit inaccurate, so  I evolved it into a slideshow of more realistic pictures and it could show testimonials and news about the site/business.

In the middle of the homepage, I added introductory text to give the site some context.

This is the finished initial Photoshop mockup:

I took my theory of using more colour to make it more visually appealing and applied it to the whole site. The problem with that idea is that it detracted from the seriousness of the business. The colour palette used in this makes it look too unprofessional. I didn't keep the colour consistent and the sometimes clash with each other.

The next issue with his is how I overused effects. Drop shadows, glows and and other effects used do not really improve the look and consequently make it look less professional. It is too busy, as is the background. The footer has unnecessary things in it; the 'to the top' button and social links and search are not really needed.

In conclusion, the actual layout of this mockup isn't too bad, everything is in place well and uses different grids. I just need to use less colour and use the idea of colour in a more subtle way so it doesn't over power the whole site. 

Week 4- Photoshop Mockups

In this week's lesson, we started looking at the basics of Photoshop and how to mockup a wireframe of a website to bring it closer to the finished results. In this case, the site I have to re-design is the IDM site. Before going through with designing the IDM site, we made a simple site first called 'Pie Shack'

In this lesson, I learned quite a few things about Photoshop, like different shortcuts and other useful tools such as layer masks. For web design, the 'crisp' setting was the best when editing text because it makes the text clearer on all kinds of screen sizes. When deciding the size of the whole page, the width has to take the scroll bar into consideration and the height has to take the browser's URL bar into account too.

The next thing I learned was organisation is very important to keep the workflow more streamlined. Folders are useful when it comes to keeping things neat. I have never used folders really in the past but after this I understood their importance. Another thing to consider when it comes to organisation is layer comps. It allows for different instances of a Photoshop document. One click can alter a document drastically to express a different scenario of the project. 

Website Research

(Annotations are in red)

shinydemos.com

I like this site because of how simplistic, yet original it is. It uses various coloured squares as the links to different area of the site. Clicking on a square will take you to a more conventional layout. The simplistic style means that it looks very polished and looks like an app menu on your phone, or a video game menu. It makes for quick browsing. The slanted style is unusual too and seems to break away from the grid based designs of too many other sites. 

brandongenerator.com

This next site was really good. IT was a webcomic and it really demonstrated the power of HTML5. It was heavily animated which unfortunately led to a long initial loading screen. However, after getting past that you were treated to an animated webcomic. This makes me excited of where web design is going.

http://www.loisjeans.com/web2013/en

I then came across this site and was greeted by funky music clearly ripping off a Calvin Harris song, colours, animation and a video in the background. This site is just bursting with life. It was refreshing to have such an array of movement on a site. We are moving away from static sites and entering a more interactive era. 

IDM Mobile Wireframe

We were asked to make a mobile version of the site we were redesigning in week 3. Here is what I come up with:

If I were to redo this, I think I'd make the page longer to allow for more context and lessen the pages needed. I was trying to go for a compact design but because of that less content was displayed.

IDM Site Design- Self Reflection

In yesterdays lesson, we had to redesign a site and make it more professional. We were given a live brief and a set time to accomplish such a task in. This put pressure on completing it on time, but that is more realistic and will make me more efficient in the long run.
I started on the sitemap and I seem to struggle with this part of the design process because I never know how in depth it is supposed to be, some websites have huge sitemaps and it feels daunting. Next was the wireframing. I immediately had an idea in my head. The logo for this IDM site was a cube design and I had the idea of having the cube fold out revealing a menu for the site.
When we had finished we were asked to show what we had done to the group. The main concern with my designs was that they were done on lined A4 paper. Layout paper is something I have to remember to bring next time. We were asked to sleep on it and the next day reflect on what we did. So here is my reflection:

I will start with the sitemaps, as I said before I am still trying to get my head around them. I understand the theory but putting it into practice was more difficult. I am trying to decide which way to portray the sitemaps because there are many different ways to do it. This is why I made a few different map:

This is my first attempt at the sitemap, I was thinking of the best way to organise the pages, trying to find some logical pattern. But I didn't like how it looked so I went on to r-design it:

The idea behind this sitemap was to put every link on the main page to minimise the amount of clicking needed to reach the page people want. This sitemap fed into my thoughts on the wireframe. Next time I make a sitemap I will probably use the Balsamiq software to create a neater design. I think it will allow me to understand them a bit better. Next I had a look at the wireframes I had done:

I will review it from top to bottom. I wanted the logo to fold out into links as I've said before, I found it a bit challenging to express my thought into this wireframe and it ended up looking a bit messy. I still think the concept would work very well and I can understand this wireframe but the idea is that others can understand it so I can articulate what they want in the site. Yet again, I think I would use this as a draft for myself and then do the polished wireframe in software like Balsamiq. 

After the wireframe, I went on to a more realised version with colour:

Whilst making this, I tried to stick to the column concept, however I didn't follow the usual 3 column structure too closely just to mix it up a bit and make it fresh. I distributed the sections and adopted the tile design, I imagine to make the most out of each page and minimise loading between links. Therefore I kept the job search in the main page as well as the info of the site and social link etc.

The big problem with these designs is using lined paper and A4 instead of A3. Next time I won't used lined paper.