#3 Charity Website Layout

Charity Website Final Product

Click for full resolution and other pages.


Step 1 



We will start our layout by creating a pretty large canvas in height. Set the width at 1020 pixels and the height at 1725 pixels. We will be working with a 960 Grid System. I recommend Nathan Smith’s 960 grid system, which you can grab for free, right here.

Step 2 





We’ll be adding a really subtle pattern so we won’t have to work on a white, plain canvas. The best source for free subtle patterns is SubtlePatterns.com, where you’ll find hundreds of awesome textures. Grab any light texture you think will be suitable, and apply it to our background, so it would cover all the canvas space. We don’t want it to be really visible that is why we will give it an opacity of 15 percent.

Leave 70 pixels in height (count from the beginning of the header) for our navigation, and then create a gray shape, which is 500 pixels in height and will be the base for our slider section.

Step 3 



Fill the space we left blank with a dark-gray, almost black color: #272727.

For this layout, i chose 2 font families. Helvetica in Regular and Bold and League Gothic are the fonts we will be using. If you do not have Helvetica, you can always use Arial, which is pre-installed on windows computers, and barely differs from Helvetica Neue. The font for our logotype is Coffee Script Italic, 36pt. The font for navigation is Helvetica Neue Bold, 12pt. The color used for the font and navigation text is white. We’ll add an almost visible black slash sign, between each navigation link.

Step 4



At the right side of the navigation we will place 2 small “Call to Action” buttons. By using the Rounded Rectangle Tool (U) create an orange-colored shape (#e26424). Apply a soft light gradient overlay effect, with an opacity of 30 percent.

Step 5



We continue our button by adding an inner shadow effect, the blend mode being soft light as well, and the opacity: 75%.

Step 6



One more touch for our button will be a drop shadow effect. Set the size to 2 pixels, the distance to 1px and give it a gray color: #a3a3a3.

Step 7



Finish the button by applying a gradient stroke effect. Start with a very dark red (#491803) and finish with a brighter one (#8a2800)

Step 8



Grab the IconSweets2 free icon set, and grab the “cloud-download” icon and then input some random text near the icon.

Step 9



Result So Far:



Repeat the same exact steps, the only exception is the color of the button base shape, which is now a dark-gray:  (#4d4d4d).

Step 10



Grab the Rounded Rectangle Tool (U) and create a shape of about 340 pixels in height, and 700 pixels in width. Give it the usual dark-gray color: #282828.

Step 11





The rounded corners shape looks plain and too simple, that is why we will be adding a nice ribbon to it. Creating a ribbon similar to the one you can see on the screenshot above is pretty easy, but we will not cover it’s creation as it is beyond the scope of our main tutorial. Webdesign.Tutsplus have published a very good and detailed tutorial on how to create such a ribbon.

Use the Helvetica Neue Bold font in 14pt and add some random text. Find the “globe” icon in the IconSweets2 icon set, give it a gray color, and place it near the left border.

Step 12





Grab any image or picture of 430 pixels in width and 240 px in height. I personally prefer Flickr for images licensed under the Creative Commons licence.  We will write some text near the image, by using League Gothic (24pt) and Helvetica Neue Regular (12pt). Copy the orange button we created in the header, remove the icon and change the text to “Read More” and align it with the text.

Step 13





By using the League Gothic font (72pt), input some text. In my case, it’s a donation-related message. The color of the font must be #272727 and give it a white drop shadow effect.

Step 14





Create 3 rectangles.  Let them be 250×150 pixels and position them accordingly. By using a nice orange color (#dc561d) and the rectangle tool create a simple bar which would connect those 3 boxes. Use the same color to create three vertical bars with triangles, which would cover the left part of boxes.

Step 15





Now start inputting text in the boxes. First box would have some simple text in it. The second would contain a list of items. By using the Elipse Tool (U), create a few dark circles and apply the Gradient Overlay effect you see in the image.

Step 16



Find any payment icon set you would like and grab 4 random icons and place them in the bottom part of the box.

Step 17



Take the Rounded Rectangle Tool (U) and create a shape. Apply a Gradient Overlay effect with an opacity of 20 percent. Give it the same inner shadow and drop shadow effects we have applied to other buttons during the creation of this layout.

Step 18



Grab the “finance” icon from the IconSweets 2 set and then input some text. I used Helvetica in two weights(bold/regular) and 2 sizes (18/12px). Apply the drop shadow effect you see on the image.

Step 19



Create 2 buttons and position them under the second box. By this time, you will be able to create them on your own. If not, refer to previous steps.

Result so Far:



Step 20









We move on to creating another section. It will be really simple and basic. Will consist of a text block, one image and a button. By using the “League Gothic” font, 36px, input “Browse All Charities” and center it.

Step 21



Use the Elipse Tool (U) to create an orange circle. Apply a stroke effect with a darker orange color. Use “League Gothic” to input the date.

Step 22



Duplicate the circle two times so you would get “3 upcoming events”. Use Helvetica to input event names and locations.

Step 23



Grab the “pin” and the “phone” icon from the IconSweets set and give them a really nice, subtle gray color. We’ll be creating four small widgets. For the first two, we’ll be using Helvetica (uppercase/lowercase) of 14 and 12 pixels accordingly.

Step 24





Use the Rounded Rectangle Tool (U) to create a white shape. Apply a gray stroke (#c6c6c6) and then take and cut a screenshot of any google maps location. Place it accordingly.

Step 25



The last thing would be a “box” with social icons. By using the Elipse Tool (U) create 6 equal circles. Five of them must be gray, #c6c6c6 will work perfectly. One circle must be orange, it will represent the “hover/clicked” state.  Finish it by adding a gray button (refer to previous steps for details).

Result so Far:



Step 26



Let’s finish our layout by adding a “footer bar”. It’s nothing complicated. Just a simple, dark gray (#272727) bar which is supposed to contain some copyright information or something similar.


Leave a Reply

Your email address will not be published. Required fields are marked *