large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<a href="https://designmodo.com/oversized-typography/">medium bookmark / Raindrop.io</a> | 

				<a href="https://designmodo.com/design/">Design</a> • May 17, 2018 • 0 Comments 			
The goal of any portfolio site is to showcase your work. That’s a given.
But you also want to sell your work in a way that grabs attention. You can do this with visuals, or by focusing <a href="https://designmodo.com/better-content-first/">just on content</a>. Or by designing large typography that gets people reading into your site.
Not every portfolio can work with large typography. I typically find this works best on portfolios for developers or writers, but can also work in smaller blurbs for designers too.
Regardless of what type of portfolio you’re building, this post is full of ideas for designing oversized typography that’s guaranteed to keep people engaged and glued to your site.
<h2>The Headline Is King</h2>
In the SEO world there’s a saying that “content is king”. Generally this is true.
But when talking about a page design I’d argue the headline is king. The very first text the visitor sees will define whether they stick around to keep reading or whether they immediately close the tab.
You should try to design oversized headlines for your site, but not have them too large to overtake your content(ie. your work).
<a href="http://mikedekker.com/"><img src="https://designmodo.com/wp-content/uploads/2018/05/01-mike-dekker-typography-portfolio.jpg" alt="The Headline Is King"></a>
Take a look at <a href="http://mikedekker.com/">Mike Dekker’s site</a> to get an idea of what I mean.
The homepage header does use very large oversized type. This helps to sell the website’s purpose(a personal site with the site owner’s name) along with some details on the site(his description).
Right from the first pageload you should know enough about Mike to decide if you want to dig deeper into his portfolio. With this type of text you need great copywriting skills, but that comes naturally with practice.
Another alternate style is the portfolio of <a href="http://tobiasahlin.com/">Tobias Ahlin</a>.
<a href="http://tobiasahlin.com/"><img src="https://designmodo.com/wp-content/uploads/2018/05/02-tobias-ahlin-typography.jpg" alt="Tobias Ahlin"></a>
This uses various headlines throughout the page to break up the layout and grid structure. You can use big headlines like this when showcasing your work to bring attention to your favorite projects.
I can’t tell you exactly how to structure your page headings. Each portfolio will be different.
But if you go with oversized typography make sure that your heading text is grabbing people’s attention.
<h2>Try Personal Greetings</h2>
One thing I like about copywriting on the web is variety. You can design a stuffy corporate website one day, then go the complete opposite with your personal site the next day.
For example <a href="http://mrcthms.com/">Marc Thomas</a> uses the “personal greeting” style with his oversized header.
This creates a sense of engaging with the viewer and bringing them into a digital conversation.
<a href="http://mrcthms.com/"><img src="https://designmodo.com/wp-content/uploads/2018/05/03-marc-thomas-website.jpg" alt="Try Personal Greetings"></a>
If you can write in a <a href="https://www.copyblogger.com/how-to-write-conversationally/">conversational tone</a> then you’ll have no trouble designing these types of headlines.
They grab your attention fast and keep you engaged with the content all the way till the end.
Now <a href="http://trentwalton.com/">Trent Walton</a> has something similar on his site, but instead of a direct greeting it explains more about what he does.
<a href="http://trentwalton.com/"><img src="https://designmodo.com/wp-content/uploads/2018/05/04-trent-walton-website.jpg" alt="Trent Walton"></a>
Every time a visitor lands on your site they should know what you do. There’s nothing worse than being confused and annoyed when visiting a portfolio of a company(or person).
My preferred style is to pick either a strong greeting header or a strong intro header. You can do both, of course, but it’s good to make one of those headers stand out above the other.
<a href="http://bepatrickdavid.com/"><img src="https://designmodo.com/wp-content/uploads/2018/05/05-patrick-david-homepage-typography.jpg" alt="Patrick David"></a>
I’m a big fan of <a href="http://bepatrickdavid.com/">Patrick David’s website</a> and his style is superb. The oversized typography is really just one part of the whole <a href="https://designmodo.com/learn-the-basic-elements-of-visual-design-go-for-the-right-composition/">composition</a>.
<h2>Draw Focus To Your Text</h2>
If you have large typography then you’re clearly looking to grab attention. You can do this even better with bright colors, icons, or something that screams “hey look at me!”
The <a href="http://www.getfinch.com/">Finch</a> portfolio site is widely known for its fantastic design by Francisco Inchauste.
<a href="http://www.getfinch.com/"><img src="https://designmodo.com/wp-content/uploads/2018/05/06-finch-portfolio-dark-contrast.jpg" alt="Draw Focus To Your Text"></a>
If you look over the text you’ll notice there’s a bunch of type with alternating color schemes. Not to mention the small name label underneath the header actually highlights the different letters in “finch”.
Think about <a href="https://designmodo.com/contrast-meaning/">contrast</a> and how it plays a role in your design.
Text size is one way to create contrast. But you can do this through many other means all with basic CSS properties.
<a href="https://www.werkstatt.fr/en/"><img src="https://designmodo.com/wp-content/uploads/2018/05/07-werkstatt-website.jpg" alt="Werkstatt website"></a>
You’ll find a totally different example on the <a href="https://www.werkstatt.fr/en/">Werkstatt website</a> using animations and sliding panels to grab your attention.
If typography is crucial to your portfolio then try sprucing it up. Even one additional color can go a long way to getting more eyeballs stuck on your site.
<h2>Use Larger CTAs</h2>
I’ll admit that not every portfolio needs <a href="https://designmodo.com/cta-button/">CTA buttons</a>. Yes they are useful for encouraging user actions, and yes they’re pretty simple to add.
But what if you don’t need many user actions? Would a CTA still be worth it?
I say yes, but only if you’re looking for work or want to encourage communication through a <a href="https://designmodo.com/contact-web-form-designs/">contact form</a>. Same goes for anyone with a portfolio who also runs their own newsletter.
<a href="https://rareview.com/"><img src="https://designmodo.com/wp-content/uploads/2018/05/08-rareview-cta-design.jpg" alt="Use Larger CTAs"></a>
The <a href="https://rareview.com/">Rareview</a> website uses lots of big spacious buttons for links in their content. You’ll find a bunch of these on the homepage following various case studies.
Most of these designs follow the <a href="https://designmodo.com/ghost-buttons/">ghost button trend</a> which is pretty popular nowadays. You can use this similar style if you want to create a minimalist layout for your page.
But I also like the style of <a href="http://www.jib.ca/">Jib</a> and their red CTAs.
<a href="http://www.jib.ca/"><img src="https://designmodo.com/wp-content/uploads/2018/05/09-jib-ctas-design.jpg" alt=""></a>
If you scroll down towards the small buttons on “want more engagement?” you’ll notice those buttons jump out right away.
I’d argue Jib could increase leads by changing the button colors to something else unique to the design. It’d be tough to blend in, but usually people are drawn to different colors. That’s how you can combine oversized type with color choices to really up engagement.
Still, their oversized typography has to play a pretty big role in these CTA designs and that may be enough for your portfolio too.
<h2>Moving Forward</h2>
The key to a great portfolio site is usability and clearly showcasing your work. Text will be a big part to some degree and it’s your choice on how to format that text.
Oversized type will always draw attention so it’s a pretty reasonable style to start with.
Try following these tips on your portfolio site and blend them with your own ideas to see what comes out.
<div><a href="https://designmodo.com/oversized-typography/">https://designmodo.com/oversized-typography/</a></div>

Designing a Portfolio Website with Oversized Typography

Designing a Portfolio Website with Oversized Typography

Top Stories