1stWebDesigner https://1stwebdesigner.com Helping You Build a Better Web Mon, 05 Nov 2018 09:07:03 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.8 How to Pick the Right Design Projects https://1stwebdesigner.com/how-to-pick-the-right-design-projects/ https://1stwebdesigner.com/how-to-pick-the-right-design-projects/#respond Mon, 05 Nov 2018 09:07:03 +0000 https://1stwebdesigner.com/?p=140765 As your freelance design career progresses, you’ll be presented with many project opportunities. But one of the hardest aspects of being in business is learning to pick the right projects for you.

There are several reasons for this. First, we tend to be trusting of others when they’re telling us about their needs. Second, saying “no” to anyone can feel like we’re going against our instincts (who turns down a paycheck?). And third, you never quite know exactly how a project will go. Predicting the future, as it turns out, isn’t a sure thing.

Still, there are some things you can do to increase your odds of being right. The goal is to ensure that you’re taking advantage of the best opportunities that come your way.

So, how do you know when a potential project is the “right one”? Ask yourself the following questions:

Does the Client’s Idea Sound Realistic?

One of the first considerations for signing onto a project is the client’s take on reality. You will usually find that the best projects come from those who are realistic. Their ideas and goals are smart and attainable.

Occasionally, you’ll run into someone that thinks big. They want to turn the world on its head and make big money while they’re doing it.

There’s certainly nothing wrong with having lofty goals. But don’t mistake an ambitious person for one who’s detached from reality. These people will talk of all the money they’re going to make, yet won’t be able to pay you much (if anything) for your initial efforts. Instead, you get promises of a large payout once their pie-in-the-sky idea is a success.

Think of it this way: If this person is really serious, they’d probably have enough funds to pay you fairly. Asking you to jump in head first to make their dreams come true isn’t at all realistic.

Therefore, it’s up to you to be a bit of a cynic. You don’t want to come off as rude or dismissive, but you should ask the tough questions. As in, “Where’s the money going to come from?”

Better yet, if the idea sounds like a lot of hot air, politely remove yourself from the situation. Most likely, you will save yourself a lot of frustration.

Notebook with a bar graph.

What Kind of Work is Involved?

It may sound a bit silly, but sometimes it’s easy to ignore the actual work that needs to be done. You can get all caught up in simply accepting whatever the client needs because, well, that’s what you’re supposed to do. Not so fast.

Early in my career, I felt like it was my duty to do whatever a client asked. So, I took just about every project that came my way. This was so very wrong. In short, it led to a lot of misery.

Web designers are creative professionals, not hardware stores. We need to put ourselves in the best possible position for success. Pretending to be a jack-of-all-trades doesn’t fit with that mission.

So, if you don’t like data entry (and can’t hire someone to do it for you), then that project isn’t for you. Likewise, if someone asks you to work with a CMS you hate or other various grunt work that does nothing to move your career forward, walk away. Unless you’re in dire financial need, you’re under no obligation to take the project.

Instead, consider the type of work involved. If it’s something you enjoy, the results are bound to be better because of it. Plus, you’ll be able to proudly display it in your portfolio.

Woman working on a laptop compute.

What Will the Future Hold?

Remember all that talk about predicting the future? It’s still not a sure thing. But you can reasonably predict the potential regarding your future involvement with a project. The real question is whether or not that is something you actually want.

For some designers, the lure of extra revenue down the road is welcomed. Knowing that you’ll receive some steady cashflow from monthly or yearly maintenance packages can really help your business.

Then there are those who are more comfortable just handing off a website to their client with a polite wave goodbye. After all, there is a certain burden that comes along with maintenance – especially if it’s not something you enjoy doing. And, just maybe, a long term relationship isn’t your thing, either.

Regardless of where you fall on the issue, it’s important to find out where your potential client stands. It’s worth the effort to ensure that everyone’s expectations and wishes are out in the open. Once you know what type of situation they’re looking for, you can respond accordingly.

Chalkboard with "What's Next" written on it.

Choose Wisely

Being a freelancer affords you the freedom to work the way you want. That means that you don’t have to jump on every project that comes your way. In fact, you have the right to be as picky as you like.

So, before you break out the contracts and handshakes, take some time to really think about the project in front of you. If it’s a great fit, then go for it. If not, there’s always next time. Either way, you have the power to decide for yourself.

https://1stwebdesigner.com/how-to-pick-the-right-design-projects/feed/ 0
Keeping Your Website Design Consistent https://1stwebdesigner.com/consistent-web-design/ https://1stwebdesigner.com/consistent-web-design/#comments Sat, 03 Nov 2018 11:30:32 +0000 https://1stwebdesigner.com/?p=130939 The last word you may want a user to associate with your website is “predictable.” This term has a negative connotation in the business world and makes you think of a brand that is boring, unexciting, and identical to its competitors.

Yet to a degree, users expect and rely on the predictability of a website. At its most basic level, a website should be predictable – it should function like all other websites, at least to the point where your user does not struggle to make sense of the interface. Otherwise, your think-outside-the-box strategy might throw users off.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

Think of your website like a car. While consumers react positively to creative, innovative ideas that boost the user experience, for example, touch screen infotainment systems and massage chairs, they may not be keen on a brand that tries to completely revolutionize the way vehicles operate, such as one that places the steering wheel in the backseat.

Features along such lines can seem less user-friendly and more gimmicky, designed simply for the “wow factor” – a move on the brand’s part that users would likely not respond to well. Your website must prioritize usability and the user experience above all else to maintain its popularity – and your brand’s credibility.

The solution is to balance predictability with intrigue. Maintain certain elements your users cannot go without, such as menu options and content. Your users must be able to navigate your website with ease or else they will click away. Yet predictable does not have to mean boring.

For instance, some websites are beginning to integrate virtual and augmented realities into the UI. Designers can get away with this progressive idea by making it simple for users with VR-supported browsers, and doing it for the users’ benefit – by letting users view products up close in VR from their homes before making a purchasing decision, for example.

Maintain Internal Consistency

Achieving predictability and creativity is possible by maintaining internal consistency on your website. Marry a logical flow with your interface that may allow slight variations to keep your users intrigued. Add your own flare and innovations, but keep your primary functional elements consistent and comprehensible.

It is intuitive for users to click on a link or a highlighted section of a page, and you can assume they will access your homepage. From there, the user instinctively knows that clicking on other menu options will lead to the content they desire. The user’s intuition is what makes fast website use possible. Do not underestimate it. Creating a website that takes effort to navigate will end badly for your brand.

The consistency of Mozilla design.

The consistency of Mozilla design.

Achieve internal consistency with accepted UI design patterns. These are standard design elements your user expects to encounter on your website. Patterns can include navigation options, a search feature, a place to input user data, and links to social media accounts.

UI design patterns can be standard or persuasive. Persuasive UI design engages users and encourages them to take certain actions, such as subscribing to a mailing list or taking the next step in the sales process. Both types of UI design have accepted standards and guidelines that make them work in the company’s favor.

Simplify Your Site

One of the easiest and most rewarding ways to master UI consistency is to keep your website’s design simple. Again – simple does not have to mean plain or boring. It means a clean, easy-to-use website that your users can navigate in seconds. Go with a simple visual design to optimize consistency and get brownie points with Google. That’s right – Google rewards sites with simple designs, because these are the sites users deemed “most beautiful” in a 2012 study.

The beautifully simple  ArtQuality.com.br layout.

The beautifully simple ArtQuality.com.br layout.

In the five years since this study, this conclusion has held up. Users still prefer simple websites to those that are visually complex. Existing accepted standards for website layouts limit what you can do at this stage of the design process, but this is a good thing – you can only change the standard layout so much before you cross the line into visual complexity. Instead of trying to reinvent the wheel, impress your users with how you use your simple layout.

For example, look at the stunning visuals on FeedMusic.com. It appears you are in a beautiful, swirling miasma of space dust on the homepage. Every page you scroll through (Feed also uses a unique navigational system) showcases another eye-catching, high-definition visual. Using graphics in new and exciting ways can bring a simple layout to the next level, while still maintaining the UI people have come to depend upon. It is possible to stay consistent and make waves in your industry with creative, original UI design.

The FeedMusic.com homepage.

The FeedMusic.com homepage.

Keep Content Cohesive

One of the most crucial elements to keep consistent is your content. Your brand must maintain a constant tone, voice, and quality across every page. Any mistakes or oversights in this regard can lead to users assuming your site has spammy content or that the brand doesn’t care about its users – both bad news for your business.

Your content should reflect the overall mood of your site and complement your design. It should also match what your users are looking for when they come across your company. Your content should not only exude consistency in the words you write (or the videos you post), but in how often you post new articles. On your website’s blog and social media accounts, consistency in content will pay off handsomely in site traffic and potential conversions.

Create Uniformity among Site Elements

The goal with your website should be to reduce user learning while piquing their interest. This can sound like a conundrum until you realize that when you keep the major UI design elements uniform, you have the freedom to play with the rest of your site. Consistency in the bones of your website gives you wiggle room with the rest of the body. Here are site elements to keep consistent across the board:

  • Typography size
  • Whitespace
  • Color palette
  • Brand logo and visuals
  • Size of site elements
  • High-resolution imagery
  • Button colors
  • Navigation menu
  • Headers, footers, and sidebars
  • Clickable elements

This is an idea of what elements your users want to remain consistent from page to page to facilitate easy navigation. Use common sense here – changing the location of your sidebar from page to page would only confuse users and probably lead them to click away.

UI Style guide by Alex Gilev.

Keep in mind that your users will not be as familiar with your site as you are. Look at your design elements from an outsider’s perspective – do your elements make sense and work together as part of a larger picture or are they scattered and confusing?

The Takeaway

At the end of the day, consistency always wins the UX and UI game. No matter how beautiful the imagery, how excellent the content, or innovative the theme, users will not stay on a site that is too complex or confusing.

Avoid this by keeping your site seamless and easily digestible. You are free to experiment but within the boundaries of what the current web user deems acceptable. Broaden your horizons, but only if it will bring something of value to your target audience.

Remember – your users should be at the heart of every website design decision you make. With this in mind, design consistency and efficiency should become second nature.

https://1stwebdesigner.com/consistent-web-design/feed/ 1
10 Popular Website Interfaces Reimagined on CodePen https://1stwebdesigner.com/popular-website-interfaces-reimagined/ https://1stwebdesigner.com/popular-website-interfaces-reimagined/#respond Sat, 03 Nov 2018 06:21:21 +0000 https://1stwebdesigner.com/?p=136643 Redesigning a popular interface is a great way to improve your skills.

Whether you want to hone your mockup design skills or craft your frontend prowess, a fancy redesign is a solid practice project.

It’s easy to search Dribbble and find tons of website redesigns as static images. But it’s not so easy to find similar redesigns in code.

That’s why I took a dive into CodePen’s archives to find these 11 custom interfaces that reimagine popular sites. You’ll find designs for Twitter, IMDb and even a few other notable websites you might recognize.

Google Search Redesign

The infamous Google search page gets billions of impressions per day. Actually 3.5b per day, to be exact.

So that page needs a design that’s on-point. If you’re redesigning something, there is a bit of room to have fun with it and that’s the idea behind this pen.

It’s a simple Google page redesign focusing just on the search input field. It features a bright, colorful button with drop shadow effects that you’d never see from Google’s design team.

The result is a fun way to reimagine search.

Gmail Application

Google fans will probably enjoy this reimangined Gmail in a similar vein as the last pen.

But this one features a full Gmail interface – so it’s a little more detailed.

Clicking through the sidebar animations, you’ll notice that they really do animate smoothly. Not to mention the sleek material design color scheme.

If you’re a frequent Gmail user, you may even prefer this redesign over the current style.

Google Branded Redesign

Here’s another Google redesign I wanted to throw in. This one’s a little more detailed with links for Google’s entire set of tools.

This pen by Mohamad Reza Deylami features a redesigned Google logo, altered color scheme and links to all of their different search features.

I think it’s a bit more complex than the current page – so I wouldn’t take it over Google’s design.

What I do like about this redesign is that it’s unique and it stays true to the Google style. Oh and all the code is open source, too.

Twitter UX

Twitter has a bunch of UX features spanning their desktop and mobile interfaces. One popular design style is the card interface, which you can see in this pen.

It’s a reimagining of Twitter’s UX with a smaller card design.

This includes a scroll bar along with buttons for editing your profile. And when you scroll down, there are even placeholders for the tweets. How cool!

Modern Twitter Redesign

Now for something a little more technical, have a peek at this Twitter redesign.

This thing is monstrous and it really does flip the Twitter interface on its head. I actually recommend studying the design in full view to see how it looks in your browser.

I love the menu, love the timeline and really love the simple hover/focus effects. The only thing missing? This isn’t a responsive page.

But in all fairness, Twitter does have a mobile-specific layout aside from the main desktop design. So they handle mobile users differently, too.

FreeCodeCamp Homepage

Developers love FreeCodeCamp for its endless support of new developers and for its friendly approach to charity.

CodePen user Giana must really love the site since they created a full redesign of the FreeCodeCamp homepage.

I can’t really say if it’s a better or worse design. It’s awesome in many ways and also very different. It’s worth a glance if you’re familiar with the original layout.

Spotify Artist Page UI

The Spotify web layout is another widely-known interface and Adam Lowenthal took it upon himself to recreate the Spotify artist page.

Most of the features don’t fully work – so you can’t stream music. But the actual page elements are real, so you could copy/paste this code to mix up your own HTML audio player.

Plus, the whole thing is mobile responsive. So that’s nice.

Unsplash Redesign Stuff

I can’t say that this redesign of Unsplash is better than the current homepage. But I do think it’s a creative reimagining of how the layout could look focusing on a different structure.

This pen still has the same grid system but developer Kyle Shanks also places a focus on the email capture box and the dropdown navigation menu.

It’s super clean and super easy to rework if you’d like to edit this for your own site.

IMDb Concept

Not everything in this IMDb redesign is functional. That’s the downside here.

But the upside is this design really looks spectacular. It’s absolutely phenomenal and would probably work well as a web-app for touchscreens.

Take a peek at the full view to really see how it all comes together on the page.

LinkedIn Redesign

Over the years, LinkedIn has cluttered their layout with so many extra features. I’m really a fan of minimalism and that’s what I see in this redesign by Nahom Ebssa.

Simple colors with an easy-to-use interface. Many elements even borrow ideas from the material design language.

Granted, the layout doesn’t seem 100% finished – but I think it’s a really nice template.

If you want some HTML/CSS/JS practice, maybe fork this one and try adding your own features.

YouTube Redesign

For another design that’s not totally done (but still looks amazing), I have to recommend this YouTube redesign.

It really does look a lot cleaner than the modern YouTube homepage. Granted, some of the images won’t load but you still get the gist of the layout. It’s also 100% free of JavaScript, which is pretty awesome.

None of the links or buttons work – so it’s not usable. Still, this is a brilliant attempt to bring YouTube’s design forward with a much more focused UI.

https://1stwebdesigner.com/popular-website-interfaces-reimagined/feed/ 0
The Keys to Advertising Your Web Design Business https://1stwebdesigner.com/keys-advertising-web-design-business/ https://1stwebdesigner.com/keys-advertising-web-design-business/#respond Fri, 02 Nov 2018 06:21:27 +0000 https://1stwebdesigner.com/?p=136569 If you’ve just started a new business, congratulations! Once you have your site up and running, now comes the real challenge: advertising. You may not even know where to begin, so here’s a quick guide on how to spread the word and get your name out there.

Advertisement Banners

One of the easiest ways to advertise your business is with an online banner. These little rectangles don’t pull in many clicks, but they’re cheap. It can help immensely to advertise on relevant websites, and people may remember a good ad even if they don’t click right then.

You can use a service like Google Adwords, Facebook Ads or BlogAds. Just make sure to design a banner that’s memorable – not annoying or distracting. You are a designer, after all!

The Freelance Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

Social Media

Want to know the best part of social media advertising? It’s free, assuming you don’t hire someone to do it for you! It’s also surprisingly effective. Generic social media accounts may fail, but if you put a bit of personality behind it, you‘ll find your business soaring. Interact first, promote your business second.

Take time to share curated content, partner with other businesses, share fun but relevant videos and images, give a behind-the-scenes look into web design life and use personal branding; people trust the individual more than the business.

Social Media


Get your business listed in a directory. Yelp, White Pages, Foursquare and any other relevant site you think will help. Many of these are free, so do your research. Don’t forget Google My Business, which adds a helpful little box on the right of search results that lists relevant information.

Email Marketing

Email marketing is highly effective – when done correctly. If done incorrectly, the only place you’ll be marketing to is the spam folder.

So grow your email list in legal ways, not by purchasing lists, but by offering an incentive for people to give you their info. Coupons, tips, eBooks, the list goes on. Personalize your emails so they get sent to the right people. Customers who’ve used your services before could get special rewards, while you can focus on converting those who haven’t. Autoresponders can automate the whole process.

Here’s a more in-depth guide if you’re confused. Email marketing services include Campaign Monitor, MailChimp and AWeber.

Email Marketing

Create a Portfolio

Of course your website itself should show off your skills, but you may wish to create a portfolio page or even a separate site. This can display the extent of your creativity, or use testimonials from past clients and examples of your work. Visitors will be hooked.

In Person

The last way to directly market your business is in-person – get your business cards ready and get out there! Attend seminars, conferences, events and try to secure a chance to participate if you can. Otherwise, it’s a learning experience.

Just remember business card etiquette. Don’t run around throwing cards at people; wait until you’re asked for it. Make sure to follow up with any businesses you exchange cards with. You might just end up with a partnership!

In Person

Say No

While not exactly a marketing tip, this is very important for designers to understand. Sometimes, you need to turn down a client. If you’re not comfortable, they’re overly demanding, or they aren’t paying their invoices, professionally turn them down and swallow the negative review. (Some review sites may allow you to respond with your side of the story, but be civil and calm.)

A new business, of course, often doesn’t have this luxury. You may need to deal with a few unpleasant clients. However, always be firm about getting paid – don’t work for free or get scammed out of money!

Getting the Word Out

Whether you have no advertising budget or are willing to spare any expense, you should have at least a few options. Social media, directories, portfolios and email marketing are often free – so start there if you don’t know what to do. Now that you know how to advertise your design business, which of these methods will you use?

https://1stwebdesigner.com/keys-advertising-web-design-business/feed/ 0
10 Beautiful Examples of Motion Design in Web Design https://1stwebdesigner.com/motion-design-web-design/ https://1stwebdesigner.com/motion-design-web-design/#respond Fri, 02 Nov 2018 06:20:23 +0000 https://1stwebdesigner.com/?p=133542 Motion design has seen a substantial rise to prominence within the web design industry over the last few years. Most landing pages and award-winning website designs incorporate some aspect of motion, whether that be through illustrations, video, animated GIFs, or even subtle custom emotes.

Some websites even use motion design with their products, for example Apple who use vertical scrolling as a trigger for applying motion to their product mockups.

There are some remarkable examples which show just what can be achieved when applying elements of motion design to a website. In this article we are going to round up a selection of the very best.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets


Pipefy Motion Design in Web Design

Pipefy uses motion design in the hero section of its website. It displays a user interface demo of their product with a hypothetical user interacting with and showcasing the platform.


Figma Motion Design in Web Design

Figma’s main selling point is design collaboration. As such, it demos this using effective screen capture video footage in the hero section.


ZenDesk Motion Design in Web Design

ZenDesk’s Answer Bot is demoed on their website using a minimal and simple example of motion design.

Museum of Science + Industry

Museum of Science + Industry Motion Design in Web Design

The Museum of Science + Industry uses motion graphics and video in the hero section of their website to illustrate each active exhibition. It adds a great deal of visual interest and effect.


Adidas Motion Design in Web Design

Adidas Climazone’s landing page uses motion design via user scrolling as the trigger. As the the user makes their way down the page the graphics and images morph and change.

Stripe Sigma

Stripe Sigma Motion Design in Web Design

In possibly the most impressive example of all, Stripe uses motion design in multiple instances. The hero section uses a video to illustrate the product in action, while below a scrolling ticker of FAQ cards makes its way from right to left, changing color over time.


Snappd Motion Design in Web Design

Snappd’s homepage scrolls through a selection of video stories. When one lines up with the iPhone mockup, it triggers the video to play.


ZKIPSTER Motion Design in Web Design

ZKIPSTER uses one of the more traditional implementations of motion design: a full size background video. It does so with great effect, applying a filter on top for greater contrast and subtlety.


Shopify Motion Design in Web Design

Shopify uses motion through its product imagery. In this instance, the user’s scroll location is used as a trigger to expand the product mockup and reveal its complexity within the simple design.

An Interesting Day

An Interesting Day Motion Design in Web Design

The ‘An interesting Day’ website applies motion by implementing a parallax effect which tracks the point of the user’s cursor to produce a depth effect. It’s subtle but highly effective and satisfying to experience.

https://1stwebdesigner.com/motion-design-web-design/feed/ 0
10 Beautifully Designed Web Design Agency Sites https://1stwebdesigner.com/web-design-agency-sites-inspiration/ https://1stwebdesigner.com/web-design-agency-sites-inspiration/#respond Fri, 02 Nov 2018 01:05:50 +0000 https://1stwebdesigner.com/?p=134463 Web design agencies are tasked with the tough assignment of producing a site design that communicates their skill levels through various visuals and elements. They are often judged as much on their website design as they are on their portfolio of work. It’s a critical aspect of generating work and conveying a high level of design skill.

As such, agency sites are often meticulously designed with even the very smallest of details being paid considerable attention to. This, in turn, means that the sites present some of the most forward-thinking and exciting designs in the web design industry.

In this article, we are going to round up ten of the most beautifully designed and polished web design agency sites around today.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets


 Web Design Agency Sites Inspiration

R&D’s agency website combines a spacious layout with a unique and vibrant green background. This contributes to the visual impact and makes for a memorable website design.


 Web Design Agency Sites Inspiration

Mast’s website is very minimal but uses beautifully composed imagery and overlapping navigation elements.

A Day Out

 Web Design Agency Sites Inspiration

This agency website by A Day Out is incredibly unique and impactful. It uses large cutouts with plenty of imagery and large capitalized typographic elements.


 Web Design Agency Sites Inspiration

Lg2’s website implements an unusual navigation layout which spans the border of the central content area. The animated visuals within the ‘2’ are an eye-catching addition.


 Web Design Agency Sites Inspiration

Mathematic’s website is highly-focused on visuals. The slider spans the entirety of the hero section, creating an immersive experience perfect for showcasing their work.


 Web Design Agency Sites Inspiration

This website from Phoenix offers one of the most unique layout directions of all. The typography is seemingly sporadic but provides great effect as it overlaps the rotating imagery.


 Web Design Agency Sites Inspiration

2LG’s agency website uses an immersive loading graphic which consists of their logo overlaying a colorful image. The site then transitions seamlessly into a refined homepage with minimal graphics and typography.


 Web Design Agency Sites Inspiration

This agency site design from Designgoat is similarly sporadic in the way it has approached its laying out of imagery. The result has a brutalist-style feel to it and offers a beautifully unique look when combined with the red highlights and text.

Gin Lane

 Web Design Agency Sites Inspiration

Gin Lane’s simple website uses beautiful serif type against a muted gradient background. The hero leads perfectly into the rest of the homepage design.


 Web Design Agency Sites Inspiration

P22 has approached its agency web design with a combination of minimalism and brutalism. The bordered logo text is attractive and counters the filled typography used in the remainder of the monochrome design.

https://1stwebdesigner.com/web-design-agency-sites-inspiration/feed/ 0
Stand Out with These Free Resume Templates https://1stwebdesigner.com/free-resume-templates/ https://1stwebdesigner.com/free-resume-templates/#respond Thu, 01 Nov 2018 08:21:32 +0000 https://1stwebdesigner.com/?p=140338 Creating the perfect resume isn’t easy, but a great one is all but required to land a job. While your skills and experiences are what really counts, if you fail to exhibit them well, it won’t matter. It’s all in the presentation! And if your experience is lacking in some areas, a well-crafted resume can make a huge difference. So, it’s important to craft a something that will help you nail that dream job.

But it’s not that easy to just make a great resume from scratch. So, we’ve compiled some amazing resume templates – great whether you want to add your own unique touch or use them as-is.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets



Tired of resume templates that don’t work in the program you like? Hloom has templates for Word, OpenOffice, Google Docs, Photoshop, Adobe InDesign and LaTex! Whether you like the old-fashioned Microsoft Word or do your resumes in an art program, Hloom has something for you. Each type of resume (simple, modern, portfolio) has its own library, too. There are hundreds of templates to try, so start browsing!



There are all sorts of Word resumes available on this website. There are resumes with stylish dark themes, bold colors, room for a portrait, icons, interesting layouts and more! And of course, you have your typical basic resume with just enough design flair to make it interesting to look at. Hand in one of these resumes if you want to stand out from the crowd, even if subtly!

26+ Best Resume Formats

26+ Best Resume Formats

Here’s a sweet list of unique resumes that can suit just about any situation. They’re in all sorts of formats including Adobe InDesign, PDF, Doc and more! Teachers, engineers, students and anyone can find a template they love in this list.

Resume Genius Templates

Resume Genius Templates

These simple but effective templates really pack a punch. Each one follows this core principle: A resume’s job is to convey information efficiently. A few colors, easy-to-read sections, and perfectly formatted text makes for elegant resumes. There are even Mac OS X optimized versions in each bundle! In short, these templates get the job done (and get you the job).

Canva Templates

Canva Templates

Canva has thousands of templates for just about anything, and job resumes are no exception. Just use Canva’s extensive online editor to easily replace text and add sections. Then, export to PNG, JPG or PDF for printing. These resume templates are creative, colorful, and beautiful – sure to catch anyone’s eye.

Office Templates

Office Templates

Where better to get your templates than from Microsoft itself? These resumes are simple and functional – they do exactly what they need to do, many of them with little fanfare. If you don’t want your information hidden by unnecessary design, or just don’t want to wrangle with third-party templates, use one of these.

Super Resume

Super Resume

There’s no wasting time here. Pick from twelve clean resumes, hand-crafted from professional resume screeners. Fill out the template online, do some simple formatting and download it in PDF, Word Doc or even HTML format. And you’re finished! No premium nags or online editors with hundreds of confusing buttons. Just fill out each section and download.



Behance is an Adobe-run website that offers a variety of user-made graphics – including resumes. Because the website’s content is entirely controlled by users, what you’ll find (as well as its quality) is highly variable. What’s for certain is that there are a lot of resumes to find – more than any other kind of website could possibly offer. Somewhere in there is your dream resume!

Get That Job!

A good resume greatly improves your chances of getting a job, so make sure you pick one that suits you! Use them as they are or build on them to create something that represents you. Either way, your shot at getting a job interview is much higher with a well-crafted resume.

https://1stwebdesigner.com/free-resume-templates/feed/ 0
Promote Yourself with These Free Business Card Templates https://1stwebdesigner.com/promote-yourself-with-these-free-business-card-templates/ https://1stwebdesigner.com/promote-yourself-with-these-free-business-card-templates/#respond Tue, 30 Oct 2018 08:48:17 +0000 https://1stwebdesigner.com/?p=140266 When you’re creating a business card, it’s imperative that you nail the design. This little piece of paper is the face of your business, and often a first impression of you and your company! It’s not something you’ll want to just throw together in Photoshop.

But you can make a professional business card that looks great by yourself! If hiring a card designer takes too much out of your startup costs, or you’d just rather have full creative control, business card templates are exactly what you’re looking for.

You can create and personalize a card without having to design one from scratch. Here are a few of the best free business card templates that you can find online, compiled just for you.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

Graphic Design Junction

Graphic Design Junction

Not everything on GDJ is free, but there are quite a few freebies to be found if you’re willing to dig. This is some high-quality stuff and easy to edit, too! Many of their graphics are made with easily-resizable vector shapes, trim marks or “safe zones” – so you know where to put the important text. A few pre-made designs are available to try out, as well.

Here we collected a few of their business card freebies. Check it out!



Freepik has a bundle of PSD files that are free for any use, with attribution. These business cards look great, especially if you’re looking for a tech-focused design. Many of these templates use dark themes with abstract elements. But if you’re looking for something modern, stylized, or simple, there’s a card for everyone in here.

It was hard to pick just a few examples from all the great designs!



With nearly 12,000 designs, there’s no way to pick just one from this list. Canva is an online program that allows you to create elegant designs for a variety of categories, each with thousands of hand-crafted templates. You can even browse by business type!

Here’s just a few cards that web designers might enjoy.



Not sure where to begin with business card dimensions? Want a completely blank sheet to work with? Avery’s templates give you the correct dimensions, color and cards-per-sheet. So, it’ll look great when you’re ready to print.

Otherwise, these cards are a blank canvas. They can be downloaded in six formats. You can also edit your business card if you make an account. Plus, you have the option to upload your own pre-made design or pay for professional printing.



PSDFreebies, as the name implies, is chock full of templates for you to download! There are quite a few business cards here, many of them with up to ten different color profiles! A majority of these templates use a modern design with vibrant colors that draw the eye.

The one downside to this website is that you’re required to either share the page on social media or wait a few minutes before downloading. While annoying, you may find the high-quality templates more than worth the trouble.

We’ve collected a few nice templates; here they are!

Professional Business Cards Without the Cost

Starting a business can cost a lot of money. And all those little extras, such as business card design, can pile up expenses quickly. But with these free templates, you can take that charge out of the equation. All you need to do is print!

You may still want to hire a graphic designer later on for an even more personalized and polished business card. But for now, these templates can help you create an acceptable, if not amazing, card that you’ll be proud to hand out!

https://1stwebdesigner.com/promote-yourself-with-these-free-business-card-templates/feed/ 0
Free Styleguide Templates for Your Web Projects https://1stwebdesigner.com/free-styleguide-templates/ https://1stwebdesigner.com/free-styleguide-templates/#respond Sun, 28 Oct 2018 08:06:46 +0000 https://1stwebdesigner.com/?p=140429 Styleguides help you stay consistent when designing a website by collecting color palettes, images, and UI elements into one easy-to-reference place. This invaluable tool is all but essential for web designers. But where to begin in creating one?

These templates will help you get your styleguide set up properly and beautifully, so you can design knowing that each page is consistent.



Building the bridge between web design and development isn’t easy, but Catalog pulls it off with its “living style guide”. The open source project comes with extensive documentation. This is no simple PDF file, but an amazing tool for designers and developers alike.

99designs Brand Guide

99designs Brand Guide

Along with a helpful explanation of what a styleguide is, 99designs provides a visual styleguide with sections for logo, typography, colors and even a spot to talk about yourself! This styleguide is intended to be submitted to clients for review before you start designing.

Free Brand Guidelines Template

Free Brand Guidelines Template

This awesome resource is meant to be given to clients once the project is completed, so future updates to their website can be done without breaking the site’s consistency. Tell them how to use the design elements properly and what not do when they decide to add something later.

Style Tiles

Style Tiles

When you’re struggling to get your clients to choose a mockup they like and spending too much time creating them, Style Tiles may be the solution. It’s an easy way to offer clients a few different choices and discuss how a website could potentially turn out. It’s free and in PSD format, so feel free to try it out!

Style Guide Template Sketch Resource

Style Guide Template Sketch Resource

Do you use Sketch app? Then you’ll definitely want to check out this styleguide template! It’s made for small projects and beginner web designers, so try it! It’ll work great for your Sketch project.

Cool Blue Brand Book

Cool Blue Brand Book

This elegant styleguide was made for print! Easily edit in Adobe InDesign, Illustrator, or PDF format – then, print it to use in real life. There are various style guidelines covered. If you’re looking for a brand book to print rather than a computer file, this is definitely what you want.

Huge Styleguide

Huge Styleguide

Here’s a fabulous HTML tool by Huge that allows you to create a guide for colors, fonts, forms and more! Use it within your project or independently. Download directly or from GitHub for free. It’s available on both Windows and Mac. No more dealing with pages and pages of PDF files.

Freebie: Brand Style Guide Template

Freebie: Brand Style Guide Template

This Illustrator template is great for personal use or with clients! It’s sized to be printed and includes all the essentials. Logos, tagline, textures and color codes are among the sections to be filled in. There’s even a completed project example so you know what you’re doing.

Station Seven Free Style Guide

Station Seven Free Style Guide

Though created to help bloggers bring consistency to their brand, this tool is great for web designers too! It’s a simple styleguide. But, it’s great if you just want to get the core features of site planning down or have something to show to clients. You just need an email address to access the download.

Consistency is Key

It won’t do to have an inconsistent website. Something as small as using a slightly off background color from the previous page can have an impact. It’s important to keep track of your colors, buttons, and all other elements of your website so that visitors have a smooth experience. Instead of cobbling together these things yourself, use one of these fantastic styleguide templates and take your web design to the next level!

https://1stwebdesigner.com/free-styleguide-templates/feed/ 0
Web Design Don’ts (And How to Fix Them) https://1stwebdesigner.com/web-design-donts/ https://1stwebdesigner.com/web-design-donts/#respond Sun, 28 Oct 2018 06:01:30 +0000 https://1stwebdesigner.com/?p=132005 Now more than ever, a website is the first point of connection between product/content creators and potential users. Because a face-to-face interaction is out of the picture, credibility and connection must be established in other ways. Whether you’re using a web builder, or building things from scratch,.

The best sites or app designs provide users with straightforward navigation, a personal connection and pleasing visuals, but all too many websites fall short. These are some of the most common web design flaws and some ways to avoid them.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

Cluttered Fonts

Some websites seem to operate under the assumption that they might run out of space. All information is packed in using a small font size. This overwhelms users and causes them to check out.

Image Source

Large chunks of text create a phenomenon called “TL; DR”, or “Too Long; Didn’t Read”. Web users have endless choices of what content to consume and want to engage with it efficiently. Here are some tips for avoiding “TL;DR”

  • Instead of crowding all possible information on your front page. Think about what different users might be looking for and separate it into individual pages linked by an easy to navigate menu.
  • When possible, use bulleted lists instead of paragraphs to create an easily scanned page.
  • Use a larger font size. Users are willing to scroll indefinitely if they are engaged, so feel free to take up space.

Photo Faux Pas

There are several ways your website’s images can damage credibility. Corny “clip-art” animations and graphics tell users that you designed your site in the late nineties (this is especially true of any image with a big white square behind it).

The same goes for badly Photoshopped images, low resolution photos and unconvincing stock photos.

  • Use real, high quality images whenever possible. DSLR cameras are easy to find and even smartphones often can take beautiful high resolution images.
  • Use images purposefully and sparingly. Cluttered photos are just as bad as cluttered text. And one meaningful and appealing photo is always better than a big pile of uninspired images.
  • DIY! Personalized hand-drawn illustrations can create a connection with users and make them feel at home. If you are someone that has the skills and access to a drawing tablet, this can be a great personal touch.


In established markets like the United States and Canada, mobile devices are the primary web browsing tool for between 60 and 70 percent of users. In emerging markets like Indonesia it is upwards of 90 percent.

Yet, many websites are still almost impossible to navigate using a mobile device. If upwards of 60 percent of your users can’t easily move through your site, you will lose them to the next listed site on Google. Even if your site is technically usable but difficult to manage, you risk losing visitors.

But there is an easy fix! Website templates for WordPress are cheap and easy to use. Not only do these templates automatically adjust your site for different screen sizes. They have the added benefit of providing access to a whole world of apps and backgrounds that can be plugged right into your site.

Confusing Layout

A good website is a user-focused website. If your users are required to poke through 10 different pages to find what they are looking for they won’t be returning to your site.

All too many websites bury important information at the very bottom of a page or in an area of the site that takes multiple steps to access. Your content should be as easy to reach as possible.

  • Go menu crazy. Great sites often have three menus, one across the top, one down the side, and another that users can open by tapping open. Do whatever it takes to organize as much relevant information on the homepage as you can.
  • New stuff first. A dynamic website is always adding and improving content and that stuff should take center stage. A blog style homepage is a great way to get the most up to date and innovative content in front of users before they start clicking around.

Keeping in mind mobile users, creating a clean and navigable layout and avoiding unnecessary media applications are all ways to create a great website. By maintaining a user-friendly site, you will be able to keep current users happy while building your base. And don’t be worried – if you need a redesign, there’s still time.

https://1stwebdesigner.com/web-design-donts/feed/ 0