Typography Article

Typography Article

The goal of this assignment is to focus on Typography styling on the web. I’ve created a web article about North Korea’s Nuclear Issue as it’s been all over social media lately.

The body is centered and set to 650px width. The main font used is Roboto San Serif 300 and 400. I used Lora Serif for the title and the main headings. Line spacing of the body set to 30px. Appropriate margins and paddings were used to give room to the content. Word and letter spacing were not used. Headings also have a background color to make it easier to navigate through the article. Anchors have light color highlight on hover, and darker shade highlight on click. The overall color scheme are shades of black and white.

One Page Scroller

LACUNA Photography

ezgif.com-video-to-gif.gif

Made a one page scroller using JQuery Smooth Scroll, SlickNav, borderless & responsive Lightboxes, fixed background header images, Pseudo elements and selectors.

I tried to implement most of the things I learned so far, besides PHP.

Thought it was worth a share since it looks great comparing to my first static website back in March.

Composite One

http://composite-one.helloimwilliam.com

The purpose of this assignment is to develop a website using the appropriate design procedures.

For my Composite One, I’ve made a website called History of Everything. The goal of this website is to educate about the world’s past in a generalized and simple format. Major events from 30,000 BC to 2000 AD were listed on the homepage in a timeline format. HTML, CSS and PHP were used for this website.

A total of 6 pages were made for this website: Home, BC Timeline, AD Timeline, About, Contact, and the corresponding Thank You page for the form. All the pages followed a simple layout, with the title placeholder at the top (Fixed positioning, so it always stays on top of window), an image-banner as the header, Nav bar right below, then the content.

Screen Shot 2017-04-26 at 9.15.09 PM.png

I made this website responsive, but did not add much effects for interactivity. The timeline descriptions adjust on browser resize. Using media queries, the Title and Nav Bar shrinks to a smaller font for small browser windows.

I find that the hardest part of this assignment was to follow the design procedures properly, or rather the most time-consuming. I started off using Illustrator to create the Wireframes and Mock up, and tried to follow the margin spacing accurately. My overall CSS styling changes during development to match my original idea. I ended up using Photoshop to create new Wireframes and Mock up which I find to be a lot more efficient, and improved my workflow. Although I understand that the accuracy of the Mock up (i.e. Margins) is not as accurate as Illustrator, I’d still feel that it would be a better approach if I were to work with personal clients. As it would save me a lot of time, and enough to show the general layout and feel of the website.

I aim to add more content to my timeline. Maybe separate the content into more categories (e.g. Country, Human Civilization, Beginning of the Universe, etc). Also I would like to find a way to make the content more interactive, visually appealing and easier to navigate through. Especially since I plan to add more timeline events.

Calendar Assignment #1

http://helloimwilliam.com/calendar

I have created my calendar using HTML, CSS & Javascript.I used HTML tables to create the basic outline of the calendar display, including days of the week, month/year and dates.A div is used in the table cells with a 50% radius. A hover property is applied to the container to create a blue border and a darker color fill.

The month/year display (i.e. JUL 2017) and days of the week are created using separate containers and absolute positioning.

Using the ::before and ::after pseudo selectors, I created an element with a 3 layer border which wraps around the calendar container. Only the top border is used, along with the “spin” CSS animation with different timing to create the rotating circle effect.

Under each holiday dates, I put a container with 1px height along with a blue border to create a “line” under the circle containers. The circle container will have a blue border on hover.

Arrows will appear on the side of the month/year display on hover. Using jQuery, the month will change using the onclick function on the arrows.

The same method is applied to the cloud icon at the bottom of the page. The background image of the body will change between two colors when the icon is clicked using jQuery.

I aim to apply webGL on the calendar to make it more interactive with the user.

 

What Good Design Means To Me.

Good design could mean different things to different people. Everyone has a unique style that makes them a unique designer.

I believe that good design is innovative. It does not have to be a huge break-through, or to forcefully be different, but instead little improvements that make the Web a better experience for everyone.

Good design is functional. A webpage with only good looks, but no functionality will poorly affect the User Experience. It is important for a webpage to optimize appearance and functionality.

Good design is aesthetic. Good aesthetics will further improve the user experience. It should fascinate and appeal to users, using appropriate placements of objects and appealing colors. It should also be easy for users to use, without the need for explanations.

Good design can express. It is crucial to communicate clearly and effectively to the users. Good communication can add value to the information or product, improving the user experience as well as business valuation.

Good design means a good experience.