Web Design Practice – HTML Draft

Here is the HTML draft for the web design project in this semester. The page with columns is totoally made of pure text codes. It is very early without any style but still displays the brief structure of the website.

HTML and CSS note of the draft page

Here is the content matrix:

Résumé Gallery Contact
Provide personal information Portfolio. It will be categorised with ‘Graphic Design’, ‘Illustration’ and so on. A convenient function to clients. (It will be a capacha to prevent bot attacks.)

Le Ciel Azuré Portfolio 2015 — Plan, Sitemap and Wireframe

Here is the planning stage of the 2015 version of ‘Le Ciel Azuré’ Portfolio Site’.

Part.1: Plan and Purpose of the website

  1. Displaying my works, including design (package, branding, graphic, web and etc.), illustration (tranditional and digital), photography.
  2. Discrabing the projects (of design) I directed and participated.
  3. To connect with clients (who are looking for an individual designer) and employers (for the recruit of design studios and other creative companies).

Part.2: Style Research, Moodboard

The 1st moodboard displays the scrolling and flat-design style of website which is on-trend, elegant and friendly to mobile device.


Follow Shouhui’s board Portfolio Site – 1 on Pinterest.

The 2nd moodboard displays the sites look likely to belong to design studio and common business site. The style is creative under strudy construct so it look strong in professionality.

Follow Shouhui’s board Portfolio Site – 2 on Pinterest.

The 3rd moodboard displays the gallery style websites. It was the most prefered website for designers before the scrolling one-page website become popular. The style shows the work clearly and is powerful in SEO.

Follow Shouhui’s board Portfolio Site – 3 on Pinterest.

Part.3: Sitemap and Wireframe

The draft of sitemap and three wireframe styles

The site is planned to have sub-categories under the gallery (portfolio) section. It will be the multi-paged site to provide the best SEO result, with the planning 3 styles.

The first one features the navi-bar on the top which is supposed to be a more convenient UI especially to mobile device, like this site does. The second one have a seperated navi bar, look like this or this one. The third one is similar to the second but more simple, just features a plain background to show the navi-bar with letter, like this or this one.

The wireframe of contents

There are the plans of the pages for contents, which features the seamless gallery, which shows the pop-up after clicking every thumbnail.