Facebook Page GUI PSD

New!

Start downloading
Facebook Page GUI PSD

Clicking this ad helps ensure we keep these resources free & updated

Designed to make it easy to test your avatar & cover image designs across multiple sizes. Just modify the shared .psb files and see updates applied across all files/sizes.

 

License: These files have been produced with the intention of helping fellow designers. We therefore request you do not repost them as your own downloadable resources, do not host the files in any other location, or attempt to sell these assets for personal gain. Share the love and spread the word.

 

Desktop and Mobile Photoshop files

The facebook.com UI is not responsive and so the proportions of the interface at different desktop screen widths is always the same. So we have produced the two most common view of a Facebook page; the desktop web and the mobile app. Facebook profile images need to be a minimum of 180 x 180 px in order to be accepted, and are strangely displayed at a marginally smaller 160 x 160 px in the profile view, but it’s preferable to use a higher resolution image to ensure the resizing done by Facebook doesn’t create too many artefacts, and looks better when this image is viewed as a full-photo when clicked on. For this reasons we have opted for a 1024 x 1024 px Facebook profile image which should look nice at all sizes and higher PPI devices. The files have been well organised and labelled to help you when modifying it for you needs. These PSDs have been made using the most recent versions of Adobe Photoshop CC, if you have an older some features of the file may not work as expected. The UI in all GUI PSDs have been remade from scratch using vector shapes, allowing the entire file to be scaled to any resolution. Wherever possible we have used shared .psb assets that can be replaced in one location and propagate everywhere across the separate files for each size; change once, applied everywhere.

We try to keep these files as up to date as possible. We’ll always endeavour to update them quickly if changes affect the assets you need to create in order populate a profile. Sketch GUI PSDs coming soon…

 

Desktop

This page is pretty basic and hasn’t changed fundamentally since Facebook introduced the timeline UI. The size and proportions of the cover image is pretty consistent across the various Facebook UI’s. The main cover image asset you need to create should be a minimum of 850 x 313px. The avatar should be a minimum of 180 x 180px.

resrouces-facebook-page-gui-psd-desktop

Download Facebook GUI PSD

 

Mobile app

The most common use of Facebook in any medium is via the native apps. The same assets are still used on every platform, but this is the most common view of the assets you create, so we suggest making them scale down well to this size. This is where the header photo becomes a little problematic when trying to display finer details as it been made so small, and the avatar, page name, category and a sizeable gradient have all been overlaid. We therefore recommend not adding small text into your header photo (avoid using text all together unless large & short) as it it will likely be illegible at this size. Also avoid placing the point of focus in the bottom half or bottom left quadrant the cover photo.

resources-facebook-page-gui-psd-mobile

Download Facebook GUI PSD

This is what these files are for – testing your designs and ensuring they work across all sizes.

 

Start downloading
Facebook Page GUI PSD

New!

We have other resources too

We love to make and share. There‘s always been great resources available online, here‘s our opportunity for us to share with you and to give back to the community.

User Experience

A general term that covers all aspects of a user’s participation while engaging with something that has been designed. Usually when talking about User Experience in the digital design field it refers to the interactions, reactions, emotions and perceptions while...

UX Design

The practice of User Experience (UX) Design is the coming together of many specific design related disciplines to improve the usability, responsiveness, uptake and aesthetics of a product or service.UX Design is carried out by anyone involved in designing an...

Responsive

Excerpts are optional hand-crafted summaries of your content that can be used in your theme. Learn more about manual excerpts.

Iterations

Excerpts are optional hand-crafted summaries of your content that can be used in your theme. Learn more about manual excerpts.

Wireframes

Excerpts are optional hand-crafted summaries of your content that can be used in your theme. Learn more about manual excerpts.

User Interface

Excerpts are optional hand-crafted summaries of your content that can be used in your theme. Learn more about manual excerpts.