If you’re like me, you enjoy design webpages because you get to play around with different styles to make something your own. However, if you’re like me, you also have a lot of big ideas in your head of what you want something to look like, but don’t know where to start.
The easiest thing I’ve learned to do when I’m faced with this problem is to copy others.
Now copying others and not giving them credit or claiming it as your own work isn’t okay, but copying others and giving them the right recognition is.
There are plenty of links and websites out there giving different website layouts and how to code them. Below, I’ve linked a few of my favorites and why I like to use them.
How to create a simple layout with CSS Grid Layouts
https://developers.google.com/web/updates/2017/01/css-grid
I find it easiest to look at a few of the examples above, and then take a piece of paper and something to draw with. I then draw a layout I want to use and imagine what sort of content I would put in each of the boxes. I’m more of a visual learner so this helps me get a rough picture of where I want to start, but it’s important to remember that web design is something that can easily be changed and isn’t set in stone.
Drawing offers a rough draft, and to start, you can either use notebook or printing paper. Use a piece of scrap paper or draw on the notes of your phone if you have to, the most important thing for us beginner designers who are also visual learners is to start seeing whats in our head come to life on paper before trying to design it. This way we can see what works and what doesn’t, before designing anything I always sketch a rough draft. Sometimes what my design ends up being doesn’t even look remotely similar to what I sketched, but its a nice way to get my ideas flowing. Plus, you can always revert back to pencil and paper in the middle of your design process.
What I like to do when I’m sketching something for my website is first sketch what I want it to look like for viewers, which is also the visual in my head. After I get all of these ideas down, I then start a different draft of the layout.
For example, I could have a visual in my head of my posts being in columns, having feature images, headers, and links to the full post. Then, in my second draft of the layout I would sketch the different html elements I would need to complete this layout and where each would go. Such as, section, image, header, a button, ect..
Home 