A website is one of the most powerful tools to promote a business. It is also an important factor which determines if the company will be successful or not. And it is crucial to keep the design eye-catching comprehensible and accessible. Similar to creating a logo, a profound research on the company is required as the design needs to stay true to the brand. This blog is going to instruct you, step-by-step, in making a basic mockup.
For redesigning, I chose Uniqloâs website, a Japanese fashion brand for casual, everyday clothing. Their website itself is well-designed, but in my opinion, we can make it simpler and less confusing.
First, we create the template in Adobe Photoshop (my version is CC 2017). Almost every web page uses this template with this layout and composition.But you can customize your content however you want to fit your aesthetic taste, as long as it is still easy on the eyes.
Create a new horizontal file with 1900px by 900px dimension, 72dpi resolution, RGB color mode, 8 bits. You should have something like this.
The width is usually 1900px as it fits most computer screens, but the height can be varied. For me, this is too narrow, so I am going to extend it. Hover over Image option and select Canvas Size. I change the height to 1940px. At the bottom, there is a square with arrows in it. They mean that the change of width and/or height will expand the page in all directions. Click the top arrow and the arrows change. They are pointing downwards, which indicates the change of height will lengthen the bottom of the page.
Your file will look like this.
Next, we will plan the composition of the content. We will need guides and grid for the job, but before that, letâs customize them. Click on the Photoshop CC at the top left of your screen, hover over Preferences and select General (or you can just perform the hotkey Ctrl/Command + K). The Preferences window will show up.
In the side menu, select Guides, Grid and Slices. In the Grid section, change the units like below (Gridline Every: 100px, Subdivisions: 10). You can change the colour if you want to.
Now, we are going to start with the layout. Enable your Ruler (Ctrl/Command + R), grid (Ctrl/Command + â) and guides (Ctrl/Command + ;). Create a set of guidelines and number them like below. To do so, you have two ways: 1. Click on the Ruler, hold your left mouse and drag out a guide and place it in right positions or 2. Hover over View and select New Guides.
  The navigation bar is positioned on top of the screen, between the area as shown. Here, it usually has the companyâs logo and categories. I use Rectangle Tool to draw the bar; the logo is PNG which is with the transparent background. I take all of the categories on the original website and add âSpecial Offersâ option.
If you want to create that gradient color like I do, select the rectangle and open Properties menu (in Window). Choose the fill style box and click on the gradient option. You can pick whatever color and gradient style you want. You can also customize it on the color bar.
 The header grabs the most attention, so it is the biggest and position just under the navigation bar, where viewers are going to see first when they go to the website. It includes the businessâ newest information/deals or brief introduction. I choose to promote Uniqloâs Fall/Winter 2017 Lookbook.
You can make an image as your header if you wish. I find this a bit tricky. Open your image in Photoshop, rescale its resolution to 72dpi and change the size to fit with that resolution. After that, drag the image to your website file and place it in the header position.
Now, select the Marquee Tool and draw a rectangle in that area.
Click on the rectangle icon with a dark circle in it in the Layer window. It will create a layer mask which also crops your image; the black zone is where you cannot see, while the white is where you can. To adjust the image inside, click on the link symbol between the layer and the mask (in Layers window). Finally, finish up with some details and add some texts.
The content is usually placed in column style, each row has four âboxesâ with 20px gutters between each âboxâ. It is the basic layout, but you can go a different route that fits your style. This is the most difficult part that I often struggle to decide the style, the colours and how to organize the content properly. Your design has to have strong composition and hierarchy, stays true to the companyâs brand and especially, has to be original and user-friendly. No clients want a design that is mainstream and messy. In my opinion, simplicity always works best.
I choose to divide my content into two section like they do in their original page: the special segment and the more casual segment. In âBest Of The Seasonâ, I choose Uniqloâs newest and most recommended products. I redesign how the text is displayed in each picture, make them simpler and more elegant. And for the other section, I have four categories (âTopsâ, âBottomsâ, âOuterwearâ, âAccessoriesâ). Each has best-selling products with the best deal, for both men and women. The combination of black, white and red works really well, and it is also the theme colours of the company. I think the tile style gives away a fresh and modern feel to the website. Picking out which images to put in your design is also a complicated job.
4. Contact and Information
The last part is the contact links, newsletter subscription and other information. This part is rather easy, as you just need to make sure the elements are easy to navigate.
I include social media icons and, a link to a subscription form, important policies and business information links. The icons serve as a visual attraction and the red colour create a great contrast with the black background. If you want to add icons, make sure they are all PNGs. As for the pictures, I choose dark themed photos to counter the white box in the middle and to form a nice transition with the black bars below. At the bottom of the page, you need to have a copyright disclaimer; in my case, the text is âCOPYRIGHT (C) UNIQLO CO. LTD. ALL RIGHTS RESERVEDâ.
1. Folders: Organize your elements in folders. You can do it in the Layers window. For example, I have a total of 6 folders: Numbers (for the guidesâ labelling numbers), Navbar (for everything in the navigation bar), Header (for everything in the header), Content1 (for Best of The Season), Content2 (for the casual clothes section) and Bottom (for everything at the bottom).
2. Fonts: You can choose whatever fonts you want, but it is best if you choose two, one from Serif family and one from Sans serif family. That combination creates an elegant harmony in your design without being too disturbing to look at.
3. Logo and Icons: Make sure they are in PNG format, which means with a transparent background.
     Redesign a Website in Adobe Photoshop A website is one of the most powerful tools to promote a business. It is also an important factor which determines if the company will be successful or not.
