TAG: html

Website Design Practice

I decided to spend some time today practicing website design and made some simple HTML/CSS layouts.

For a long time I have felt overwhelmed with the idea of trying to create a website design. It felt like so much had changed, with ‘responsive design’ and having to make layouts work in all kinds of browsers. I didn’t feel confident enough to make a design and was confused on where to start. The thing is, if you don’t try and don’t take the action to try and understand you can’t move forward.

While doing numerous searches on how to convert a website design into a responsive one I found How To Convert a Fixed Width to a Responsive Website by Tim Wright which includes a video on his method. His method includes adding @media screen and (max-width:700px) and setting specific widths for the smaller layouts. Then modifying the style codes, so the layout can look better in smaller devices. Such as making the navigation in block instead of inline and taking away the floats from the content and sidebar.  As well as adding meta name="viewport" content="width=device-width, initial-scale=1.0 in the header, for the viewport on mobile devices. This was so inspiring, because I thought making a responsive design couldn’t be that easy.

Now, I know that trying this method doesn’t make me an expert or that I understand the whole process 100%, but it was enough for me to try and make a few layouts. They are not perfect, but they are a start and it was fun doing something that I have loved so much.   :***:

Lets have a look, shell we?

Stepping back into web design

I haven’t created my own website design for a long time. Part of the problem has been that I have expected myself to create WordPress themes, and to include the post styles, have cool features, be responsive, follow current trends and be as great as themes other people are selling. I realise that if I am going to put that kind of pressure on myself I would probably never create a web design again. So I am going to step back into it gradually, make it fun and try and find that joy in making websites that I used to have.

I decided to make a really basic ‘cute’ design. Just to freshen myself up, become familiar with how I ‘code’ and ‘design’. I wanted to do this without any pressure, so I am just making it to enjoy the process. I want to continue to work on it, and see where it goes.

Screen-Shot-2013-10-05-at-12.18

This is what the design looks like at the moment. It is very basic, and I mainly played around with the css colours and html structure. What I would like to do next time is add more general styles, mix it up with more content and maybe change the small header image. I always enjoy adding textures to different elements but don’t want to over-do it.

There are no more results.