Final Design

The final completed design of my website is shown below. It features the various design trends that were identified in previous blog posts. The header image is a looped video so that it can grab the audience's attention immediately after they enter the site. All of the large images flip when you hover over them. This …

Making the Website Responsive

When I created my website, I decided to create the desktop-sized website first before making it responsive. Overall, this was a weakness on my part because it required me to undo some of the work that I had done (see the post on 'float: left'). Getting Started The first step to achieving a responsive design. …

Responsive Design: float

When I created my website, I decided to create the desktop version first before optimising it for use on other devices. I mention this because as a result of this tactic, I encountered a rather large issue when it was time to make my website responsive. The hover animations that I used on my images …

Responsive Design: Focus

A lot of the features on my website design are focused on the use of hover effects and hover animation. The consequences of this did not come to mind until I began working to make my website responsive. While hover effects work well for use on a desktop, I wasn't sure how they would translate …

Hover Effects: Animation and Drop Shadow

Hover settings were something that I knew that I would be using from the start. They are a natural part of every website design but I wanted to be more inventive with how I used hover setting rather than only sticking with the basics. As I was designing my website I decided to utilise another …

Sticky Navigation

One of the web design trends that I identified for 2018 was sticky or fixed navigation. This can take different forms, an element of the website can stay in a certain place of it can follow as you scroll down the page. I decided to utilise both of these forms when designing my website. Although …

Creating a Cinemagraph

A cinemagraph is a looping video where one aspect (or a part) moves while the rest appears as a still image. I had previously seen a video like this and when it appeared in my research of web design trends for 2018, I knew that it was something that I wanted to include. I had …

Initial Design

Img1: Homepage Img2: Article Img3: Fashion I created an initial idea of how I wanted my website to look. Although these three designs are similar they had subtle differences that I was testing to see which I thought would work best. Differences Img1 has the video at the top of the page while Img2 and …

Creating a Brand: Choosing Fonts

One of the identified 2018 web design trends was custom typography. To meet this expectation, I aimed to use two different heading font types that would offer originality and demonstrate the brand of my magazine.   The first font would be used as the logo for my magazine. The font I chose to use was Morva …

Web Design Trends 2018

In order to make my website modern, I decided to research industry predictions to find out which trends were expected to be popular in 2018. Although there were many different trends, I have compiled a list of six trends which appeared consistently or those which I thought would be relevant to my magazine website. Here …