[Beginner] How to create a landing page with large feature image
A step by step tutorial on how to create a landing page with a large feature image design.
Content
- Introduction
- Result demo
- Prerequisite
- Step by step guide
- Conclusion
Introduction
Web development is easy to learn, but hard to master. If you are a beginner, you might find yourself struggling to create even the simplest web UI, despite all the effort watching an online tutorial. It is because web development is a skill that requires hands-on practice, a lot and a lot of practice. If you want to get good at it, you need to do coding practice. One practice I would recommend is finding a UX/UI reference you enjoy, and then try to code it yourself, and see how close you get.
In this article, I will pick one UI created by UI/UX designer (in “Daily UI Challenge”. If you want to know what it is: https://www.dailyui.co/) and try to create a web frontend with it. I will show you step by step how I approach the problem and create the web UI from scratch.
The design I picked is “WearLinq” by @Martin Maderic, it is a landing page for a health app, with a clean card design and a large feature image (hand holding the phone, showing the app). The image itself overlap and even “escape” into the background, creating an interesting dynamic.
In addition to the image, also notice how the background color in circle shape, the larger circle also escape the card, just like the image. We would need to carefully plan our code hierarchy in order to create this pattern.
Result Demo
Codepen demo: https://codepen.io/josephwong2004/pen/oNLRJYp?editors=1010
Step by step guide
Step 1: Quick Draft
Let have a quick draft of the image and try to figure out what we need to pay attention
The first thing I did is to identify the different components of this design. We have the “card” container, which should be on the lowest z-index position (let make it 1).
z-index control the order of html element on screen, it is similar to “layer” in photoshop
Inside the card, we have “header”, which contains “Nav tab” in it. The header is placed at the top of the card and should take the entire width. We also have “content” inside the card, showing the title, description and action card. While on the right-hand side, we have a circle with color, overlapping the card itself and hence should be put in z-index: 2. Similarly, the feature image is above the circle and should be put in z-index: 3. Since both elements are extended outside its parent (card), we would probably use “absolute” position on them for convenience.
Step 2: Prepare resources
With the draft and planning settled, let’s prepare the resources we need to create this UI in code. Obviously, the first thing we need is the feature image, which is the bread and butter of the entire design.
I have used photoshop to crop the image out of the original design. Since it is not a photoshop tutorial, I am not going to go into detail about how I do it. The edge is still a bit rusty (as lack of patient), but I figure it should be good enough for tutorial and practice purposes. I also upload this image to imgur for import later.
Next, let figure out the font used in the design. I couldn’t find a 100% match to the font, and end up picking is “Nunito San” in google font. Although “Roboto” and “NotoSan” would be a pretty good choice as well.
Last but not least, let get the color code from the image. (You can check the color palette here: https://coolors.co/f4f9f9-d7f1eb-15c199-f84040-181a1a)
Most element is in the first two colors, the remaining colors are for the button, text or small detail.
Step 3: Setup environment
Let’s set up our environment and get ready for coding. I am using codepen, so the setup will be more codepen-oriented. First, let’s import the font from google to the project, as well as setup some color variable for use later. I have also added some basic styles for the project.
With the environment all set, let get coding.
Step 4: Create the card container and content
The first thing is to create the card container. The card is position at the center of the body, we could use percentage size to roughly mark the card first, as we likely need to adjust it later based on the image. In addition, let add the content as well as they are very straightforward.
HTML:
SCSS:
Again, I roughly layout the element with sizes subject to change later. (As you may see, the content is likely too large for the whole design). We could fine-tune the detail sizing and proportion when the picture is more clear to us. Also, you might notice the button is missing. We will add it in the last step.
Step 5: Create the circle shape and image
Next, let put the circle-shaped color and the feature image into the card. As explained, these two elements should be in absolute position, and should be allowed to “escape” outside the card to the background. The circle-shaped color is semi-transparent, as you can see the color of it changes in the edge of the card. There is also an “inner” circle with same color as the background.
Also, I figure instead of using z-index, which may cause some weird issue from my own experience, I simply make use of the default order of html. (lower code block come first in the hierarchy)
In addition, instead of making two circle shape, I just make one (the inner circle) and then give it a box-shadow with solid (well, transparent) color.
HTML:
SCSS:
Result:
The bottom part of the hand is hardcoded to make it looks like it is “cut” by the card corner, but it is not. As to limit the image to the card, we would need to use overflow: hidden on the card container, which also blocks the top part of the image. An easier way to achieve this is to prepare the image with a sharp and straight bottom, and then use bottom: 0 positioning.
Step 6: Create the header and nav-bar
Now let fill in the header and the nav-bar of the card. The header container an image, a nav-bar, and a button. We could use a flex container in the header to layout these element. Let also update the “content” element to put back the button in there.
There is an indicator for selected nav-item with black color and green dot at the tab, on user select, the tab should get changed and the style as well. We will add it as the final polish. For now, let just add one “active” class for the selected tab.
HTML (with updated action card):
SCSS:
For the “dot” of the active tab item, we use an :after element, which only apply to the tab with “.active” class.
Step 7: Make the tab change style on active
In order to change the tab style on select, we need to use a little bit of jquery. Basically, when a user click on the tab, we would add a class “.active” to it, and remove all other “.active” class in the rest of the tabs (if exist).
The code is very simple, after importing jquery to your project, add the following:
We add a click event to add .nav-item class, and then on click, remove all of the .active class, and add it back for the clicked one.
With this last bit of detail, our UI is completed.
Conclusion
The pattern of one featuring an image on a landing page is very useful when you have a product to showcase. I love the simplicity of this design and the layering effect it created with smart positioning of the element.
There is a lot of things I ignored in this example (such as responsiveness), and the button user interaction. If you want to go for a complete piece, more testing is required to see how the UI looks in different screen size.
