Helena Masterson

Case Study - Web

This morning we had a session which was a case study delivered by MadeByShape’s Jason and Andy. It was really interesting to see the process from start to end of how they deal with clients. They also gave us some great advice about applying for placements and sending portfolios off to agencies. One thing that has really stuck in my head from today how to present portfolio work. Andy recommended putting the best work at the top and Tash (our tutor) advised not over fill the portfolio with mediocre work. Choose 4 great pieces and use them.

My notes from todays session are below. As I said, there are some great points that Jason and Andy make when interacting with clients, but I think overall communication is the key to getting it right. Keeping the client in the loop I think is essential to producing a site that is as close to what they want as possible and also allows the client to express any changes they would like to make.

CASE STUDY - Web session

• Get to know the client - meet in coffee shop etc. Makes them feel more relaxed.

• Define the brief. Ask the client for references and particular ideas they have. Ask them for three websites that they like and don’t like. If parts of the sites they choose are bad then take those parts out.

• Client site map - get them to draw out a wireframe if they can.

• Research - Bookmarks, Sketchbook, Folders, Magazines, Print, Digital, Emails and Apps. Screenshot inspiration into folders and reference.

• Communication - very important! Keep the client informed on what you are doing. They may think you’re not working if you don’t keep in touch! 

• Wireframe - Work out features with important features first. Think about navigation and usability. Do quick sketches first. Use Mockingbird wireframes.

• Initial design - Know what you’re doing! Don’t give too many options when you send in your initial design (this may confuse things more). Be relevant, don’t insert irrelevant content. Don’t use blank place holders, insert an image (stock etc). Sell your design i.e. nice images etc, even if you don’t have their images, use the best ones you can find for you’re initial design. Give a timeframe. Project management.

• Feedback - If you know what you’re doing, then don’t be worried about initial content. If they ask you to change something it’s not the end of the world! If you don’t agree with an idea from a client, tell them but give them a better alternative.

• Alterations - When project managing, also include in your diary for amendments. If you send a site when finished, send a few days before the deadline to allow for amendments.

• Design sign off - Once a site has been signed off by the client, any changes after this can be charged for as the client has already agreed the final design.

• HTML build - Development phase can now begin. Can show clients a preview as you go along, thats up to you. Just keep them updated!

• Templating - HTML, CSS then Jquery gets added last. Sometimes once done, upload to show client. Don’t add content just yet.

• CMS wrap - Check this server set-up, this shows any restrictions with code before you start. Constantly refer back to the brief to ensure you have all the features. Set-up most important features first. Wrap your Templates/HTML around your CMS code. Gather necessary plug-ins - this speeds up the process. If its a eCommerce job, make sure you keep constantly in touch with the client about payment, shipping options. Doubly check site thoroughly. Deal with developers to develop other areas of the site (e.g. Quick Shop in Sparitual and Event Basket on Legacy Events). Make sure the site is easy for the user to navigate the CMS and update their site. Think about what the client may put in their site.

• Content - Content then can be added. Check all pages link properly. Do you need to transfer info from old site. Contract - a good idea to have a clause that will add 100 pages free but then after that will charge extra.

• De-Bugging - After clients contents in the site, check for bugs. Check payment section works.

• Launching - Never launch a website on a Friday incase there is a bug as you may not be available over the weekend. Keep an eye on the site after launch to see if its still spot on. Can offer a 3 month free bug fix term. 

Case Study - SpaRitual

Try and impress them by showing them nice images and show off a bit on achievements.

Should be minimalistic but busy.

Show interactions to clients by mocking them up so that they understand what the site will do.

Code the site function on iPad and iPhone.

Integrate easily with social media.

Newsletter/mailing list.

Don’t let clients think its up to you to get them hits on their site, you’re the designer - they need to promote themselves.

Automatic Google Sitemap submission.

Completely secure.

Average website now renders at around 0.192 of a second..

Code from today

Below are some screenshots of some of the code we learnt today. The first two shots are examples of mobile ‘Meta Data’. Meta Data is what passes the information to the browser.

The first shot shows the code for having a specific width to a viewpoint (or screen). The second code shows the code that allows the site to change size to fit the viewpoint (screen). 

Adding a mobile css page will allow you to add formatting to the site and would be linked the same way as other css pages. Adding media ‘screen’ and ‘handheld’ to the html will allow the browser to detect which code to use for which device.

The css above shows the width the site will ‘snap’ into the mobile web view when it detects this screen size. The 340px is due to padding and the screen size is 400px. 

Below is how the site looked before the extra code and the next is how it looked at the end.

The second image is more spaced out and clear and the menus are easier to tap. The huge grey block has also been removed allowing more space for content which is important due to the screen size. With the menus, the font is bigger and the links are now set to active instead of hover (as I noted earlier, hover doesn’t work on a mobile). 

We also looked at how to add forms using HTML5 and tried a very basic one for an email address.

We were given names of book titles to read if we wanted to learn about mobile coding in more depth. These books were:

• Responsive Web Design
• Mobile First

I would like to look into this more and will invest on getting the above books. As I am considering this route as a career, these books would definitely be a good idea!

Obtainable Job - post 4

Web Designer

Recently I have really got into web design. I’ve just begun to learn jquery properly and although it’s been a bit tough, I feel I am finally understanding it. I want to learn more about the coding though and have ordered a few books on html5 and javascript/jquery. I really enjoy both sides of web, the design side and the coding side and I feel web design could be a good pathway to go down.

Javascript vs Jquery

I spent today learning more about Javascript and Jquery in a day session ran by Jason Mayo from MadeByShape. I had used a little Jquery in my site for my last project, but I more or less self taught the small amount I used and kind of stumbled through it really. Today was great because I understood some of the things that I hadn’t understood the first time.

Jason explained the difference between Javascript and Jquery in that they both do the same thing only Jquery is shorter code. He then showed us how to set up linking the script to the html (which I had done previously but was good to re-cap!).

He also explained that when using script, the $ was short for ‘select this’ and was a selector. Here are my notes from todays session. They show the areas we covered..

As you can see from the notes, there are some good sites for plug-ins that were recommended to us. Also I found that the part of the session we did with functions was useful, as I didn’t really understand this before. Although I haven’t wrote many notes on this section, it was probably the bit I most needed to learn, so I screen printed alot of the code for these functions instead so I can refer to them when I need to.

I have thought that web design could be an area that I would work in after my degree and todays session has made me think even more so that I would like to study this further. I got my mark back for my website today too and got an A+ so this also boosted my confidence a bit. I am seriously considering this subject as my career path and I am going to look into coding in much more depth to see if I can handle the harder stuff!

Web Design - Synopsis

The brief was to design and code a portfolio website to showcase my work and to increase my online presence.

I began by researching different graphic designers websites that I found on the internet and also looking at websites that showcased web designs. This included sites such as onepagelove.com and cssremix.com. 

Out of all the sites I looked at, I found a few which I liked parts of and took and adapted elements from them in my design. I thought about what menu headings I would need and also looked at some other sites to get inspiration for these. I decided on the headings ABOUT, PORTFOLIO, TESTIMONIALS, SKILLS and BLOG. I also thought about linking my twitter account and decided to do this along with my LinkedIn account and email. This would make it easy for people to contact me and they would be able to see my CV on LinkedIn. I thought it was a good idea to add my blog as it had my work and thought processes on there and it would give anyone viewing it a sense of my personality and ability. These external sites all pop out in there own window so that my site is always accessible without using the browser back buttons. As I wasn’t keen on my logo that I already had, I didn’t add this to my site. The plan is to update my logo and then add it before I put my site live. For now I have used my name which will link to the top of the site as a homepage link.

I chose to do a one page website, as from my research, I found that I liked the idea of scrolling down the page through my information and portfolio. I designed my page in my sketchbook, trying different layouts until I decided on the one I have used. 

I started at the top with a welcome message to the site. This would be my ‘homepage’ area and the bit that would be seen first. Just below, I placed my About section with a brief summary of myself. Continuing down next was my Portfolio, then Testimonials and then Skills and Contacts. I placed them in order of what I felt was the most important at the top, working down to the bottom. I placed the contact information last as they would of hopefully looked at my work by then and want to contact me! I also wanted the header menu to move down with the page when the page scrolled, so I also coded that to move with the scroll so that it was in view and able to be used at any time. The links themselves when clicked, scrolled the website page vertically to that section.

To personalise the site more, I added illustrations that represented myself at the top and bottom of the site. I matched the link rollover colour to match one of the background colours in the image, so that it had continuity and so that it added colour to my page. This colour would also indicate that the text or button was a link. I also made the images for my light boxes change slightly when rolled over to show that they were active. 

To display items such as images and video on my site, I used FancyBox. This was the first time I had used javascript so it was quite a challenge. However, two days later after researching how it worked and using a guide that I had found, I managed to work out how to embed my video from Vimeo and had them working on my site. I was nearly there with the slideshows, but I did need a piece of code which I got from my tutor in order to get the images in the light box to scroll. I also placed play buttons to show which were videos.

I would say I am 90% happy with my final design, only I think I would choose to do multiple pages now as I ‘m not keen on how the portfolio looks in the design. Although I think my site design is user friendly, I think it would have been nice to have a page for my videos and a page for my graphics/web work. I am planning to re-code it this way and re-design those two pages before I put my website live, as well as having a finished logo. I also want to change the tone of my website, as I want it to be a portfolio website that I can show employers, rather than a ‘trying to get freelance work’ website. My plan is to do this before the DNA show as I want my website to be up and running to show my work and so I can add my website to my business card etc

Web Boards

These are my final web design boards that I will hand in on Monday when the brief is due. They explain my research and design. I just need to write up my synopsis and then I’m ready for hand in.

Website complete!

I’ve finally finished coding my website and have found it a big learning curve. I used Javascript for the first time and produced light boxes containing video and images using this. 

I did encounter a few problems though since my last post. One was that I found my absolute and fixed positioning layered incorrectly which meant my absolute objects were going over my fixed objects.

I fixed this by using a ‘z-index’ which positions the layers vertically using px. I put the fixed object at z-index:1000px (it doesn’t have to be that high) to make sure it was definitely the top layer!

I also had a problem with my links. When I clicked a link on the header such as Skills, the page would scroll to that section but the Skills heading was going underneath the fixed header. I had to create some empty divs above the headings that linked to the header link.

Finally I had trouble getting more than one image into my slideshow. My tutor showed me the code for this. I was nearly there only I had to hide the other pictures behind the top one using the div class ‘hidden’

This code was linked to my slideshow javascript

I’m 90% happy with my final design only I think I would of chosen to do multiple pages now as I don’t like how the portfolio looks in the design. I think it would have been nice to have a page for my videos and a page for my graphics/web work. I am planning to recode it this way and re-design those two pages before I put my website live. Also I want to change the tone of my website, as in I want it to be a portfolio website that I can show employers, rather than a ‘trying to get a freelance work’ website. My plan is to do this before the DNA show as I want my website to be up and running for my business card etc

Code screenshots from last post

Here’s a screenshot of how my code looks and also how the lightbox looks when clicked.