Hnd Betc Typography #6

During the lectures we were informed that we had to create a website prototype. This would be done by utilizing all of the information and practices and techniques learnt throughout the classes. The goal of the project was to show off the learnt knowledge of typography.

The project basis was simply about creating a website prototype, highlighting, STEM, which are schooling subjects. The brief stated that the website should have a way of engaging the audience, whilst allowing them to take in relevant information. During the brainstorming phase, one of the first things that came to my mind for a general base for my website was the website Tech ICT, this is because it was simple and had all of its information easily accessible. This website was one that I used during high school and as a pervious target market user, this was a website that was done generally well.

Teach ICT Website Homepage (https://www.teach-ict.com/index.html)

The first thing that decided to start was the website logo. One thing that i considered whilst creating the logo was the color scheme for the website. At first I decided to use the national flag’s colors but I noticed that using that would limit the amount of freedom I had, as a result I then decided to use the color complement of my logo as a base color. This was decided because I wanted to have some contrast in my design to create some interest.

Revelation’s Stem Logo

I choose to use a thin font as to give off a sense of formality. I also used a leaf and attached it to the extended line of the r. I used this to create the appearance of a plant stem with a leaf, this design was inspired by the acronym STEM, which stands for Science, Technology, Engineering, and Mathematics. The typeface for the word stem was used because the design lacked weight. I didn’t want to use a typeface like Impact because of the weight of the text would appear to large and throw off the design. After searching, I found the typeface which was used, I utilized this typeface because it appears to have weight but it still allows the other elements of the logo to breathe.

The layout for the home page was the first of the web pages i did, during the brainstorming phase, I tried to create the layout for the web pages in such a way that would allow the text to be readable, in addition to creating adequate negative space for the text and other elements in the web page.

Home Page for Revelation’s STEM

The image above shows some sketches done for the homepage for the website in addition to the website’s logo. As can be seen above, in these sketches I tried to create as much space between the text as possible, as to not jumble them. Additionally, I also attempted to create an interesting vertical looking text to create interest within the content. For the nav bar, I decided to keep it simple as to not create confusion and so that it would be easier to navigate as many people are used to the horizontal navigation bar. The footer had the website logo as well as the logo and information regarding a website noted in the brief.

Facts of the Day Page for Revelation’s STEM

The above image is the sketch for the facts of the day web page. In this web page I wanted to utilize the knowledge of hierarchy in typography as a means to show off the information to the users. I decided that i would accomplish this by creating the text larger and by creating interesting designs in the webpage to draw the users’ attention as to not bore them.

Physics Page for Revelation’s STEM

The above image is a drawn sketch for the physics web page. One thing that i tried to create in the design whilst doing the sketches is to evoke a personality within the work. This can be done by using a certain color scheme or by having a certain element repeating over during the course of the design. In this case, I tried doing this by using the heading for the webpage which is place vertically on the left side “physics”. I also did this to create interest in the page because of the fact that this page would be very text heavy, so by placing contrasting elements and images and so forth, it can elevate some stress from the user and also help their eyes move freely around the page without only seeing text.

For the reaming subject web pages, I simply alternated the positioning of the vertically placed heading. In my opinion, by doing this, it would allow for the webpages to be interesting whilst also keeping everything consistent and orderly.

Biology Page for Revelation’s STEM

One of the things I learnt whilst doing this was the importance of the placement of text. I realized this while doing the sketches for the subject pages. I tried to add the relevant information within the webpage, but in a way where it wouldn’t appear odd. The website is suppose to inform people, so it would not be a good thing if the users would take more notice in the innovative elements added to the webpage instead of the text just because it was placed incorrectly or the text was too small etc.

During this assignment I fully utilized the knowledge learnt to create an appropriate website that would be an efficient information outlet.


Leave a comment