1stWebDesigner https://1stwebdesigner.com Helping You Build a Better Web Mon, 22 Oct 2018 08:32:43 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.8 When to Say No to a Web Design Client https://1stwebdesigner.com/say-no-to-a-web-design-client/ https://1stwebdesigner.com/say-no-to-a-web-design-client/#respond Mon, 22 Oct 2018 08:32:43 +0000 https://1stwebdesigner.com/?p=140442 Rejecting potential clients is an art that all freelancers and designers should know. Sometimes, you and the client just don’t work well together, and that’s okay! It just takes a bit of finesse – so even when you have to reject them in the middle of the project, you and your business can come out unscathed.

When They Push the Limits

Some people will get away with whatever they can. They may “negotiate” your contract, ask for extra revisions without paying, or just generally undermine the rules you set. The goal is often to avoid paying full price.

The best thing you can do is make a contract that covers all your bases, and put your foot down. You may or may not want to compromise with certain clients, but never let yourself get taken advantage of.

A "Stop" sign

When a Client is Rude or Demanding

There’s no reason to deal with someone who looks down on you. If in the initial exchange you find your client to be short, nagging, or abusive, it’s time to say no right then. These people will make your job way harder than it’s worth. They may avoid paying, nitpick, ask for constant revisions, or simply make your life difficult. If a client is showing warning signs, don’t take the job. It’s not worth it!

Woman and man having a conversation

When They Make Strange Requests

Sometimes people aren’t sure how to phrase what they want. Their requests can seem incomprehensible and vague. Or maybe what they’re asking for would take too much time.

The right questions can solve many of these problems. Ask ones that leave no room for vague answers, give a few examples to pick from, or elaborate on a confusing statement. Explain why something won’t work, or why you don’t understand their request.

But sometimes, it’s best to simply turn down these clients. When you’d only be guessing at what they want, the result isn’t going to satisfy either of you.

People reviewing documents

When Your Design Choices Clash

A designer who can’t please their clients can never succeed. However, that doesn’t mean the customer is always right. When a client has a different vision – one that may ruin the project in your eyes – the best you can do is gently explain why you made that decision, compromise, or let it go.

However, if it gets to the point that you’d be ashamed to put this project in your portfolio, it may be best to refer the client elsewhere. And if you know from the get-go that you don’t want your name associated with this project, refuse them right away.

Animals fighting

When You Can’t Do the Job

Every designer runs out of time. Jobs pile up, emergencies spring, and you just can’t take on another project. Or maybe the client is asking for something that’s out of your area of expertise.

Instead of trying to do a job you just can’t, be honest and briefly tell them why. It’s better than struggling and turning in something late or with little effort put into it. This will damage your reputation way more than rejecting a client due to lack of skills or time constraints.

A large stack of paper

When Something Feels Wrong

Trust your gut. Do they sound like a message in your spam folder? They could just be a bot. Is someone giving off weird vibes? They might turn into the rude, nitpicking client that every designer dreads. Afraid they’re not going to pay? Reject the project.

If you feel like a client will refuse to pay you, be difficult to work with, or ask for more than you’re capable of, don’t ignore the warning signs.

Can of SPAM

Learning to Deal with Clients

“Saying no” doesn’t mean being blunt or rude with a client. The best way to reject a client is to be firm but polite, brief but informative, and perhaps not to include the word “no” at all.

Trying to help the client can lessen the blow. Refer them to another designer when you can’t continue the project; explain who can help them when they’re asking for something outside your field (such as illustration, graphic design, or web development). This way, the client can transition seamlessly. No harm done to your reputation.

https://1stwebdesigner.com/say-no-to-a-web-design-client/feed/ 0
How to Start a Newsletter for Your Website https://1stwebdesigner.com/how-to-start-a-newsletter-for-your-website/ https://1stwebdesigner.com/how-to-start-a-newsletter-for-your-website/#respond Thu, 18 Oct 2018 09:41:10 +0000 https://1stwebdesigner.com/?p=139795 Creating a newsletter for your website can be a great way to keep loyal visitors up-to-date on your adventures, while leaving them engaged and coming back for more. But where to begin? How can you create a newsletter on your own? It’s not so difficult – here’s what you need to do!

Choose an Email Marketing Service

Your first step in this venture is to choose an email marketing platform. Whether you’re looking to send out automated emails curated from content on your website, or to craft custom templates to send each week or month, most services will have what you need. It’s a matter of the features and pricing that’s right for you.

There are hundreds of fantastic email services out there; here are a few examples.

  • MailChimp: This popular platform is a safe bet for beginners. It’s packed with features and free up to 2,000 contacts and 12,000 emails per month. It’s perfect if you’re not sure about committing.
  • GetResponse: GetResponse is an affordable all-in-one platform that includes email marketing, automation and landing page design.
  • Constant Contact: Constant Contact aims to deliver marketing for small businesses that’s offered to as many people as possible. The drag-and-drop editor makes templates easy to create.

Newspaper and business cards

Select Content and Craft a Template

Picked a marketing platform? It should come with email templates that you can personalize to fit your brand and vision. While this step will vary depending on the service you picked, here are a few things to keep in mind while creating your newsletter template.

  • The subject line is the most important part of an email. It’s the difference between a deleted email and an engaged user. Don’t waste any time here; grab their attention, make an offer, or create urgency in your headline.
  • Build intrigue! Use teasers for blogs or products; promise something if they visit your site, like an exclusive look at the latest posts or products.
  • Don’t forget your call to action! Lead the readers to your website with a gripping CTA and a button that can’t be missed.
  • Limit the frequency of emails, but make sure to be consistent. Any more than weekly can annoy users; any less than monthly can cause lost engagement.
  • Use images. A text-only email is boring. Include a large picture to grab attention and draw it to the main content.

If you’re pulling from your blog feed, you’ll need to use RSS-to-email features.

Blueprints, pencil and ruler

Collect Subscribers

Once you have a solid template to work with and have your automation set up, you need to get some subscribers. Remember to obtain them legitimately through your website; buying email lists isn’t worth being blacklisted as a spam domain.

To start, make sure to advertise everywhere you can on your website! Promote it at the end of blog posts; add the form to your header or footer; include a “hello bar” that greets users and invites them to join. Pop-ups can be used when users reach the end of an article or leave the tab.

Include a lead magnet in your email campaign. What will they get if they sign up to your newsletter? A free e-book? A coupon? Give them a reason to commit to you.

If you’re not writing a blog, consider starting one. A high-quality blog can bring traffic to your website, which means more chances at gaining subscribers!

And make sure the sign-up process is as seamless as possible. The form should be accessible and visible on every page. Make the sign-up application the central focus. And, avoid having too many forms. In short, make it easy to find and even easier to fill out.

Email subscriber illustration

Creating Compelling Emails

Starting a newsletter can take a lot of work, but it’ll be worth it when you see the results. A newsletter will retain past visitors who might have otherwise forgotten your website, while looping in new fans in the process.

If you want to create a little more engagement with your visitors, start a weekly or monthly newsletter and watch as people return to see your latest endeavors. With so many easy-to-use email marketing platforms out there, anyone can create a newsletter.

https://1stwebdesigner.com/how-to-start-a-newsletter-for-your-website/feed/ 0
Add a Powerful LMS to WordPress with Masterstudy Theme https://1stwebdesigner.com/masterstudy-theme/ https://1stwebdesigner.com/masterstudy-theme/#respond Tue, 16 Oct 2018 06:16:18 +0000 https://1stwebdesigner.com/?p=140222 Online education is incredibly useful and convenient. What’s more, it’s not just for schools. Both public and private organizations use online education to train employees and help members stay in the know. It transcends industry and can be utilized in any number of ways.

The great news is that adding this capability to your WordPress website is as easy as installing Masterstudy. It’s the theme that will turn your site into an LMS (Learning Management System). You can build, customize and manage online courses with ease.

Want to learn more? Let’s take a look at what makes this LMS so powerful.

Masterstudy Offline Course Demo Homepage

A Turnkey Solution for Online Education

Masterstudy is a WordPress theme built as a result of extensive research in online education. Every aspect has been carefully thought out, meaning that you’ll find all the features you need to run a full-fledged educational program.

Super-Fast, Thanks to Vue.js

The integrated Masterstudy LMS plugin offers several front and back-end features that are powered by Vue.js. The result is a UI that loads at blazing-fast speeds. Your students will spend more time learning and less time waiting for content to load.

Flexible Courses

The free Masterstudy LMS plugin is the perfect companion for Masterstudy theme. It gives you the power to create courses that match your specific needs. Build Text, Video and Slideshow lesson types. Whatever type of content you’re looking to present, Masterstudy has you covered.

Masterstudy Video Lesson

Powerful Online Quizzes

Use the built-in quiz capabilities to help students reinforce what they’ve learned. Quizzes feature the ability to use an online timer, results reporting and optional retakes. Certificates can be awarded based on the criteria you set.

Built in eCommerce

Masterstudy includes built-in support for PayPal and Stripe payment gateways. This provides you with the flexibility to offer courses as one-time payments or recurring subscriptions. Plus, support for Paid Memberships Pro offers you another way to sell online. Looking to sell offline courses? This capability is supported with the use of WooCommerce.

Encourage Communication

Students and instructors can easily stay in touch. Use the real-time question and answer feature during lessons to ensure that everyone is on the same page. And, the private messaging system facilitates easy communication between users, anytime.

Masterstudy Course Page

A Top-Quality WordPress Theme

With Masterstudy, you get a WordPress theme that is built to the highest standard. It’s been optimized for speed and will look pixel-perfect across all screens and devices. StylemixThemes, an Envato Power Elite Author, has gone to great lengths to ensure quality and ease of use.

Fully Customizable

Masterstudy empowers you with plenty of options to customize your site. The theme settings panel, powered by Redux framework, lets you tweak colors, fonts and more. Plus, you can choose from several header layouts for just the right look. The best part? You don’t need to touch any code!

Top Plugins Included

In addition to Masterstudy LMS Pro, you’ll enjoy free access to Visual Composer and Revolution Slider. They’ll help your site both look and function beautifully.

1-Click Demo Import

Want to get started quickly? Use Masterstudy’s 1-click demo import to start building immediately. There are currently six gorgeous demo layouts, with more in development.

24/7 Support

Don’t wait to get your questions answered. Masterstudy features extensive documentation and video tutorials. Or, take advantage of live chat or ticket-based support that is available 24/7.

Masterstudy Course Instructor Profile

Use Masterstudy to Open Your Own Online Education Hub

When it comes to online education, Masterstudy is the complete package. Create compelling courses and sell them online. The entire process is seamless and easy to customize.

You’ll also gain peace of mind in knowing that help is always just a click away. And, with free lifetime updates, you will always have the most stable and secure code, along with amazing new features.

Get started with Masterstudy today and bring the full LMS experience to your WordPress website.

https://1stwebdesigner.com/masterstudy-theme/feed/ 0
Inspiration for Creating the Perfect About Page https://1stwebdesigner.com/perfect-about-page/ https://1stwebdesigner.com/perfect-about-page/#respond Mon, 15 Oct 2018 09:21:34 +0000 https://1stwebdesigner.com/?p=140209 What’s more important than your about page? Letting your site’s visitors know who you are encourages them to trust you and learn more about your brand! You can talk about yourself, why you started your website and what your goals are – all in a stylish way. It’s an extra personal touch that many people will appreciate.

Need some inspiration? Here are a few about pages that will blow you away!



Kommigraphics’ about page contains a fun team portrait scroller. Hovering an image stops the scroll effect and allows you to get more info on that employee. The strong palette is inverted as you scroll down, offering a visually interesting but consistent effect.



This is a fun website to browse, and the about page is no exception. Use your mouse to hover over the various objects and reveal cute animations and colors! Even the buttons and clickable text lights up. Hover over the team’s faces to see their photos in full color and trigger an animation!



Animations everywhere! This about page is a longer-than-average read. But it breaks up the text with clearly labelled sections and parallax animations at every turn. You’ll want to scroll down and see what happens next. The black, white and red color palette looks great, too!



Woodwork’s about page opens with a short blurb about the business and a shot of the working space. Scroll down and you’ll be greeted with an awesome animation that makes it look like each person is rotating! Everyone here shows off their character and there’s no way you can’t trust them with your next design project!

The Dragon Prince

The Dragon Prince

It’s always great to learn more not just about the people behind a project, but a little bit about what they do and where they find inspiration! It’s great to get some behind-the-scenes in an about page and this website delivers.



Yelvy’s about page gets straight to the point; a bold mission statement in large text and some quick info on the company’s origins. From there, you can get right back to shopping. This brand is about self-expression and application, and that’s all there is to say about it.



This website puts animations and effects to good use. The about page, though beautiful, is short, sweet and to the point. They state who they are, what they do and why they do it well. All on classical light text that occasionally takes on a dynamic pastel sheen.

Red Collar

Red Collar

It’s always a good idea to open with a glimpse into your workplace. And Red Collar nails the short blurb about itself, describing both what the business is and its philosophy in a few elegant words. The black and white team photos fit the site’s darker design. Hovering their faces reveals a quick animation showing various objects!

Ancient Peaks

Ancient Peaks

Rather than being a simple about page for a business statement and a few photos of employees, this page is all about family. You can get a lot of info on the company’s founders as well as the winery team workers. This is interspersed with photos and videos of the family at parties, fishing or toasting with wine. It gives you a more personal glimpse into the lives of the people behind the business.

Create a Personalized About Page

It’s no good being a faceless business. People want to connect, to feel like there’s a real person behind the screen. It makes you seem more trustworthy and genuine, and allows you to clearly state your message and goals. So, design an about page you’re proud of and show off yourself and your colleagues to the world! Hopefully these great examples offered some inspiration and guidance for your own about page.

https://1stwebdesigner.com/perfect-about-page/feed/ 0
Image Optimization in Advanced Web Development https://1stwebdesigner.com/image-optimization-advanced-web-development/ https://1stwebdesigner.com/image-optimization-advanced-web-development/#comments Fri, 12 Oct 2018 09:05:44 +0000 https://1stwebdesigner.com/?p=132869 Web-quality imagery is always a balancing act between using the smallest possible file size while providing good image quality. Embedding a photo straight off your DSLR may look nice, but it will slow your website’s load to a crawl, while an over-compressed image may improve the speed of your site yet discredit the design and overall aesthetic.

For the two types of image assets we predominantly deal with – photos and icons/illustrations – we perform a mixture of image quality checks and compression techniques that work well in most case scenarios.

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

File Types and When to Use Them

There are three image file types we use when building websites: .jpg .png and .svg.

JPGs are best used for photos such as landscapes, scenery or people. For imagery in content, such as a blog article image, we aim for 20-70kb. Larger background photos can get up to 500kb, but 200kb is a good average.

JPGs are lossy (they recompress and degrade the image quality each time you export), and they don’t manage gradients very well. If you have a gradient in an image, sometimes you can separate the image into two cuts so that you can render the gradient in a separate background using CSS gradients instead.

PNGs are best for assets such as logos and icons because they support transparency and because logo and icons often use a more limited color palette – since PNGs achieve compression through a reduction in the number of colors.

A PNG can be lossy, but we typically use lossless, meaning every pixel is saved exactly without degrading the color palette, resulting in a higher-quality image.

SVGs have the best quality of all and are used for vector art due to their scalability. We often use them with logos, however, SVGs do create more work for the browser to render and can create sluggishness as the page loads, so the quality of your image should always be balanced against its complexity.

As an example of when we use PNGs and SVGs, compare the logos for Silver Screen Insider and Bozeman Websites. For the former, we used an SVG. For Bozeman Websites, because of the complexity introduced with CSS animation when a user scrolls down, we chose to use PNGs instead so as not to compromise browser performance.

Sometimes the best solution is a combination of both: for the logo on JTech’s website, the “JT” component is a PNG, but the “Celebrating 20 Years” is an SVG in order for it to retain its quality in all viewport sizes.

Optimization Techniques

In order to get the best possible results, it is important to optimize your images. To do so, we utilize three programs: ImageOptim (for JPGs and PNGs), ImageAlpha (for PNGs) and Scour (for SVGs).

Optimizing JPGs

ImageOptim reduces the file size of JPGs and PNGs. For large images, such as the ones we use for background panels, we cap dimensions at 1600x1200px. For content photos such as an image inserted in a blog article, we cap dimensions between 200-800px wide.

After resizing to its final resolution, the image is output in Photoshop using the best quality available. Each time we compress the image it loses some fidelity, so we prefer to rely solely on ImageOptim for compression rather than having Photoshop do a pass. Photoshop is noticeably less efficient: its “save for web” at quality 65 produces an image of equal file size but poorer fidelity than ImageOptim’s quality 85.

Retina JPGs

When targeting retina or other high-density displays, we’ve found it works best to save a single JPG at twice the resolution, but use higher compression, around 50-60 in ImageOptim, which can produce a high-quality image that looks good on both retina and standard, lower-density displays. This technique allows us to use a single asset for retina and standard displays rather than cutting and loading multiple versions and without quadrupling the size of our images.

Optimizing PNGs

For PNGs, we output from Photoshop using PNG 24 in their “save for web” option, then run it through ImageOptim. If it detects that the image is using fewer than 256 colors, ImageOptim will losslessly convert the image to a PNG 8, a simpler file format that can produce very light-weight files.

With ImageOptim, our final output of an image without too many complexities (minimal color, simple shapes, and resolution less than 200x200px) can range in size from 15kb down to under 1kb.

Optimizing Larger PNGs

For more complex images, if we can’t produce a file between 15kb and 50kb with ImageOptim, we use ImageAlpha. ImageAlpha is used to process PNGs from a PNG 24 (millions of colors) to a PNG 8 (256 colors maximum), changing the image from lossless to lossy, ultimately aiming for the one with the smallest number of colors.

Lossiness in this format primarily means strategic refinement of the color palette, eliminating the least-noticeable colors to produce an image that still looks great while reducing its complexity.

After exporting from ImageAlpha, we run it through ImageOptim so it can be optimized further.

Optimizing SVGs

When it comes to SVGs, we reduce as much complexity as possible before we export the image from Illustrator. An often tedious process due to their size, we first try to reduce the number of layers to a minimum while still accurately displaying the artwork. It is then saved as an SVG in Illustrator and optimized with a program called Scour.

We use this automator script to make it a bit easier to use in macOS, allowing you to right-click an SVG file in the Finder and optimize the SVG through the Services menu. We often use font files for vector graphics that are single-color with a program called Glyphs.


Properly optimizing imagery is just another way we can improve the performance of our websites, prevent browser bloat, reduce server and bandwidth resource usage, hasten page load time, keep the development infrastructure clean and provide a much more desirable experience for the end-user.

We hope this exploration of our experience with JPG, PNG and SVG file types, image compression and quality tools are a resource for you as we continually refine our own process to produce websites of high caliber.

https://1stwebdesigner.com/image-optimization-advanced-web-development/feed/ 1
Examples of Excellence in Modern Responsive Design https://1stwebdesigner.com/excellence-modern-responsive-design/ https://1stwebdesigner.com/excellence-modern-responsive-design/#comments Fri, 12 Oct 2018 08:31:07 +0000 https://1stwebdesigner.com/?p=129737 Over time, responsive design has matured quite nicely. In the beginning, it was just about providing something to accommodate different screens – even if it wasn’t all that great. But modern responsive design has unleashed a lot of creativity. Instead of thinking of small screens as a burden, many designers are finding new ways to embrace the challenge of creating something with both beauty and function.

With that established history, we thought it would be interesting to take a look at a few sites that are really at the forefront of great responsive design.

Here they are, complete with responsive views and some thoughts on what they bring to the table (or should I say, tablet?):

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

The Washington Post

One of the great challenges of responsive design is taking a content-heavy website and making it work on smaller screens. The Washington Post does a fantastic job of making the most out of whatever screen real estate is available.

While the desktop version takes advantage of a multi-column grid, the tablet (portrait) and phone versions handle the challenge of compressing content quite well. The dead-simple slide-out header navigation on small screens is to be commended for its ease of use. The experience is optimized for mobile while still feeling familiar.


99U is Adobe’s online magazine for creative professionals. One of the aspects to love about this site is the utter simplicity of its layout on any screen size.

The use of a light background and large black typography make everything easy to read from desktop to mobile. A unique feature to look for is that, on a mobile device, the site’s footer is actually hidden in the hamburger menu. This little trick saves some space and reserves it to maintain focus on the content.



Vox is a news site that takes a bit of a different route with mobile navigation.

Instead of the ubiquitous hamburger menu, the standard text navigation bar shrinks down as the screen gets smaller. But instead of trying to squeeze several items in a small space, categories are gradually removed from the menu and hidden under a drop down menu called “More”.



Perhaps no one designs to their audience better than Etsy. The crafty marketplace does responsive right, as well. Among the mobile highlights is a header that gives you all the basics (a logo, links to Sell, Sign In and a Shopping Cart icon) in an incredibly clear and concise manner.

Their shop by category section transforms from multi-column photo cards to a clean, vertical icon menu. This is a great example of progressive enhancement at work.



KFC, the finger-lickin’ good purveyor of chicken, has really done some outstanding work on their website.

The UX is incredibly consistent between different devices and screen sizes. The use of both a hamburger menu and horizontal scrolling on all viewports means that users will know exactly what to do – regardless of what they’re using to browse the site.



The maker of many things, Honda has several product lines and brands users may be interested in. Their use of color in each alternating banner makes it quite simple to find what you’re looking for (which looks particularly cool on tablets and phones).

Again, this is a site that brings a very similar experience on different viewports.


The National

Indie rockers The National make great use of screen real estate. In fact, their grid-style layout for news and information stretches across the entire width of an HD screen.

This type of layout lends itself well to going all-out on page width. Smaller screens get treated to a similar vibe, with the news items being listed side-by-side and still easy enough to read. This site is a reminder that responsive design also includes taking advantage of higher screen resolutions, not just making sure everything fits on smaller ones.

The National

The Responsive Revolution

Looking at the sites we mentioned above, none of them are particularly revolutionary on their own. But each has their own interesting technique and philosophy for how responsive design should work (not to mention lots of challenges to overcome in getting there). They may not be revolutionary, but they are certainly part of the revolution.

https://1stwebdesigner.com/excellence-modern-responsive-design/feed/ 2
10 Instagram Accounts For UI & UX Design Inspiration https://1stwebdesigner.com/instagram-accounts-ui-ux/ https://1stwebdesigner.com/instagram-accounts-ui-ux/#comments Fri, 12 Oct 2018 07:53:26 +0000 https://1stwebdesigner.com/?p=132849 Instagram is one of the best sites to find quality UX inspiration. But you need to know who to follow and which hashtags are worth browsing.

I’m hoping this article will set you on the right path with a collection of the 12 best UX accounts on Instagram. These are all very active and perfect for anyone breaking into the field, or looking to expand their reach with more Instagram inspiration.

The UX Designer Toolbox
Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets

1. @ux_ui_wireframes

uiux wireframe instagram

My absolute favorite account is @ux_ui_wireframes and it’s been around for years now.

New posts are frequently added, and many of them are sourced from designer accounts through hashtags. So this works like a curation resource where the account owner connects with other designers and asks if they can republish the photo on their account.

Naturally this draws more attention to the designer’s work and gives you a bunch of diverse UX inspiration. Cool stuff!

2. @uxdesignmastery

ux design mastery

Here’s another one I really like that’s pushing just about 100k followers.

The @uxdesignmastery account comes from the main website offering tutorials and courses on this topic. So their photos are meant to guide you towards the site and increase users while offering some cool inspiration.

New UX designers will find this incredibly valuable since the website is chock full of knowledge. But even if you just follow the Instagram account you can still learn a lot from their uploads.

3. @wireflow

wireflow instagram page

The team at @wireflow have their own Instagram account for publishing custom wireframes, prototypes, and storyboards for user flows.

Again this is managed by the main site which promotes their tool for simple flowchart management. It’s actually a great tool because you can use it freely on the web and the results are instantaneous in your browser.

But their Instagram account goes beyond digital work to include a lot of hand-drawn wireframes and user flows. Excellent for people who prefer classic methods of brainstorming.

4. @uxpiration

uxpiration instagram

With a following of 12k designers and growing fast, one of my favorite newer accounts is @uxpiration.

It’s built solely to promote designers and help get work out there for ideas. This account almost takes on a communal feel giving back to the overall design community.

Well worth following if you want UX, UI, or general design inspiration.

5. @uxdesigns

uxdesigns instagram

Looking for animated interface designs? Then you’ll want to follow the @uxdesigns Instagram page.

A lot of these photos are pulled from Dribbble where designers share UX animations and custom interfaces. They’re all tagged properly so you can usually find the original designer pretty quickly.

But this is one feature I like about Instagram’s support for GIFs, and it shows just how useful this account is.

6. @humble_ux

humble ux instagram

For a good mix of digital and traditional, check out @humble_ux.

It has almost 20,000 followers and over 150 posts with many new ones added every week. The photos come from the Humble UX team who curate shots from around the web and share a few of their own too.

Most designs are sketches or brainstorms on a whiteboard, so you’ll see a lot of traditional mediums. This is great for all types of UX from mobile to websites and even desktop apps too.

7. @uiuxgifs

uiuxgifs instagram

Here’s a premiere animation UX account that everyone should know about.

@uiuxgifs only publishes animated designs that feature logos, icons, or interfaces in motion. It’s a fairly large account with over 50,000 followers and they update constantly.

But the thing to note is that they publish a lot more than just interfaces. Many of their posts do center around logos and icons that animate separate from any interface, so this may not be as relevant to strict UX designers.

8. @uitrends

uitrends instagram

On the flip side here’s an account that only focuses on interfaces. The @uitrends Instagram is full of custom designs and even redesigns from popular websites.

Many of these are sourced from Dribbble so they all have that Dribbblification look to them.

But there are some gems mixed in, and you can find a lot of quality inspiration on this page. Plus they frequently update so it’s an excellent resource to browse for design ideas.

9. @interaction_design_foundation

interaction design Instagram

The Interaction Design Foundation offers lessons and courses in UX design along with free articles for beginners. It’s a massive resource with a ton of great learning materials on the topic of user experience.

So naturally they have an Instagram account and it’s got a lot of posts in there.

As of this writing it totals over 1,330 posts and has just above 16,000 followers. This is one of the few Instagram accounts that mixes UX inspiration along with photos featuring tips, advice, infographics, statistics, and quotes from UX designers.

I definitely recommend this account for adding some variety to your feed.

10. @wittydigital

wittydigital instagram

The team at @wittydigital run a gorgeous digital design account with over 50,000 followers.

I’m not sure who updates this account but it is the official one for Witty Digital’s agency. It’s a massive international design firm with operations from Hong Kong to the Israel.

But their Instagram account is packed full of animated UX pieces and some really inspiring design concepts. Well worth following if you love animated GIF designs.

11. @Uidesignpatterns

uidesignpatterns instagram

@Uidesignpatterns is quite possibly the largest Instagram account on design work.

It totals a massive 167,000 followers with only about 600 posts. These posts come from designers from all over the world, and you can even tag your content on Instagram to have them feature your work.

Each post includes a mention to the designer so you can browse around and find people who may inspire your work. Plus this account is really made for designers, and you can tell by some of the humorous posts they do.

12. @instaui

instaui instagram

Last but certainly not least is @instaui. This one’s also pretty large with over 50k followers and new posts every day or so.

One thing to note is that despite their username they don’t always post UI designs. There are lots of digital illustrations, vector icons, logo designs, and general graphic design pieces.

But this is still a really cool Instagram account if you’re looking for general design ideas and want to follow active accounts that update on the regular.

And if you want to try finding even more accounts, check out the #uxdesign hashtag. If you dig deep enough, you’re bound to find more profiles worth following.

https://1stwebdesigner.com/instagram-accounts-ui-ux/feed/ 2
15 Beautiful Examples of Whitespace in Web Design https://1stwebdesigner.com/beautiful-whitespace-web-design/ https://1stwebdesigner.com/beautiful-whitespace-web-design/#comments Thu, 11 Oct 2018 11:44:00 +0000 https://1stwebdesigner.com/?p=130157 Often found in minimal, flat, and material design, and always associated with beautiful typography, whitespace or negative space is the perfectly proportioned space around and between the elements of a layout.

It is any, and all space found between the margins, leading, letter-spacing, etc. Even though it’s called whitespace, it doesn’t necessarily have to be white. The blank space may be of any color, texture, or even an image.

As whitespace is capable of emphasizing a particular element of a layout, it is one of the most effective ways of guiding your users through a website.

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

Web design is more or less about communicating a specific message, and whitespace can significantly improve the interaction between users and content, giving you the means to guide your visitors around the site exactly how you intended.

whitespace web design WANNA

Source: WANNA.tech

It can also have a tremendous impact on readability. Users are not willing to read cluttered, large chunks of text, therefore, whitespace can be used to establish a clear typographical hierarchy, making reading much more pleasurable.

whitespace web design CRRTT

Source: CRRTT.com

Structured text with well-proportioned whitespace will also significantly make your content digestible and memorable, helping to improve comprehension.

It can also be used to establish a feeling of sophistication and finesse into your design. Combined with well-structured typography, whitespace creates a feeling of reliability and self-sufficiency. It can send strong signals of quality to your site visitors.

Of course, this is hard to measure, but whitespace can bring harmony and balance to your design. It welcomes its viewers. It enables them to feel comfortable and allows them to find their way around your site in a smooth and timely manner.

whitespace web design Moze

Source: Moze.com

whitespace web design Fell Swoop

Source: Fell Swoop

whitespace web design Grana

Source: Grana.cc

whitespace web design

Source: Basic Agency

whitespace web design Flarin

Source: Flarin.com

whitespace web design Drexler

Source: Drexler.com

Every web designer should take whitespace into consideration, but not all do. While some have mastered the art and have designed web layouts that are as close to web design perfection as you can get, as you have seen from this showcase.

https://1stwebdesigner.com/beautiful-whitespace-web-design/feed/ 2
How to Choose the Right Fonts for Your Website https://1stwebdesigner.com/choose-right-fonts/ https://1stwebdesigner.com/choose-right-fonts/#respond Wed, 10 Oct 2018 06:28:24 +0000 https://1stwebdesigner.com/?p=139885 With thousands of fonts out there, it can be difficult to find one suitable font – much less pairs that look good together! When you’re building a website, how and where can you find fonts that fit its aesthetic? If you’re stuck and not sure where to begin, this guide will give you some tips on choosing the perfect font, no matter what kind of site you’re creating.

The Four Font Types

Fonts, in general, have four types: serif, sans-serif, script and decorative. Understanding these fonts, their uses, and what feelings they’re associated with will help you make the right choice for your website.


Serif fonts are the first choice of businesses, newspapers and blogs. Because of this, it’s seen as professional, traditional and reliable. If you’re creating a site that involves a lot of reading, it’s best to use a legible serif font. Serifs are best for the site that wants to be taken seriously! Those little lines can make a big difference.

Serif font example


Simple and minimalistic, sans-serif text is great for businesses that want to give off a modern air. Sans-serif can be more legible in some cases, such as for shorter passages of text, or when designing for young children. Sans-serif headers and serif body text is a popular combination.

Sans-serif font examples


An elegant script font, while unsuitable for body text, is a great way to add a creative touch to your website. Perfect for fashion businesses, creatives, blogs and more!

Script writing in sand


Finally, decorative text falls into a category of its own. While it should be used sparingly, it can be a great way to stylize your website. However, unlike script fonts, it should almost never be used for a professional website.

Decorative font example

Consider your target audience. Are you targeting children with eye-grabbing decorative fonts? A modern audience that responds to sans-serif and script, or one that appreciates the traditional sans-serif? Remember your audience and choose the most appropriate font.

Limit Your Choices

When building a website, it’s best to have a limited “font palette”. Like an artist’s color palette, too many fonts can look cluttered – so pick 1-4 good fonts!

Be consistent with their usage. Have one font for the main text, one for headers, one for text navigation – and so on.

But how to pair them? It’s true some fonts look better together than others. There are two good ways to pair fonts: based on similar features, or on contrast.

You could use fonts that are both tall, soft-looking, or sans-serif. You could also use contrast as the deciding factor; use sans-serif for headlines and serif for the body, or pick one with a heavier weight and line thickness for your bolder text.

Experiment, and see what fonts are harmonious!

An artists' palette

Header vs. Body Text

There’s a time and place for every font. Different fonts work for different occasions, but this is most pronounced in headlines vs. body text.

Readability is essential for the majority of text on a website. For body text, serif or sans-serif is always the best – especially for longer passages. But in a headline, logo, or other short pieces of text, it may be better to pick a bolder, taller, more expressive font that would be unsuitable for longer reading.

Script and decorative fonts can be used only in the header or in brief blurbs, as their legibility is low.

Pick the Perfect Font

It may be difficult to find the perfect font combination, but it isn’t difficult to find something that works. Typography isn’t difficult to get into, but it’s a subtle art. The best thing you can do is try everything.

Figure out what works and what doesn’t, and why. Study websites’ text and learn what methods are being used. Soon you’ll have a better understanding of typography, and you’ll be able to choose the best fonts in any situation.

https://1stwebdesigner.com/choose-right-fonts/feed/ 0
Examples of Print-Inspired Website Designs https://1stwebdesigner.com/print-inspired-website-designs/ https://1stwebdesigner.com/print-inspired-website-designs/#respond Tue, 09 Oct 2018 08:12:08 +0000 https://1stwebdesigner.com/?p=135296 Web design has always drawn inspiration from print. Whether it’s content layouts, typography, or image placement, print is always a worthy point of reference given its longevity. Websites today continue to be inspired by print design, with many shifting to text content-heavy designs as opposed to the more visual approaches we have become so accustomed to. There’s also a rise in websites using a palette of simple blacks for typography and off-white for backgrounds.

In this article, we are going to showcase a selection of the finest recent examples of print-inspired website designs.

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

Alecco Bakery

Alecco Bakery

Using beautiful serif typography and muted background colors, Alecco Bakery has produced a simple design with great emphasis on the content and imagery.

Exposure Exhibition

Exposure Exhibition

The website for Exposure Exhibition uses print-style divider lines, large headline typography, and a neat and structured column layout for content.



Another site that utilizes a muted, off-white background color, Tapwater also implements print-style divider lines and a structured column layout. The illustrations are simple and reminiscent of styles found in quality print publications and newspapers.



Morressier’s illustrations are simple, using just monochrome tones. It also uses a well-defined grid structure, akin to that of a newspaper publication.



Topic’s light beige background color is contrasted with heavily-stylized imagery and emphatic vertical left borders to draw attention to content sections.



Whtifs uses a beautiful combination of mono typography with simplistic button styles and clearly ordered content with divider lines. It’s free of any imagery or illustration, providing a print-like document.

Smith Made Studio

Smith Made Studio

Using only black and white upon a beige backdrop, Smith Made keeps things both traditional and simple. It’s a website that could easily be mistaken for a print document at first glance, in part due to the serif typography, lack of color and hand-drawn illustration style.

https://1stwebdesigner.com/print-inspired-website-designs/feed/ 0