[UPDATE 5/27 @ 12:50 a.m. PST] Omake step #2 – Font Awesome.
Preparation (Part 4) – Wireframing with Materialize
Again, I know it took me forever to write the next part, but finally, after how many days of brainstorming and brainstorming and more brainstorming, I finally come up with a wireframe of how the front/main page would look like. I still have yet to work on the other sections, but for the time being, I’m going to cover the creation of our home page using one of the popular CSS frameworks of today: Materialize.
This is going to be a rather long section, so please bare with me.
Ready? Let’s start!
Prepare your ingredients 1: Text
From the previous prep tutorial, I introduced you to the new (online) Markdown editor called Classeur. I only showed one file that I worked on for the sake of the tutorial, however, this is what I have now, all ready to go:
Because I’m going to build the first/home page, the first thing I’m going to export out of Classeur is the Introduction (Home) file. But for convenience, I exported all of my other files ready to be put up on the site so I wouldn’t have to do this process every time I create a new section.
Below is how it looks like when I open one of the files above:
To export this into an HTML snippet, here’s what I did:
- Click on the Menu tab (the blue tab in the screenshot)
- Choose Export to Disk.
I should see the screenshot below with the Export window:
Three things that we see here. When you choose Text, you got three options: Plain HTML, Plain Text, and Styled HTML. These are the differences:
- Plain HTML – we’re only going to export the HTML snippet of the Markdown text that we wrote in the file.
- Plain Text – we’re including the Markdown syntax along with the text content. We’re going to use this when we’re going to integrate our wireframe with Hugo later.
- Styled HTML – The entire HTML syntax including the DOCTYPE (HTML5) tag will be included.
Since we only want the snippet, we exported it using Plain HTML. We save the file on our hard drive. I have a subfolder in my CBLW project folder called Markdown Content and saved the exported file in there.
Prepare your ingredients 2: Images
Alright, we’re done with the text content. Next, we’ll be preparing the images that we’re going to use for our wireframe. After all, this is a fictional character/pairing tribute site, so what would a tribute site be without the images of our beloved fictional couple, right?
Be aware of copyright issues!
This is a serious matter for us, both as fans and as web designers/developers (regardless whether you are a hobbyist or a professional). Yes, we are fans, and yes, we love our stories and our characters. But keep in mind the limitations when it comes to usage of images for your own personal tributes. We give all our credit of our favorite stories and characters to the original creators, because of course, it’s our way of saying thanks to them for making us happy.
However, keep in mind also that any images created by artists dedicated to our favorite series and characters are not owned by the original creators. In short, any fanart or fanworks dedicated to their favorite series/characters are owned by the fans who created them. This means that for us web designers/developers who can’t draw or write fan-based stories to show our love, we need to obtain permission from these fan artists/fan writers before we use their material on our sites. Anything that doesn’t involve any form of permission will be considered stealing and copyright infringement.
Via Fair Use, we are allowed to use official images of our favorite stories and characters; in this case, CLAMP’s official artwork and official art of the animated series. We can use them because we are using them for information and commentary, as well as a promotion of the said work to the masses, as long as we add the copyright information, and in any case, sources of where we got these images from.
There are three sources where I will be getting my images from:
- Card Captor Sakura Omnibus manga (Kindle Edition) – for the official CLAMP artwork and manga art.
- Minitokyo – for the official artwork of CCS animated series.
- Freepik – for any free vector art that I can use and manipulate.
- Material Icons – The Materialize framework is defaulted to use Material Icons (they’re actually Dingbat fonts, but still, graphics) if you want to take advantage of simple, flat icons for your design. Both Materialize and the Materialize icons are based on Google’s Material Design concept. I’ll explain this a bit later when I start introducing the Materialize framework when we begin wireframing. If you’re curious what it is, you can check out Google’s documentation.
The tools that I will be using to create and edit the graphics:
- Adobe Photoshop CC
- Adobe Illustrator CC
I’m not going to focus on what I’ve done with the images and graphics that I will be using for the site, because this section is primarily focused on wireframing the layout using a relatively new CSS framework at the same level as the popular Bootstrap or its close competitor, Foundation.
Prepare your ingredients 3: Fonts
In Materialize (and Material Design), there is only one default font being used for all types of text (headers, content text, etc.): Roboto. You can find Roboto at Google Fonts.
But because this is Card Captor Sakura, and that we are web designers/developers, we have to beautify our visuals by using the right fonts. And because that I am going by the Material Design approach of this site, along with the default Roboto, I will be using other fonts via Google Fonts:
- Boogaloo (for the navigation menu)
- Courgette (for the quotes on parallax backgrounds)
- Cherry Cream Soda (for the header titles)
- Meiryo/MS Gothic (default (?) font for Japanese text)
For the first three, I will be using the CDN codes provided by Google Fonts to cut off the hassle of installing the web-based versions of those fonts in the web server (and of course, they’re faster because they’re hosted in the cloud). The fourth one for the Japanese text, it’s already set by default by Google Chrome. You may be seeing something different, but in this case, you will have to turn on East Asian Language support for your operating system. Please follow your operating system’s instructions to do this.
Now that we got all our content ready, we can finally start our wireframe.
What’s a wireframe?
A website wireframe is a screen blueprint, visual guide, or site mockup for web designers and developers that illustrates the skeletal structure of the proposed layout. They can be created with just a regular pencil and paper, graphics programs like Adobe Photoshop and Illustrator, chart programs, or even specific wireframe programs like Balsamiq. Some CSS frameworks, like Foundation and Materialize, can be specifically used as a wireframing tool.
Most website wireframes are non-graphical, but for those who work with UX and UI designs, adding graphical elements may help them build better designs than just “placeholders” on them.
Okay, so, why Materialize?
Some of you are probably wondering why I’m not using more popular ones like Bootstrap and Foundation. True, but I do have my own reasons why I decided to choose Materialize for my CSS framework.
- I love Android phones! One of my personal goals as a current student of web development is to construct cross-platform mobile web applications. If you are familiar with Android phones, you should have noticed the signature flat design of Android’s default interface. Solid colors on top, Roboto fonts all the way from the app titles to the headers to the content, and of course, a huge application of Google’s Material Design everywhere. I fell in love with Material Design that I thought that maybe building a fun tribute (shrine) site to some of my favorite series (in this case, CCS) that can pass on as a default Android app would be a pretty neat idea. (Well, I try, anyway.)
- User-friendly focus! All CSS frameworks now apply responsive design elements to their structure, and Materialize is no exception. The design structure of Material Design provides user-friendly visuals to visitors and it gives a “calming” feeling on the eyes. Also, manipulating its responsiveness is a lot easier to do.
- Plenty of elements to choose from! We call them components, but you can use and utilize their variety of components that you can add to your layout, and they even show you (and provide codes) how to incorporate them too!
- Well-organized documentation! In fact, the official Materialize website is its own documentation website. No separate site for you to go to just for the documentation and instructions to follow.
- Something fresh, new, and different. I’m a person who likes to try a lot of different things and make them work somehow. I’m sure that anyone can build a shrine using Bootstrap or Foundation, but making a shrine that (somewhat) resembles a default Android user interface would be something refreshing too!
- Learning/Educational purposes. I would love to learn as much CSS frameworks as I can, so I have a variety of options on what to use based on ease, convenience, and inspiration. Foundation was the first CSS framework that I learned, Bootstrap was my second. Materialize is my third CSS framework that I’m currently learning right now.
Set up Materialize
What I love about CSS Frameworks is that they already provide all of the tools and guides that you need for a successful website. When I build sites using a CSS framework, I made sure that I have their documentation site open, because, really, there’s no way you can memorize all of the framework’s core functionalities and features all by yourself unless if you’re some kind of a super learner.
Let’s start setting up Materialize!
- Visit the Materialize website. Throughout the entire wireframing/layout building process, you’re going to have this website to be open at all times. Just press the shiny Get Started button that you see in front of your or simply choose Getting Started on the side menu to your left. Both will lead you to the same place.
- The first thing you see is how you download all of Materialize’s core files. You can just download them in a zip file like you would normally do with everything else. If you feel sassy, you can download the Sass version too. If you’re used to using the console/command line, you can download the core files using Node.js (NPM) or Bower.You can also use its CDN if you’re worried about web space and bandwidth. Materialize’s core files are also hosted as a collection of libraries in the cloud through CloudFlare. For the time being, I’m using all the default codes, but when I start uploading this to my actual web server, I’ll be replacing those default codes with the CDN codes:
Now that we’ve got Materialize downloaded, let’s check out what’s inside.
According to the Materialize documentation, there is an
index.html and a
style.css default file included. However, in this latest version (as of this writing), both of those files are no longer included.
The reason why those files are no longer there because you’ve got two options to start off your project. Let’s take a look:
OPTION 1: Create your own files
If you feel confident with your HTML/CSS coding skills, you can start off a fresh slate by creating your own
style.css files. Although, I recommend you go this route when you do get very familiar with the framework altogether.
index.html file, this is what you should have:
Next, create a new
style.css file and save it in the
css folder along with the
materialize.min.css files. All of your custom CSS files will be in the
style.css and that you do not touch any of the materialize CSS files, but don’t neglect Materialize’s special components and take advantage of them so you’d be able to save time as you build your wireframe.
When you do start creating your layout from scratch, use this handy grid system notes on how to use the Materialize Grid system properly and efficiently:
Because I am still new to using Materialize, I’m going to go for OPTION 2 instead.
OPTION 2: Choose a default starter template
Materialize provides us with two different starter templates for us to choose from. This is highly recommended if you’re just starting out with Materialize or if you want to have a faster option so you can save time with your project.
If you’re new to using CSS frameworks, using starter templates is very common. Bootstrap, Foundation, and other CSS frameworks also have their own starter templates for you to choose from to make your project easier to build. Because Materialize is still new, they only have two starter templates for the time being.
The two starter templates that Materialize has to offer is a standard default template and a standard default parallax template. Because I feel a little adventurous with my CBLW shrine, I’m going to choose the parallax template. I went ahead and downloaded the zip file.
Build the wireframe using the default parallax theme
Here is the default parallax template provided to us by Materialize. If you don’t want to see the demo URL, here’s the screenshot of it:
For a starter template, this looks very professional, ready-made for a business site. But we’re going to convert this simple parallax starter template into something special. We’re going to turn this starter template into the one we’re seeing below:
After you download the parallax starter template zip file, unzip it, then rename the folder to a name you can remember. I renamed mine cblw_parallax.
As you go through the coding, you will need the following important documentation sites open:
- Materialize Documentation (the website itself)
- Google Fonts (to get your embed codes)
- Materialize Icons
- Materialize Icons Guide
Excited? Let’s begin!
STEP 1: Coding the navigation menu bar
I’m gonna break down the screenshot above and point out the elements that we need to code. Like with other things, I like to start from top and end at the bottom, so let’s focus on the navigation menu bar, site logo, site title, first.
Click on the screenshot for a larger, clearer view of the “parts.”
I’m going to open my index file. I fixed the code shown below as per my Brackets internal W3C Validator first. The code below should pass on as Valid HTML5 code.
Be sure to click on view raw link at the bottom right corner to view the entire code:
Using the default index file, I made all my modifications and custom features to my nav menu bar using
materialize.css for the default components and added my custom additions to
style.css. I start off with the HTML first with comments/notes guiding the structure down.
Whatever custom CSS I added are on
style.css to override the defaults indicated in
Be sure to check all the comments that I inserted in the code samples. They should tell you where in the Materialize documentation that you can find information and instructions on how to use the framework’s key components more efficient and effective. Sometimes, it’s easier if you can even just copy/paste their code samples and then apply and modify them to your needs.
STEP 2: Coding the intro section
Next, we will be coding the second portion of the above screenshot. Click on the screenshot for a larger, clearer view of the “parts.”
I continue on with the HTML coding on
index.html. Please take note of the comments/notes inserted in the code snippet below, thanks!
The only thing that’s custom CSS section here is the header title. Again, please pay attention to the comments in the snippet below, thanks!
Finally, the last portion of our home page wireframe!
STEP 3: Coding the news/site updates sections and footer
Let’s break it down into elements in this screenshot below:
In the Material Design concept, a bit of a shadow effect is required whenever you use smaller components for better display of your text, and Materialize strictly follows that guideline. I will be using the Cards component to display my news and site updates. Even though I will eventually be using Hugo to do all the updates, I will be adding the news and updates manually.
We finish the home page with another beautiful parallax background before we reach the footer. The footer has two parts, as you can see: The first one has the link buttons, a small section of links in which this site is a part of, and the copyright note at the third column. I’m using the grid system again for both the cards and for the footer area. The second part of the bottom is just a quick “return” to the top of the intro page, and then links to both Materialize and Hugo to show everyone how I made and maintain this site.
The rest of the HTML now looks like this. Again, please take a look at the notes commented in the snippet.
Lastly, the CSS structure for the news/site updates and the footer.
Demo of this layout?
You can check out the demo of the home page that we just coded if you’re curious to see how it looks like when it’s finally launched live on the web. I am using Dropbox as my host of all my samples and demos for The NINPOJineous. In that way, I will be saving web space and bandwidth on my server (plus I won’t get attacked by weird spam and bots and anything similar).
The purpose of this section is to give an overall introduction to Materialize and how you can build a comprehensive website using this framework. There are several possibilities that you can build wonderful websites with this framework alone with a few customizations that you can add yourself here and there. You can even build sample wireframes just by using Materialize if you’re too lazy to build a mockup of it in your graphics program (or simply that you really aren’t into graphics in general).
Materialize has a showcase gallery where you can check out real-world websites built with their framework. The framework is still in its alpha stage, but many have found the framework easy to use, and in any case, perfect for those who would like to build mobile apps (especially for Android systems) and those who would like to practice applying Google’s signature Material Design concepts in their projects and how the concept can be very effective in drawing attention from the public eyes.
There are plenty of CSS frameworks out there for you to choose from. I use mostly Foundation, and a bit of Bootstrap. I’m loving Materialize myself, but I’m still new to it, so that’s why I decided to choose this framework to build my personal fan project. The possibilities are endless.
There are still a lot for me to do with this wireframe. I’ve only done the home page, after all. Each page/section may look a little different from the home page, and that is expective. The home page may probably be the only page that will have three parallax backgrounds. The rest would probably just stick to one to no parallax at all.
The next part would be, in my opinion, the hardest part of this LBP. How will I convert this completed wireframe into a theme for Hugo? Once again, we go back to Hugo to cover the basics on how to build and maintain a website using this static site generator. I have done plenty of WordPress theming (via child themes) and I have built many sites with just manual coding alone (without the CSS frameworks) in the past.
Finally, the core of this LBP is here, at last. Stay tuned!
Omake (Extra) Steps
These are extra steps that I’ve done involving third-party services to make certain parts of my Materialize-based character pairing shrine work. If you’re following along with this tutorial series, keep in mind that these steps below are optional, but at the same time, I also recommend you check them out. I will continue to add any more extra steps just in case, so stay tuned!