Welcome to the second part of “I attempt to explain something that honestly should not be in the format of an article,” where I’m now designing websites instead of taking pictures. For many, websites serve as a virtual home for most of their work, from potential college application material to a creative outlet for many students. However, for any aspiring website builder, starting one is the virtual equivalent of the blank page—“What should I do, and how do I make it so that it doesn’t look terrible?” This article will help with that.

First off, the best way to design a website is to figure out the layout of the site. The decision of this website can help determine the mood, accessibility, and convenience of adding more future elements. Most well-designed layouts split their page into these general elements:

Strips: Split the website into rows of varying heights, and put the main points on the strip itself, yet hide the details or more text with a hyperlinked piece of text or an additional element like a button. 

Grid: Basically strips but subdivide the website into columns as well, and put the main points on the little squares. In terms of text, grids closely follow strips, but its main advantage is that it fits more subjects within a single row, and that the mood of the site is indirectly influenced by the number of squares per grid. Smaller squares are better for things like galleries, and larger squares for a lot of posts under a specific topic, like posts under a general writing topic.

Split screen: Split the page into two columns, and put your contrasting elements here. This is mainly better for business-oriented sites, but this layout can be used to emphasize a specific element on one side of the page and a caption on the other.

Full screen: Background image or video + text that relates to the image. This is best for things like headlines.

Magazine: This is best for news sites and online magazines. For the amateur, this layout is an alternative to the grid. The main benefit for this layout over a grid layout is that the layout helps emphasize certain elements more than others. For things like headlines or breaking news, this is useful, but a similar application is posting the projects you’re more proud of on the place of emphasis, and others on the smaller boxes. It’s also a pretty good mix of a grid and a split screen layout.

These help with mainly placement, so that websites are more easily navigable and new content can be easily added. The other main thing that influences website building is styling, things, mainly font, color, and interaction.

Color: The color wheel is your friend. Use contrasting colors to help emphasize highlights or specific elements. Use complementary colors as a bit of a secondary color to your main color. If you like neutral colors, play with the grays in contrast to either black or white. 

Font: Font plays a huge role in setting the tone of the website. More formal websites or websites that want to have a vintage look should use serif and monospaced fonts, websites that want clarity should use a sans-serif font that is easily readable, like Helvetica, and creatives can use more playful fonts. 

Interaction: This is generally the navigable elements of a page, such as menus, buttons, and links. The main purpose of these elements is to help with easy access to other parts of the website, such as additional subpages, elements within a page, as well as animation for things like interactive backgrounds.

To supplement: I’ve made a fictional portfolio website. Check it out here: I’ll be sure to link the specific elements I mention here with their respective applications. 

And that is pretty much it! The best application for this is to basically do a trial-and-error process with your website. I hope this guide is pretty helpful, and good luck designing!

Photo by Balázs Kétyi