If your website pages seem cluttered and lack any organization principles, you can use Photoshop to make it much more user-friendly. By using a few simple elements, you should have a redesigned website ready in no time.
Table of Contents
When to Redesign a Website?
Redesigning Website may be especially necessary for portals like cluttered airline websites. For instance, the website may use a form for users to fill in. However, for each option a user chooses, the form may refresh.
This can be quite frustrating. Further, any options you choose may bring other options on the form to change. The user may not have a clear idea of just which options have changed and maybe left confused.
A few design changes can make the interface much more comprehensible for users.
Would you rather leave it to the professionals? Check if your project fits within our scope of service.
Redesigning a Site
You can begin by opening the image of the webpage that you want to redesign on Photoshop. You can use the shape tool and use a rectangle to cover the area that you want to redo.
If you are redoing a website, you may want to leave the header intact. This often contains the website logo and contact information. You can now fill this rectangle with the color of your choice. Lighter colors make for better backgrounds.
You can also add a darker border of about 1 pixel by changing the stroke. Ensure that you add the filled rectangle in a new layer. This is because you want to be able to go back and forth between the original image and the overlapping rectangle to see just what changes you’d like to make.
How to Design Tabs On a Website?
To begin, you can create a new group on Photoshop and call it Tabs. You can use a rounded rectangle or any other shape for the tab. For instance, you can use the rounded rectangle shape too. Set the radius to 3 pixels.
Create the first rounded rectangle and reset the transparent fill to a color of your choice. Now, you may want the same stroke that you had on the first rectangle that you placed over the image.
You can use the layer tabs on the right-hand corner of Photoshop to do the same. Hold down the options click key and drag the stroke from the first rectangle layer to the first tab layer. The same stroke color will be applied to the tab.
(Source : Google Images)
You may also want to get rid of any overlapping stroke lines. For this, you can double click on layer effects and check the box that says ‘Layer Mask Hides Effects.’ You can now select the layer mask from the layer.
Use the marquee tool to select the area where you want to erase the overlaps. Use the Command + Backspace to get rid of the overlapping lines. The tab will then be a seamless part of the rectangle.
You can duplicate this layer and drag it over to create as many tabs as you like. You may now want to add the text you like to label each tab. Align center each text so that they stay put as you make any further changes.
Further, when you design in an interface like a form, it is best to allow the tabs to follow a meaningful order. Choosing a single tab may lead to changes in other tabs on the form. Place the tabs that demand the most changes at the top.
For instance, on an airline website, tabs like prices, award travel, and schedules may cause the most changes in the subsequent tab options you see. For instance, by choosing your schedule for a weekday, you may only see options that apply to weekdays and no to the weekend.
Adding Details to Tabs
There are a few details that can make each tab stand out and look appealing. Here are a few elements to consider.
Alignment
(Source : Google Images)
The arrangement should be such that a changed tab should not lead to any changes in the tabs that are placed before it. You can use the alignment tools to arrange the tabs well. You can also use the distribution centers option for even spacing between each tab.
Dividers
If you are using a single block shape to add a few different tabs, you will have to separate each to allow for clarity. You can use divider lines to do the same. You can use the line option from the shape tools. Set it to 1 pixel.
You can place one between two pieces of text on a single block to now create two differentiated tabs. Hold down the shift key and move it to the right spot before you lock it down. Use the fill tool to set it to a color that is darker than the color of the tab.
This should keep it visible to the user’s eye. You can use Command + J to duplicate this divider and place it wherever you need to differentiate various tabs in a single block.
Sizes
Do note that the sizes on your tab do not have to be the same. You can instead vary the size depending on the side of the text inside it. To work on this, you Command-click on a layer, and this will select it. You can now switch to the pen tool.
Command-click on one of the points on the tab and then Shift-click. Once you do this, command-click on the point again. This will deselect all the other points. You can now command-click just the points you need and move them to resize the tab.
This will keep the curves on the tab intact. You can now go ahead and move any text in the tab to align it to the center of the tab. You can similarly get all your tabs to fit the text that they hold.
It is a good idea to group your layers as you go. This avoids any clutter and gives you an organized interface to work on.
Formatting and Website Body
For the body of the website, you will need to keep in mind various other elements. For now, we are looking at designing a site that contains an airline form. You can now type a text like the City, Airport Code, Departure Dates options.
You can now begin formatting the written text. Some text may be more important than the others, and you will have to make them stand out. For instance, the city you are traveling to maybe the most important in a section of the airline form.
You can use a larger font size here to make it stand out.
Adding Shadows to Elements on the Website
Some of the text can be placed in rectangular boxes in the body. You can also go ahead and add a light shadow to it to make it stand out just a little from the rest of the text.
You can do this in the layer style tab and click on drop shadow. Adjust the angle and leave the global light on so that the same is applicable for the entire document. You can add important text like the city into this box.
You can also change the color of this box. Make sure to align the text into the box.
(Source : Google Images)
You can also create a separate section within the box to place any indicator you like. This is great to place an arrow on a drop-down menu. You can also use it for other icons like a map marker for the city of departure in the airline form.
You will have to use the shape tool to draw a rectangle into the edge of the box. Set it to a lighter fill color than the rest of the box.
You can add a drop shadow at an angle of 180 degrees and about 1 pixel to create a line that separates the rectangle from the rest of the box. You can also add an inner shadow for more highlights.
If you are having trouble seeing these highlights, it may be because the color of your rectangle may be white. By setting this to a slight off-white, you will be able to see the white highlights well.
Adding Icons
(Source : Google Images)
You can now add the icon into the rectangular box you have created. You can use the Glyphish icons set to pick an icon of your choice. For the city box, you can choose a map marker icon. Take it from the Glyphish set and drag and drop it into the rectangular box.
You can use the arrow keys on your keyboard to place the map marker icon just in the center. You can even change the layer styles and choose a color overlay. Through this, you can switch the icon color to any prominent color in your document.
You can duplicate the same box and use it for other fields like date and time. You will have to drag the new icon into the duplicated rectangle in the box. Hold down the option key and drag the effects from the previous box to the new one.
In this way, the same effects get replicated. For instance, you may now be using a calendar icon to indicate the date. You can delete the old duplicated map marker icon from the rectangle. Use your arrow keys to place the new calendar icon just right. You now have two fields ready.
Repeat the same process for all other fields.
Designing a Drop-Down Menu
Create a new rectangle and hold down shift. With this, you will be creating a new shape instead of adding to an existing one. Name the layer in the layer tab.
Click on Command + T and rotate it to make it look like a diamond. Switch to the pen tool and click the point on top of the diamond to delete it. You should now have a triangle before you with the tip facing down.
Select the points to change the shape of the triangle as you like. Resize and color the arrow to go with the drop-down box.
Adding Gloss to the Drop-Down Menu
If your drop-down menu looks a little bland, you can add some gloss to make it look more appealing. You can begin by using a marquee tool to select the area that you want to add gloss too.
Create a new layer. You can use the gradient editor to add the gradient you like. You can place the arrow below the new gradient layer in the layer tab. This will add a part of the gradient to the arrow to add a few interesting details.
You can add little snippets of text like ‘Depart On’ above the ‘Date’ box so that users are directed to the right box.
You can also add a few text links to group text snippets that can look cluttered and confusing on the page. Once this is done, group all of the layers and use Command + J to do it. All of the above-created elements fit well into the ‘Departure’ group of an airline form.
Once this is done, you can duplicate this group and tweak it to create the arrival group.
Adding Graphics to the Site
(Source : https://thenounproject.com/term/graphic)
You can use websites like thenounproject.com to pick out the right graphics. For the airline form site, you can use an airplane. You can download the necessary images. Open the PNG file in Photoshop.
Hold down shift and scale the image to the desired dimensions. You can duplicate this icon and flip it horizontally so that you can place two planes, one above the other. Each can face a different direction.
You can mix it up as you like. For instance, you can change one plane to a color, say blue, using a color overlay. On the other one, you can use the same blue as the stroke outline and reduce the fill to 0% so that only the stroke remains.
Designing an Accordion
If you have a lot of information on a form or website, you can group them into an accordion form to reduce confusion around it. With an accordion, you will be able to display vertically stacked headers that show only one collapsed option at a time.
You can begin by creating a box, giving it a stroke, and adding some text. For the airline, this text could be ‘Who is Travelling?’ in the box. You can also create an arrow with the shape tools and anchors and place it on the box.
The arrow can point up when the box is open and down when it is close, but you can switch this up if you like. Just make sure to keep it uniform throughout the document.
Add the multiple necessary options beneath each accordion. For instance, you can create boxes to add options like Adults, Children, and the like. If you are moving any elements from the original website to the redesigned one, the elements may have some color remaining from the old setup.
(Source : Google Images)
You can select these with the marquee tool and set them to the correct color that you have used on the redesigned site. Adjust the color, and the accordion will be ready.
You can duplicate the accordion to get multiple types of data grouped into comprehensible groups. Edit each group to get just what you need. You can also add a relevant icon to each accordion to make it visually appealing. You can copy the same layer styles to each icon.
To align each element of the accordion, you can use the guide by dragging the ruler. You can place all the elements next to this guideline.
Finishing the Redesign
There may be some buttons that are used as a convention on your site but may not be as important. For instance, an airline form needs a cancel button, but this may not be used as much.
For such buttons, you can reduce the visual area but keep the clickable area just about the same as other accompanying buttons. Through this, you can divert attention to those buttons that you want people to click on. These are also called actions or action buttons.
(Source : Google Images)
For the prominent action buttons, add color and gradient overlay to make them pop. You can also add a stroke. You can now reposition any actions and icons and remove any excess length off the page.
If there are any elements on the older website that you would like to keep the same, you can go ahead and do this by clicking on Command + J. Now add and reposition it on the redesigned site.
A Few Tips
When you are dealing with multiple layers and tools while redesigning a site, you may find that a few actions you perform don’t work as they should. This happens mostly because of the layers and tools selected.
You may have selected the wrong layer and the wrong tool for a specific action. Recheck this once, and you should be able to complete just the action you are aiming for. Save and categorize your content in the layer tab, so that sorting between multiple elements becomes easier.
Consider incorporating cultural elements into your design.
Endnotes
Redesigning a site is not a difficult task if you follow the right organizational principles. By using the right tabs, accordions, icons, and action buttons, you will be able to reduce a cluttered site to a simple, elegant one.
Go ahead and use these to redesign your website with a much easier user-interface.
