The Brief
Design and prototype a website for a fictitious bank. Utilize basic design principles to create a modern and unique web based design and user interface. Create custom graphics, navigation, buttons and icons.
![](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/0adcf3d5-4d8f-4b13-86e7-f84abbd8ffca_rw_1920.jpg?h=95200a799505580da562171216bed26e)
Based off of an image by Richard Sagredo on Unsplash
![Main Dashboard](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/4e0279a7-e237-4e68-860e-7d101db1a4df_rw_1920.jpg?h=dc966bbddfc846f4ca09cb5ef4c95daf)
Main Dashboard
![Investment Portfolio](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/aef9bf2c-54d8-4434-bb2c-bc425e19b7f0_rw_1920.jpg?h=8203744cdf8b1d85df1d50372c5d145b)
Investment Portfolio
![](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/25c09e08-942d-48d3-912f-77bad0d2974e_rw_1920.jpg?h=d38a89b17b92e8b7a4fb76826c45d358)
Sketches and exploration for my logo design.
Competitive Research
Big Bank Style
Many massive banks have websites that pair stiff typefaces with carefully curated stock imagery to create a fully forgetful landing page. Their logos are minimalist, and they all have the same colors. Each of these websites is designed to steer widely of any risks, and focus on functionality.
![US Bank](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/5e8bcbb8-8460-4e4d-9475-77782f8e3fca_rw_1920.png?h=5f14ea3e5b7c42515c74dc4e52ea687f)
US Bank
![HSBC](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/19182cd0-b7b6-4636-b17a-218e3b13739c_rw_1920.png?h=62b1cc21fdc61ecf69dc7c97b29901ca)
HSBC
![Bank of America](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/9018df4e-395e-4cd7-80a1-4dd55a838dea_rw_1920.png?h=3875e78c9f916193e5e2997b9e507cb1)
Bank of America
![BMO](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/35780031-1203-44b4-b681-af2e54b53131_rw_1920.png?h=5049e429f0cf473cc3b31480755403eb)
BMO
State Bank Style
Regional U.S. banks adopt a more interesting approach. With text floating over an original photo, and more varied typefaces, logos, and colors, these websites feel well-suited to the expectations of a smaller populace.
![UnionBank (Vermont & New Hampshire)](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/6c6a39f7-02d0-4329-bf63-2fb9864601f4_rw_1920.png?h=c787b02d5697ecb2b81bfe7dfa943781)
UnionBank (Vermont & New Hampshire)
![Bank of Idaho](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/9441055f-aeb8-4bed-9cd9-d809c0f0f9c2_rw_1920.png?h=474315432c4ec5ed07ed9271cb2b6e1e)
Bank of Idaho
![Truist Bank (Eastern Seaboard)](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/52f273f7-6a09-4a70-8271-d1cc9cef2471_rw_1920.png?h=3d509ea3b5caa10e6e237207bbfcc4f0)
Truist Bank (Eastern Seaboard)
Crypto Bank/Behance Style
These trendy websites make use of nifty gradients, 3D models, and rounded corners to proclaim themselves as the next big thing. You'll find many Laurenz Brunner-esque fonts similar to Akkurat and Circular.
![Sight Banking](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/3ea44202-9ac7-4270-9663-3617bcec8cdb_rw_1920.png?h=512a8c84b6ae7275effe70b512809896)
Sight Banking
![Concept Design by Abu Musa on Behance](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/842eac89-962a-4e6e-b0a5-f7ffa1271b34_rw_1920.png?h=2a71869aa2cd035bccd3593d07a48dec)
Concept Design by Abu Musa on Behance
Colors
The warm, aquatic blue represents stability. The golden, yolky yellow represents wealth. Together, they’re a picture of a warm beach sunset with a cold drink in hand.
![](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/74dff403-6e20-4cc2-8b2e-62c5a71ea76a_rw_1200.jpg?h=fd0e671fd572aabdf89c96f351ee397f)
Type
Libre Franklin, redesigned for web readability by Pablo Impallari, perfectly suits the professional and approachable nature of Palican Trust.
For the logotype, I used EB Garamond ExtraBold for its simple, elegant trustworthiness that is naturally expected of a bank.
![](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/feb6894e-16aa-449f-aa31-ad12885b7b76_rw_1200.jpg?h=d84de2d9d0faef81e4172b3d0da35c53)
Accessibility
The Web Content Accessibility Guidelines (WCAG) are in place to ensure that all surfers have a successful interweb experience. As a part of their guidelines, all text must have a suitable contrast ratio for legibility. When displayed on the blue background you see here, the yellow only passes if it's large and bold. That's why white is used for smaller paragraphs of text.
![](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/d30a0708-c37f-4853-bd18-0e961cce2949_rw_1200.jpg?h=cb1588379b4a3093f407e42d8524261d)
Sitemap
adasasdasd
![](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/214677d3-9a0a-45c0-94e0-6ce4013d1e4a_rw_3840.png?h=bcf2fe5f5563f84d8a1addf183452648)
All Screens
aSasas
![Landing Page](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/1c5d094f-60c4-4ea9-8c6b-31d2d356be70_rw_3840.jpg?h=014d59cd02f31ef9500eb7c6f64978c9)
Landing Page
![Welcome Popup](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/1691c858-12eb-4c43-886b-3f66d9b41a01_rw_3840.jpg?h=844d19b0aaa5e6b6d03cd90093e3559a)
Welcome Popup
![Sign In](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/f02bf5f8-4b6e-4d15-9da2-01155f160cd3_rw_3840.jpg?h=bae76f3a03d40c9bf5405ea42eb9ed42)
Sign In
![Create Account](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/ba9552a0-ed91-4572-895f-fca6b48f6874_rw_3840.jpg?h=69143efbb173ca14a12a8d0c9384542b)
Create Account
![Two Factor Authentification](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/fc079106-425a-4408-872d-533278d34889_rw_3840.jpg?h=74ce4338c48042b228d1e6e1b8dcb211)
Two Factor Authentification
![Main Dashboard](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/7767fbea-d31a-4b6b-874a-ac76760e93ed_rw_3840.jpg?h=4d93d783ad992ff2b68470f14039b395)
Main Dashboard
![Checking Account](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/26e0129f-2cc6-4c29-83dd-a04a43376b91_rw_3840.jpg?h=0fa2ed33df6a0533f17add4324c1b025)
Checking Account
![Savings Account](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/b7d0f2d8-1d34-4a12-a9a5-dcc802c0c385_rw_3840.jpg?h=a0f1852ea6373e2669b4f807df2bde6b)
Savings Account
![Credit Center Account View](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/3884d91f-0b35-44a9-842e-75013a0e43a7_rw_3840.jpg?h=e88c514cbb3a3f49c221fd8126a9d285)
Credit Center Account View
![Credit Center Transactions View](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/f0e3c050-61d5-43f5-aafd-8c4cd62d3a5b_rw_3840.jpg?h=da55dd73605c6245e9423ea1f546da43)
Credit Center Transactions View
![Investment Portfolio](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/d02b621a-04cc-454d-ae99-cc0fe1d11d60_rw_3840.jpg?h=2a2afc347728b750d732bfb5550bc074)
Investment Portfolio
![BudgetBuddy™](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/03b78118-fbcd-4c01-90f9-f0f516890acc_rw_3840.jpg?h=f717fbb35b8d63ae2579edd2af24fb28)
BudgetBuddy™
![Message Center Inbox](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/9ac38455-cae6-4a87-8022-775c229f5adc_rw_3840.jpg?h=942b3dbea40b8f49a0d8f7b89ea4a729)
Message Center Inbox
![Message Center Compose](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/b9bc32ee-9c2b-4074-b9d2-6ac56bd24800_rw_3840.jpg?h=c2b9b8e67548bf7a02d0f6c8b512952e)
Message Center Compose
![Transfer Funds](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/530ea17d-830a-4748-974d-29c2d3b481da_rw_3840.jpg?h=a024d1460b1d9675d00333814e3cbc54)
Transfer Funds
![Loading Screen](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/48eb590b-28a8-49ba-92a4-0f6eca7a7aad_rw_3840.jpg?h=0eb0e4bd932fbda079fce375a04db959)
Loading Screen
![Open New Account](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/d9177c07-5343-45df-a439-91f6bc2eef9e_rw_3840.jpg?h=0312b21d3fdeb363d73370b84a5655bc)
Open New Account
![Settings](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/166b111c-1c29-4aea-a18d-1083c475f841_rw_3840.jpg?h=0409ba482868bb350c4116e07cfd1202)
Settings
![Help/Contact](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/b014ad2d-37b6-404e-87df-4780484b3d21_rw_3840.jpg?h=1d2365cd4c19fafa83553ded5574b7d5)
Help/Contact
![](https://cdn.myportfolio.com/6d751100-8834-45dc-a584-d9f59779ea92/1481a0be-7431-48da-9dee-7573f4448a53_rw_1920.jpg?h=32761bc8bec9823a9794ec4bfc0bfdf8)