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?
Cold Winter
This was the first design that I experimented with. I always loved using border-radius and so I used it in the navigation and sidebar. It’s just a very basic two column design with a bit of blue colours mixed in. There could be improvements in how it looks on the tablet design and I may make some modifications later, so that it looks more like the mobile one (especially the navigation).
Live Preview: http://kyaowl.github.io/coldwinter/
Code: https://github.com/kyaowl/coldwinter
Red Line
In the second design I wanted to make one that had a navigation that stretched right across the full width of the browser/device. In the desktop preview, the menu has gone a little bit wonky. ;P This is another basic two column with red a main colour.
Live Preview: http://kyaowl.github.io/redline/
Code: https://github.com/kyaowl/redline
Rounded
In this design I started to have a bit more fun. I used a rounded frame on the desktop and also added a texture to the background elements. You can’t see from the preview image but I also added a fun little section as a comment mockup. I found comfort in the colour blue again. 😊
Live Preview: http://kyaowl.github.io/rounded/
Code: https://github.com/kyaowl/rounded
Basic Basic
This design is the simplest, but is probably my favourite. I used two tones, black and white on a two column layout and added some Google Fonts to make it more interesting. The title is also blocked in, which I thought added a nice bit of contrast. I was using my iMac on the design which has a large screen and can see from the preview on the desktop, that the sidebar should probably have a smaller title size.
Live Preview: http://kyaowl.github.io/basicbasic/
Code: https://github.com/kyaowl/basicbasic
I think it’s important to note that I do have a basic understanding of HTML/CSS, and it’s mainly some of the newer elements like @media and things like sass that I am not used too and made me feel hesitant to experiment. I wanted to try and make something from scratch without using a framework. Because I am weird. 😋 Now, maybe next time I can work on taking things a bit further and see where it leads. 💖
Credit:
- HTML/CSS was hand coded in Expresso
- Designs hosted on Github / Kyaowl
- Validated with W3C Markup Validator and W3C CSS Validator
- Checked responsive design with Responsinator
- Layout mockup images from Multi Device Website Mockup Generator
- When was the last time you created a website design?
- What do you use to code your designs?
- Do you like to use a framework (such as Bootstrap, Foundation, etc)?
- How many columns do you do? (1, 2, 3, 1000 😂)
25 Responses
Great work! I can definitely relate to feeling like too much has changed and it’s hard to jump back in. I think you did an awesome job with these. My favourites are Basic Basic and Rounded. I also like what you did with border-radius for Cold Winter, that could probably work as a fun way to use quotes on a layout.
I haven’t created a layout from scratch in years. I did a fair amount of tweaking in my current one but I would never have been able to make it from nothing (well I probably could have, I just wouldn’t have). I have been trying to do a refresher on html/css through codeschool.com which has been going ok.
I’ve never worked (on a design level) with a framework before so I wouldn’t know which is my favourite.
And, I usually go for 2 columns 😀 I also like minimal one column designs too depending on what the website is for.
That is awesome! About a year ago, I was the exact same way. I got into coding when I was really young and I taught myself everything but when I was in college, code wasn’t my focus so I fell behind. I was so intimidated but I eventually started learning all this new and cool stuff.
You’re doing such a great job with it! The black and white one is my fave too!
I’m like Joy that I learned how to code when I was younger but then I fell behind and now I just can’t be arsed to learn it all because it’s so overwhelming X_X; But kudos to you for learning and coding! They all look great 😀 I love having a sidebar, so I’m more partial to a two-column layout, but I think I’m growing fond of one-column layouts, too ^^
Well done with your designs!! Responsive design really isn’t that difficult really, just do the media queries and put the widths in percent and not in pixels. What I have problems with is the menu, my husband has helped me make one with some javascript, but it still is a little bit dysfunctional and needs to be fixed.
I did my designs some month ago but I do small modifications all the time.
I never use frameworks because they are all so confusing and I end up not understanding anything of where to find the code for the different parts, they always make the code so disorganised. I’ve learned how to modify designs based in bootstrap but it really sucks since there is always that min.css file that gives me headaches. I’d prefer do it all on my own because then I’d know the code from inside out and how to find if I was competent with javascript and jquery I would definitely do everything from scratch. Now I’ve bought some layouts and modified them to my liking. I only use HTML and CSS (or basic PHP if it’s for a PHP application), and since I now blog with Ghost I paste in the handlebars tags if I need to change where to have the different elements.
I found a brilliant code editor called Coda 2, for Mac. It allows you to connect to the ftp and edit files right there, instead of having to upload new versions all the time. It’s perfect if it’s just small modifications. If I design for WordPress I do it locally with MAMP (most of the time but I’ve had some problems with it). I installed Node and Ghost locally too but haven’t used it much.
There is so much about this post that makes me happy! :love:
I feel like I should try actually doing more actual web design stuff myself. XD I know some html and css and a TINY php, but that’s about it. Sometimes I think about switching to a normal site that doesn’t use major scripts like wordpress. XD
But the designs look nice! I like the 2nd blue one and the black one!
I like those. They are very simple and practical. Though 2016 trends are preferring bolder colours over pastel colours. You should make these into WordPress themes! (And if you don’t, may I have permission?) :love:
The last web layout I designed was just this weekend. I use Foundation framework, and I code with Komodo Edit (although all the cool kids use Sublime Text). I prefer sites with one column, because I mostly use a desktop computer, and I like reading content in the center of the screen.
I have thought about making them into themes and I might do this at another point in time. Thank you for asking though. :love:
I like all of your themes, especially Basic Basic! 😀 I can see myself using it. You did a great job! It can be overwhelming to learn all the new tools in webdev. New ones pop up everyday! The advice I always give is to slow down and take it a step at a time. Really master the concepts of semantic code and programming (if you decide to go that route), and everything will begin to make sense and fall into place.
Since I’m a dev for a living, I guess I will answer the first question with a personal project! XD I haven’t really coded something for myself in a while. The last one was an experimental landing page for my raiscake.me domain. I built it with React. It’s basically a flavors.me clone where you can pull up my blog posts and social media posts in one page. That was a fun project!
I’ve used Bootstrap at work. Susy is my favorite!
I think I feel the same way as you and most of the commenters who posted above. I’ve not coded in YEARS and I just feel like I’m faking further. not to mention I’ve been lacking time as well as interest/passion in coding that I end up just tweaking basic templates to suit my needs (which, for the past few years it’s mostly for TCGs). I’m glad you’re learning and experiementing and designing! (:
I suck at coding, never learned it..:( But I do have great friends that make awesome layouts for me, like Georgie of hey.georgie and it doesn’t cost too much either.
This is awesome! You should feel very smug 😀 I should try this for work, brush up on my skills.
I’m always a one column girl, but sometimes I think no columns are also good (depending on the content).
It’s awesome that you went out to try some web design coding. I think learning this trick will definitely help you out in the long run. Whether or not you’re an expert, as long as you understand how it functions and know how to apply it, you’re doing great! I think my favorite is the second design because of its simple design. Keep it going!
The last time I worked on my layout (legitimately) was over a year ago when I wanted to implement the featured image on the front page rather than post content. My logic is that people are going to click through my post anyways. I usually use the editor from WP to code my stuff. I would like to go back to 2 columns, but haven’t found enough cool stuff to stuff my sidebar with XD.
Hahahahahha I definitely do not use 1000 columns.
‘Easy’ is a pretty terrifying word sometimes, and I try not dare call anything easy unless it is transparently easy, because I know people have different skill sets. It sounds like you picked up RWD (responsive web design) really quickly though. And Sass is not too hard to pick up once you have it installed. You did an awesome job and I’m so proud of you for understanding the media queries and the viewport tag. A lot of that stuff can be overwhelming but you’ve done well. ? There are a lot of articles out there but you just have to start small!
I’m currently building a WordPress theme for someone but I’m always doing little tweaks to my own blog. And doing stuff at work too of course.
I think two columns is pretty standard, I tend to do one or two with my layouts, but there was a time a while ago that I did three. It depends on the website but two seems standard for a blog.
Wow. You did a great on those layouts. I would definitely download either the Cold Winter, Rounded, or Basic Basic. I wish I could make layouts. I guess not everyone is meant to design. It’ll probably look like a five-year-old design it. Haha. I agree. It’s good to know the basic of HTML/CSS. Thank goodness for Lissa Explains It All. If it wasn’t for her website, then I would have not be able to change stuff around to the way I wanted it to look. I would have used Wix.
I haven’t coded a layout in probably five or six years! I was never really very good, haha and I definitely haven’t kept up with everything. I never really enjoyed it so I never had the motivation to keep up. I can’t believe you made all of these layouts in one day! I am super impressed because they are all so pretty! I think my favorite is the rounded one.
I generally like two column layouts best because I can provide some extra information on the side. Though I like the simplicity of one column layouts, too. 🙂
I always code, because that’s what I do for a living. Haha At work, I always make sure to check the website on all browsers (they call it cross-browser compatibility). But for my own personal projects (like my blog), I don’t care to check it on other browsers anymore haha most people use Chrome/Firefox anyway. 🙂
I also make sure that they’re responsive. Based on experience, it’s easier for me to do mobile-first approach. 🙂
I don’t like using frameworks because frameworks have a lot for elements that I am not using anyway. But at work, I have to use it.
These are amazing! I felt the same way for a long time. :/ Still do really. n’D
The last time I created a design was not long ago, but now that I use Tumblr, I’m learning something new with their code. Eventually I’ll sit down and try to teach myself their code.
When I do html/css I just use my favorite browser, and notepad. I think it’s really fun to code, and make something from nothing.
Those look good! Great job! I understand you completely on all the fancy new design stuff and code. I have been avoiding it myself because of all the changes. I really wish to learn jquery more but it is kind of overwhelming. I need to lock myself away for awhile to really get into it without distractions.
Love the layouts. I myself have been getting back into Web design after a long hiatus. It’s overwhelming, but I love it. Now, if only I can stop having a nervous breakdown every ten minutes. That would be lovely.
I’m pretty lost when it comes to building a responsive design from scratch. The last few layouts I’ve worked with have been premade and modified by me. I purchased my last two themes. For some reason, I don’t have the attention span to build my own anymore. Meh.
I loved all of your demos and samples! Would you mind if I used them for a base sometime – whenever I shall change my theme?
Thanks for asking about using them as a base. Right now I would just like to use them as examples. I might try making them into themes a little later (and they could be downloaded and modified). ou3uo
I’m definitely not too interested in coding a layout/theme from scratch – it’s a matter of knowing my strengths and weaknesses with the main one being anything scientific, technical, or math related. 😛 I love all of them – I’m really into minimalism when it comes to layouts/themes, as it allows your content to stand out. I hope that you do decide to make them into themes for download, I’d definitely use one especially if you choose to do them for WordPress. 🙂
I started creating html layouts back in 2008 that was the time when responsive design is not yet emerging and the demand for designing for mobile devices is not yet needed but as the time passes by, I couldn’t catch up because it’s really overwhelming. You’ll really need patience and curiosity in order to work out the codes. I learned HTML5 and CSS3 last year through my internship. Im planning to mastering it this year by re-designing/re-developing previous works I had.
Try studying bootstrap, it might help you as well 🙂 Btw, lovin the layouts you did there! 🙂
I can relate to how you felt about the change with web design and coding. I didn’t actually throw myself into responsive code until recently because I was THAT insecure about coding it. But it turns out that it’s SUPER easy!
You’re right — If you don’t try, you’ll never really get anywhere. It’s how I learned PHP and any other scripting lamguage. You just have to dive in, make mistakes, and learn from them! 😀