A Street of Crocodiles
Introduction
After initially taking some time to get myself back into coding websites using HTML and CSS by building a very basic website for A Street of Crocodiles, I wanted to go back and re-design my overall project to a higher standard. When I was studying Interactive Media at NRC I was using a lot of SCSS and SASS when I was building my web projects so I decided to utilise these languages again to allow me to streamline my design and build of the website, I will only be using some basic functions of SCSS like nesting and possibly some variables for colour and typography too.
SCSS is extremely easy to use and is almost identical to CSS except you have more capabilities with SCSS, to allow me to convert my SCSS file into a CSS file automatically I will be using a free version of the software PrePros, this will save me a lot of work and allow me to streamline my workflow and will not change the way I have to link the CSS file to the HTML document in order for the styling properties to function properly.
After going over what we had learned about HTML and CSS in our workshops over the past few weeks I decided it would be a good idea to make a list of what we went through to allow me to incorporate them into the design of my website. I have included a short list of what we went through below as a reference to guide me through the design of my website.
- Basic CSS Properties & Values
- Web Typography
- Images
- CSS Grid
- Flex Box
- Responsive Design
- Navigation Links
- SVG’s & Web Icons
Initial Research, Ideation & Design
For my project I wanted to start by looking for some inspiration on different web layouts, typography, images and other graphical elements within web design. I wanted to consider all the topics we had covered in our workshops throughout the previous weeks and ensure I was able to put what we had learned into practice to build a professionally developed website that is both semantic, consistent and responsive using a variety of different coding techniques and languages like HTML, CSS, SCSS and potentially some additional programming languages like jQuery and JavaScript.
Design Inspiration Research
When we first received our The Street of Crocodiles project the National Geographic style website design instantly came to mind so I wanted to design a similar style website to suit the project. Some of the design inspiration I came across for my project would be extremely difficult to code and get working across all devices and screen sizes as they utilised image masking and images overlaying typography to create some form on depth on a two-dimensional plane, due to this I decided to simplify my design while drawing inspiration from different National Geographic website designs.
For the main content of the website I just wanted to keep a simple article format with some CSS Grid/Flex Box elements included to create a two-column layout on some sections of the web page. For the design my main focus was placed on the landing page of the website as I want the website to look great when a user first visits the site.
I have included a couple of designs below that really inspired me when it came to planning out my website and figuring out what direction I wanted to take the design in.
Idea Generation
I began my initial sketching process by doing a quick brain dump of ideas I had in my head, I am wanting to include a variety of different layout techniques throughout my website such as CSS Grid and Flex Box so I wanted to consider this when I was creating my initial sketches for my design.
I started by creating some quick ideas for the navigation element of my website to give me an idea on what the best option would be to increase the usability, as the content for the project was limited to 3/4 sections I thought it would be best to opt for a basic navigation system that utilises generic navigation links that link to each section of the website.
I have included the sketches for my navigation element below, I did consider using a navigation menu but I thought that would be best for a mobile device as opposed to a desktop screen.
I then moved on to get an idea of how my website will look when the user lands on the webpage, as the main body content for the website was quite basic with just headings, paragraphs and block quotes I wanted to keep those sections simple and maybe include some images to create some sort of variation so the webpage isn’t overly basic. I focused my attention to landing page design of the website to ensure my website is visually pleasing to the viewer in addition to using different coding techniques to creating an interesting layout for my project.
I have included a few sketches below to illustrate some of the ideas I had when it came to starting the initial design process for my project.
Final Sketches
Once I had a few ideas on how I wanted my website to look for my project I went on to sketch out a couple of ideas for the whole website to give me an idea on what sort of layout I could go for and how I could arrange different elements. I wanted to consider what we had learned throughout the first semester of our course, focusing on user-interface design elements and design systems such as Material Design and Apple Human Interface Design in addition to other UX laws and principles of design that we covered at the start of the semester. I wanted to ensure that I was including all the coding techniques we had learned over the past few weeks making sure I included certain elements like images, icons, typography and different layout methods like CSS Grid and Flex Box.
I have included a few sketches below to give you an idea on how I want my website to look, my main focus was including everything I had learned over the past few weeks and putting it into practice on a real project.
Final Design
For my final design I chose to use Figma, personally I love the Auto Layout feature in Figma as it allows me to create dynamic content that can resize to the items container. This was perfect for me as I wanted to create a grid based layout that had 8-columns, using the Auto Layout feature to contain my content into grid areas and columns really helped me get an idea on how the website would be built using HTML and CSS coding languages. Some of the typography used in the final design will be tweaked and changed when I build the project as I will be using Google Fonts to allow me import web fonts into my project that I do not have access to on my laptop. I tried to choose a typeface that is similar to what I have in mind to allow you to visualise what style I am going for throughout my project.
I have included an image of my final website design below to give you an idea on what I was aiming for with this project.
Website Build
Version 01 – Basic HTML Markup
For my first version of my project I wanted to focus on the basic HTML markup of the website and ensure all the code was semantic with the correct tags being used for each element. I wanted to ensure I was utilising the meta tag in as many variations as possible to allow for better search engine optimisation if the website was to ever go live in the future for a portfolio piece. The HTML markup was pretty simple as I just needed to copy the text we were provided into Visual Studio Code and apply the correct HTML tags to each element.
I have included a couple of screenshots below of the HTML code and how the code will be displayed on a browser, as I am working on a MacBook Pro I will be using the Safari Browser that is built in to all Apple systems.
Version 02 – Basic Website Structure, Web Typography & Images
Once I had my content placed into their specified HTML tags I went on to create the basic structure of my website including navigational elements, different sections, images and typography. For my project I wanted to use SCSS as I have found that it significantly increases my workflow when it comes to web development due to its nesting capabilities, there are more features to SCSS but this is the main one I will be using to allow me to work faster. I will be using a program called ProPros to allow me to automatically convert my SCSS file into a detailed CSS file which I will then link to my HTML document.
While creating the structure of my website I wanted to ensure that I was using a variety of coding techniques like CSS Grid and Flex Box that we had learned in our workshops over the previous weeks. For my navigational element I utilised the Flex property to allow me to create a generic navigation bar with the logo and navigation links on the left and some social media links on the right, this was extremely easy to create and I personally love Flex Box and how easy it is to create interesting layouts.
For my landing page and the rest of the website I wanted to base it around an 8 column grid, I did this by setting each section container to 8 columns using CSS Grid and the grid-template-columns property. CSS Grid is just as easy to use as Flex Box and it allows you to create dynamic designs in addition to it being extremely easy to make responsive.
For this project I wanted to use two different typefaces that contrast with each other, the typefaces I chose to use where sourced from Google Fonts as they allow me to import the web font into my HTML and/or CSS file. The first typeface I chose was Montserrat because I wanted a bold, geometric style sans-serif typeface that is easy to read as I will be using it for the main body copy of my website, Montserrat is one of my favourite typefaces due to its legibility and I personally think it looks great for headings too. The second typeface I chose was Corinthia, I’m not sure if I will keep this typeface in the final version but for now it is a good fit for the style I was going for, I wanted a typeface that had a handwritten, cursive style to contrast with the Montserrat typeface which is quite uniform and upright.
I have included a few screenshot of the website below to illustrate how my project is coming along.
Version 03 – Responsive Design
After I had the basic styling and structure of my website complete I wanted to ensure that it was responsive across multiple different screen resolutions like desktops, tablets and smartphones. To do this I used CSS Media Queries to allow me to define certain changes to the CSS styling when a certain threshold is hit, for example when the screen size reaches 375px, which is the width of the iPhone X screen, the website content will be displayed vertically spanning the full width of the screen.
For my project I wanted to include and additional navigation section when the website is displayed on tablet devices and other smaller screen resolutions, I took some inspiration from the W3Schools website on how to create an overlay navigation by using basic HTML, CSS and a small amount of very basic JavaScript to allow some form of interactivity when an element is clicked.
I have included some screenshots of the mobile version of the website in addition to the CSS Media Queries used to make the website responsive.
