OUGD503 - Responsive: Keith Baldock Artist Boards

Here are the boards for Keith Baldock Artist.

OUGD503 - Responsive: Keith Baldock Artist Live Website

After I had coded the website, I then had to host it.

Here is the URL: http://www.brushclub.com/

From start to finish it took 3 days, and now this is my first fully functioning website! I am really happy with the outcome, although there is a couple things I would change as it doesn't look great on a big screen. But since then, I have learnt what to do next time, and the client is happy with it which is the main thing. 

The problems are the home page image is stretched, the text doesn't change size on different screen sizes which can compromise accessibility, and the footer isn't coded to be at the bottom, which can be fixed with padding-bottom. 

Other than that, the site works well, you can contact the artist and all of his images are displayed with no problems and is easy to use.

OUGD503 - Responsive: Uber Crit

This week we had an Uber crit on all the responsive brief's we have done so far.
I created boards for the occasion:

I only included a final image for each project, with a small explanation of the brief and my solution so people got the gist of it. I didn't include any developmental work as I just wanted impact boards, but I could have done better mock ups.

Here is my individual feedback:

Presentation

Strengths

• Works as a set
• Final products are impactful on every page
• Overall consistency and aesthetic style
• Really like how the images and type are balanced on the design boards

Suggestions

• Improve quality of photographs - bacon packaging
• The brief could be placed on boards to add clarity
• Companions - what was brief?
• Shorten the headers
• Make the text on the boards smaller
• Could use some more exciting structures on the boards

Project Management

Strengths

• Well managed with a wide variety of print and web based briefs. Ideas and concepts showcased well on all design boards.
• 'Coming Soon' shows project management and time keeping skills
• Final outcomes visible on your boards. Typeface created for some briefs which shows design skill and development

Suggestions

• More than one board for each brief showing products, range and distribution, as well as giving more in depth and information on each briefs board
• Unable to see progression on blog

Has Brief Been Answered?

Strengths

• All briefs feature a different concept, resolution and design styles
• What and Why have been answered continuously
• Companion - simple iconic symbols/images which represent animals
• You've answered your briefs constructively, effectively and professionally
• Danepak - very professional, I would purchase. Colours remind me of bacon. The pigs make a nice touch too

Suggestions

• Companions - show how the logo will look on the shops along with branded merch

Additional Comments

• Good variety of final outcomes, print, digital, web - shows strong and varied skill set
• Really love the concept for the Dialogue brief
• Crafting of packaging is well finished
• Digital execution is really good
• Mock up of pet shop logo could be added for further depth 

Feedback

I was really happy with the feedback - all the suggestions made were valid, and after looking at other peoples boards along with feedback I know I definitely need to start making mock ups when I produce designs. It looks more professional, and gives people context. I think it would be better to show product, range and distribution too. I think this session was really constructive for my individual feedback, and I know what to improve next time. But I also appreciated the positive feedback on consistency of boards, variety of briefs and my concept for Dialogue.

When I was making the boards for this session, the one I didn't change was Companions - this was an existing one that I gave to the client, and this is the only board which people have mentioned doesn't mention the brief. I'm happy that they picked this up, and it is the only one they felt didn't explain everything.

Collaborative Feedback

I was a bit apprehensive about this, because we only had one board, and hadn't included all the design, and the mock ups we had were of poor quality. I didn't really think to go further with these beforehand - and the next day they were all completely finished so would have been nice to get feedback on all of them. 

Anyway, this was the feedback we got which was all positive:

• Illustrations are really appropriate and well executed
• Illustrations are strong
• Concept is great - really interactive for kids + informative too
• A few print issues are clear
• The illustrations are fantastic!
• Really aesthetically appropriate and well executed
• I really like the Treetops Box, very warm, strong colours
• Illustrations suit target audience
• Seems that you've got all the elements you need to cut out
• Very thoughtout
• Lots of facts for children
• Incredibly child appropriate, I hope this goes down a storm with you
• Interactive and wonderfully engaging
• Gimme
• Check typesetting
• The illustrations are fantastic!
• Really strong powerful images, very fun, very playful

The only suggestions made we already realised before the crit - about type.
So overall we were obviously very happy about the feedback - I am just kicking myself in the teeth for not having more physical things to show really. I'm really glad people think it is appropriate for the brief, and we have worked very hard to make sure it answers the brief as much as we can, so it has paid off to get this feedback. 

OUGD503 - Responsive: Keith Baldock Artist Coding

I started to code the website now I had designed it digitally and knew what I wanted to do. 

I started in CSS writing the basic styles that I knew such as the fonts and body. 

I then started coding the navigation bar at the top, and to do this I created a container called #top which will hold a container for the logo and navigation in, as well as add the background colour.

I added margin-top: 0px and top: 0 because then it would reach the top of the page without leaving a gap. I also added width: 100% as a percentage because then no matter what screen resolution the user is on it will always reach the end of the page.

I then added the id 'nav-box'  which will contain the logo and navigation links. I made the width 600px, and to make it central made the margin-left and margin-right auto. This means when I insert the logo and navigation within it, it will set within this box. 

The only margins I had to add for the logo was margin-top so it wasn't right at the top of the container, and margin-left. I also made it float: left so that the navigation links would sit next to it when I added them.

Here is the HTML when for the whole top container, including navigation and logo.

This is how it looks in the browser:

I then started adding the picture for the home page, and I created this in Photoshop. This was so simple to add, because I had done it at the right size, I just inserted the image into the HTML and the correct size inputted, then just added two styles.

I made the width: 100& so that it would always cover the sides of the page and made the position: relative. It fitted in after the top container fine, and now I can work on the content.

To add the content was really easy, I just created a container which was has a 800px width, then made it central by adding margin-left and margin-right: auto. 

I then added the text box with a width of 400px, and the box for the products with a width of 300px. By adding the padding and margins, this totalled up to 800px, the width of the container so it all fitted perfectly. To make the products box sit next to the text box, I just added float: left to them both. I also added a class for the picture of the artist, as I wanted to insert this so the user knows who will be doing the paintings. To make the image central, I again added margin-left and margin-right: auto.

This is what the HTML looks like. To add the lines between the products I just added a line break <hr /> to  make things easier.

This is what it looks like in the browser:

This is a close up of the Products list:

I also tried it without the lines to see if this would look better, but I don't think it does. I think this looks too misplaced.

I then started to add the footer.

I added a class for the contact-details so that they would fit within the footer.

This is what it looked like in the browser, so I needed to change the colour of the hyperlink.

I then added the copyright part and the fact I designed it with a link to my Behance.

This is what it looked like in the browser when I finished the adjustments to the footer:

I then started to work on the portfolio pages. For this I had looked at lots of different tutorials, and thought about doing the Photoshop web gallery tool again, but they either didn't cater for large amounts of images, and wasn't easy to update. So, I decided to use Lightbox. It allows you to add thumbnails of an image, and then click on them which enlarges them for you to view. You can also create a 'set' of images so that you can click next and the next image will enlarge. This seemed my best option, and the great thing is that I can update it very easily when needed.

I downloaded it and added the files but it wasn't working at first and I wasn't sure why. It was just added a hyperlink of the painting title and opening a blank square.

I soon realised I hadn't linked up the files correctly, and once I did that it started working. I made sure the container fit four of the images across, making the width 900px. 

I added a container so that the pictures would sit inside of it.

When you clicked on the images, they worked when enlarged. As I was doing them as a set, it comes up with 'Image x out of x' because I stated in the HTML that each image was part of the 'seascapes' set.

I started adding more photos by following the instructions from the website and changing them to fit my own. It was actually really easy when I got into it, just adding the pictures twice, and specifying the width of the thumbnail. I had all the picture files watermarked and in the right size already because the client had them all from when the previous website was coded, which made my life a lot easier.

I was really looking forward to how it was coming along.

I just kept adding more pictures, which although easy, was very time-consuming because there are so many and I double checked them all.

This is what the code was starting to look like. At least if I wanted to add another picture, it would only be one more line of code.

This is what it looked like when I finished adding all of the images:

I then did the same for the other pages, adding a container to each one with the correct height so that the footer sat underneath it well.

And adding all the picture files in. The current website has a section called 'Miscellaneous', and I changed this to Lincolnshire Scenes, and took the nude and floral pictures from this folder and put it into the Animals section, which I have renamed Nature. I think this works better because people know have a better idea of what each page contains.

The Lincolnshire Scenes page was one of most comprehensive because there are so many images, and this took a while to add.

I then started to think about the icons such as the previous and next button, as well as the loading gif. I created my own close, previous and next buttons. I decided to keep the previous and next button and the close button white, but I wanted the loading gif to be navy. To do this I opened the image on Photoshop, and added A Duotone colour in the navy I have been using.

I made sure I saved it as a GIF for web.

I changed the url for my new images so that they would appear.

I also had to change the width of the buttons because the next button wasn't showing parallel to the prev button due to the width being too much and pushing it underneath.

I changed the margins on the text so that it wasn't too close to the image.

Now when you hover on the left side of the image the prev button appears, and when you hover over the right hand side, the next button appears.

I added margins to the close button so that it wasn't right next to the image and looked a lot better.

I also got rid of the border around the image, because as they are all different sizes, it didn't fit around them all. 

I also asked the client for a sentence or two for each of the portfolio pages as a little introduction, so I added these.

The website is now fully coded!