Adobe

A Challenge!

The other day, on Twitter, I set myself the challenge of designing and developing a Tumblr theme in one day:

This meant that I could not work on the theme at any point before or after the allotted time. I had never done anything like this before – I typically like to spend time making sure everything is looking good before I say it’s finished – so I had no idea how good the end product would look.

This process involved me doing three things, which were:

  1. Designing – A digital mock-up. I like to use Adobe Photoshop for this.
  2. Developing – This is the actual building of the theme. I like to use Adobe Dreamweaver.
  3. Testing – Arguably the most important part. This is where I needed to make sure that the theme was working on all browsers, and also that it scaled correctly on smaller devices, such as mobiles and tablets.

As you can see, there was a fair amount to do in order to say that the challenge had been a success, and to say that the end product is finished.

If I was to do this, I wanted to make sure that I did nothing out-of-the-ordinary in order to accomplish the task. So, I woke up at my normal time, and did everything that I would normally do in the morning. So, at about 9Am, I started work.

The first thing, as I have said above, was to mock-up the design. Doing this allows the designed to get an understanding of what he/she will be building when the time comes. Again, as I’ve said, I like to use Adobe Photoshop, so this is what I did.

There were eight things that I would need to design, which were:

  1. The Menu
  2. Text Post
  3. Photo Post
  4. Link Post
  5. Quote Post
  6. Chat Post
  7. Audio Post
  8. and Video Post

As I almost always do, I began with designing the menu. Doing this allows me to get a grasp of the size and dimensions of the rest of the theme, relative to the menu. This would be fixed to one spot, meaning that as the user scrolled, it would be constantly visible and accessible. The design for the menu, and also the area when the Posts will appear can be seen below.

01 Menu

 

As you can see, the menu of the theme is one left, and the area in which the content of the blog will appear is on the right, in a lovely shade of purple, I might add. After this, I needed to design the different Post Types. I’m not going to write about every one, as it is clear what they look like.

Text Post

02 Text Post

Photo Post

03 Photo Post

Link Post

04 Link Post

Quote Post

05 Quote Post

Chat Post

06 Chat Post

Audio Post 

07 Audio Post

Video Post – I pretty much always use Achievement Hunter videos in my mock ups. Both because I’m a huge fan of what they do, and also because it’s nice to have something good to watch when testing.

08 Video Post

 

The designing of the theme took me up to about 1Pm, which for me was great time. I usually take a week or more during this stage. Anyway, the next thing to do was the actual development of the theme. As I’ve mentioned, I like to do this in Adobe Dreamweaver, but really any text editor will work.

I only really came across one issue during this, which was the fixed positioning of the menu. I had never needed to have something that was fixed in one place, but also relative to the rest of the design before, but in the end I worked it out. But, to be honest, I’m not really sure how I worked it out. For this particular area, it’s a case of It works, but I don’t know why. 

The development stage took about three hours. Also here I was testing as I went along, to make sure that everything worked and displayed correctly.

A demo of this theme can be found here. It should be noted that neither the video or the audio are linked to the page, but one can get a sense of what they would do. Also, the link at the bottom of the menu section will bring you back to this blog. This is the only link that takes you anywhere, the rest are just for show.

That’s about it. I managed to designed and develop a desktop theme in one day. I’m currently looking to into putting it up for download, but if I were to do this, I’d want to refine a few things like, for example, the Tag and Clock icons not lining up correctly with the text to the right.

I said I developed a desktop theme because I didn’t have time to make it responsive (meaning that it displays correctly on every screen size), but, this is something I can work on if I were to put it up for download.

Thanks for reading, see you later.

BBC Has Plans to Get Schools Coding

The British Broadcasting Company have plans to get students understanding, reading and writing code in schools. They are doing this because they are worried that the vital skills are no longer being taught in schools in the UK.

This, I feel, is a brilliant move that the BBC are making. I would have loved the opportunity to learn various programming languages at school, rather than doing on my own at home.

We are currently undergoing a project in Sixth Form where we are making a game. Most people are doing theirs for a class within the school. IT and Geography, for example. Because we weren’t taught programming in school, we had to spend the time learing Macromedia Flash 8.

We can all be grateful that the BBC will be getting some decent software in for these schools.  Having to use an outdated software is really not helpful when one is trying to build a modern game. Macromedia? This doesn’t even exist as a company anymore, and we’re still using the software that has no doubt been increased greatly b Adobe. It’s the same for almost all of the software that we have in the school.

A range of tools would be made available to give people “the skills to solve problems, tell stories and build new business in the digital world”, it added. – Rory Cellan-Jones. BBC Technology Correspondent

This project will begin in 2015.