To create my website, I had considered using framework such as Bootstrap to speed up the design process. I was going to do this right up until I actually started my website, but decided against it as I already had a responsive website that I had started but not finished. I decided to take this code and convert it to suit the needs of the website I planned to make with ExpressionEngine. This sped up the process of designing and making, but it meant that I felt better about what I’d made as it was all coded by myself and although technically I had cut some corners, I hadn’t taken a different route entirely.

Below is the shell of the old website (my portfolio site, currently empty!)  with a few of the features of the new site I’m making. As you can see, I’ve changed the title (this isn’t how I want it but it helps for reference), I’ve added some sub-navigation, which will relate to categories in ExpressionEngine when it comes to that stage. I’ve also added NivoSlider – a slider I used in my Creative Web assignment, and one that will be used to display featured images. I’ve added a couple of extra title divs – one for the page and one for the featured story. Finally, as you can see in the hero section, I’ve created sections to display individual articles with images to the left and a title and information on the right. These will eventually display published entries for every channel (being the home page, I wanted to display the most recent 6-8 stories on the first page people would see.

basic layout old site conversion

After I’d made these changes, I tested my website against most browsers – Chrome, Firefox, Safari and IE all showed the same site in the same format, no differences.

browser compatibility check

After this I researched some colour palettes, and chose out of these five the ‘Giant Goldfish’ palette.

colour palette birds in flightcolour palette giant goldfish colour palette funny feeling colour palette its funny now colour palette make me laugh

A font I had been using with a client’s website, I decided to use ‘Bebas Neue’ as the font for my website. This was a sans serif font, meeting the requirements of my plan, that was perfect at replacing the standard h1 and h2 fonts.

bebas neue font

I applied the @font face style to the CSS and set it initially just to h1. By this point I had altered the design of the website entirely. I’d taken advantage of CSS3 and given the div elements rounded corners. I was planning to add box shadows but hadn’t applied them at this stage. This is a template of one of the other pages, the individual story page that ExpressionEngine would feed a singular entry from the database depending on which story was forwarded to it.

story page - rounded corners

I furthered the use of the font by incorporating it into the logo I designed for the website in Photoshop.

basic logo construction

I applied the logo to the website, removed the tagline temporarily and extended the use of the font across the entire website with the exception of the <p> tags.

bebas neue font in action

At this point, I’d improved the background, and added the shadows to give the navigation and information elements some definition. After this I left the website as it was, all pages almost finished, to be finalised at a later date, and began work on installing ExpressionEngine.

box shadow and buttons

Advertisements