30 Sep

Idea Generation

It’s really odd being given a brief without a subject.

“Anything you want, within reason.” is quite a difficult task. There’s so many options and yet finding one that feels perfect takes time.

I know I wanted to practice my coding skills – HTML, CSS and JavaScript being the top 3 I’m interested in. Structure, styling and functionality are necessities for every front-end developer. I also wanted to combine the things I’ve learnt in other areas: usability, branding, maybe even a little SEO and marketing (why not?).

It’s very rewarding (and self-indulgent) to look back over the last two years and see just how far I’ve progressed. That’s one of the lovely things about this blog too. It’s very helpful to be able to remind myself of some of the tools I have at my disposal. No one has a perfect memory, and looking back at old work shows how I overcame certain issues in the past, saving energy and a lot of time spent on stackoverflow.com.

So after flicking through my old work, I created the following mind map (always a great starting tool) to expand on the following 4 points:

  1. What do I want to make?
  2. What do I want to learn?
  3. What am I interested in?
  4. What skills make me employable?

Initial mind map

I wanted to pick something that would combine an interest with other beneficial elements. There’s no point wasting time repeating old stuff exactly as I’ve done it before when I could be learning something.

Two ideas I pursued:

idea1

 

idea2

After some brief initial research into the two ideas, I decided to select the second for my degree project: an online allotment planner. It has endless possibilities, and hasn’t been perfected in a workable in-browser format yet.

Please follow and like:
18 May

Web Dev: Project Specific Factors

Every project has different obstacles that need to be planned for and considered. When undertaking this website project for a dance school, it was important to be prepared for the complications surrounding using images of children online.

In this case, every parent whose child’s image is to be used in the project will have to sign a consent form. The project is (as of 20/05/2015) not currently online.

I created the branded consent form below based on this one used by Merton Council.

AnitaGunnConsentFormAlso, I made sure that the code was going to be easy to maintain in the future by adding comments. It was important to my client that she would be able to edit timetable dates at regular intervals, so comments to highlight sections, along with instructions on how to use an FTP client were a real benefit to her.

Screen Shot 2015-05-22 at 13.48.38

 

Please follow and like:
23 Mar

Web Dev: Skeleton Boilerplate

I decided to experiment with Skeleton, a responsive CSS boilerplate.

It is extremely simple to use, and comes with a 12-column grid making it a perfect fluid layout template.

Skeleton's 12-column grid layout.

Skeleton’s 12-column grid layout.

I was able to quickly put together a starting layout, based on some sketches I mapped out previously. My initial sketches are below (taking the grid layout into consideration) followed by the initial desktop layout and a mobile version created starting with Skeleton.

layoutSketch

ScreenShotDesktop

ScreenShotMobile

I developed a system of blocks, that include a ‘border’ section of colour, and a white section to hold the text. As you can see, it is an extremely quick way to get together a responsive design. I’m going to work on gathering and creating the content with the client before I progress much more with the coding, but I’m happy that this is going to be a viable tool to build on and develop further.

Please follow and like: