1stWebDesigner https://1stwebdesigner.com Helping You Build a Better Web Sun, 09 Sep 2018 12:46:16 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.8 10 Free Video Tutorials For Learning Sketch.app https://1stwebdesigner.com/free-video-tutorials-learning-sketch/ https://1stwebdesigner.com/free-video-tutorials-learning-sketch/#respond Sun, 09 Sep 2018 08:19:27 +0000 https://1stwebdesigner.com/?p=132280 YouTube is the best place to teach yourself anything in the modern era. Techie subjects are covered in greater detail because most tech-savvy people also know how to record videos and get them online.

One of the newer design programs, Sketch, has been giving Photoshop a run for its money. This is an OSX-only program, but it’s made specifically for web and mobile designers.

It can feel a little strange coming from an Adobe background, but with the right tutorials anyone can learn it, and in this guide, I’ve curated the best Sketch tutorials to get you started with the basics and beyond.

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

iOS Calendar in Sketch 3

ios calendar tutorial

Mobile iOS apps are simple to design because they come with screen restrictions and clear guidelines for the designer. That’s why this iOS video tutorial is a great place to start learning Sketch.

Over the course of a half hour you’ll learn the fundamentals of icon design, vector creation, color selection, and keyboard shortcuts. The narration is easy to follow, and you can do all of this on your own with just a copy of the program.

If you’re hoping to learn more about icon design or mobile app design, then this video is for you.

Intro to Sketch for Web Design

intro web design sketch video

Alternatively you might be looking to use Sketch for website design. In that case you’ll love this brief intro from London designer Charli Marie.

If you’re a complete beginner then picking up Sketch can be a hassle, but this is particularly the case for websites where you need to consider responsive layouts, grid systems, and more intricate nuances like textures/patterns on the page.

Granted this video will not make you a complete Sketch master or an expert web designer. But it’ll offer a very clear introduction to the program so you can get up and running fast.

Simple Menu UI/UX

uiux sliding menu sketch

Diving into the more detailed side of design is this Sketch 3 tut covering how to make a sliding nav menu.

This video follows a very simple process of designing a slide out menu on top of an existing interface. Most mobile designers need to do something like this since the sliding menu is the most common choice for responsive menus.

And you can follow this tutorial with the newer version covering another method of designing a vertical slide-out menu.

Nike Store UI Redesign

nike store ui redesign

Another way to practice design is by re-creating interfaces. For example this tutorial teaches you how to redesign a Nike product page in Sketch 3.

It spans about half an hour with guides on working with vectors, basic page shapes, color schemes, textures, and pretty much everything else you’d need to learn.

This video will not make you an expert, but it’s definitely a fun way to get started in this design software.

Dropbox UI/UX Redesign

dropbox ux sketch video

Here’s another cool example from the same YouTuber teaching you how to redesign Dropbox in Sketch. It’s just about the same length of time, and the process feels similar, but there’s also a very unique methodology in this video.

You’ll learn more about matching the colors/textures/icons with Dropbox’s branding and how to design around the company’s image. So you’re not just learning how to use Sketch, but also how to design with specific goals and criteria.

Definitely a unique tutorial for web designers and the final result is fantastic.

Minimalist Website in Sketch 3

minimalist freebie sketch

If you’re looking for a simpler introduction, you might try this tutorial created by Hacksaw Academy. It’s one of the newest videos in this list, and it teaches you how to create a minimalist website mockup from scratch.

In total the video spans 15 minutes which isn’t too long for a design tutorial.

But the final result is also very simple, so beginners won’t feel too overwhelmed. This makes for an excellent starting point to pick up Sketch, but I recommend going beyond this tutorial if you really want to master the program.

Design a Landing Page

landing page video series

Designer Adam Rasheed went above & beyond with his landing page video tutorial covering all the major aspects of Sketch.

This tutorial breaks up into five parts with the very first video totaling over 90 minutes long. Talk about detailed!

You’ll learn about the proper workflow used to create a web page mockup and how you can follow this in future projects. Plus Adam gets into detail on how to create certain page elements like navigation menus, signup forms, and thumbnail galleries.

Basic iOS App Mockup

simple ios mockup sketch

The entire SketchCasts YouTube channel is full of great advice for beginners and experts alike. Sketch has a lot of features, and this channel covers all of them in practical lessons.

I specifically recommend starting with their iOS app mockup tutorial which feels more like a wireframe than a mockup. But you’ll learn all the fundamentals of designing a page by setting dimensions, grids, and proper alignments.

All the techniques you’ll learn in this video apply to professional design work no matter what type of interface you’re creating.

Button System with Nested Symbols

buttons nested symbols

If you wannt to get a little more technical then check out this tutorial on nested symbols in Sketch. This is a unique property of the software and you could learn it through other guides online.

But this 30-minute tutorial shows you visually how to create a Sketch library of buttons using nested symbols in your work. It’s an incredibly practical approach to nested symbols, and you’ll take a lot away from the experience.

However this is not really made for absolute beginners. You should at least have some comfort tinkering in Sketch before diving into this video.

Flexbox for Sketch App

sketch flexbox video tutorial

Modern web designers need to follow responsive techniques. This holds true for frontend development and basic mockup design/wireframing.

In Sketch this process is super easy and this tutorial shows you how it’s all done. This video guide uses the auto-layout plugin made solely for Sketch as a responsive design tool. If you’re a web designer moving into Sketch then this video is a must-watch.

But you can also read through the written article if you prefer that instead.

Fast Prototyping with Sketch, Invision and Craft

invision craft sketch tutorial

Before tackling a full mockup you may want to prototype your website or application. This is like a visual plan for how all your pages fit together and how users traverse the interface.

With this video tutorial you’ll learn how to setup Sketch and how to connect it with two other programs: InVision’s backend along with the free Craft plugin.

An excellent guide for skilled designers who want to work more with prototyping in their day-to-day.

These are my top picks for free Sketch video tutorials but there are many more released each year. If you want to continue the search, try browsing YouTube to see what else you can find.

https://1stwebdesigner.com/free-video-tutorials-learning-sketch/feed/ 0
10 Tips for Effectively Promoting Your Brand with Video Content https://1stwebdesigner.com/brand-video-content/ https://1stwebdesigner.com/brand-video-content/#comments Sun, 09 Sep 2018 06:15:39 +0000 https://1stwebdesigner.com/?p=130748 Whether you’re just getting started with website videos or you think you’re a veteran, there is always something you can learn. Web design and content marketing trends shift on a dime – and your business must be aware of the changes on the horizon.

It’s vital to connect with your audience in meaningful ways, and video content offers a fantastic medium for doing just that.

Videos on your website have proven results in terms of leads and conversion rates. YouTube reports mobile video consumption increasing by 100% every year, and analysts predict video will comprise 80% of all web traffic by 2019. Companies are already seizing this immense opportunity, and video ads now account for roughly 35% of all online ad spending.

Perhaps the most compelling statistic to encourage you to explore video content for your own brand is that an entire third of the time people spend online is spent consuming video content. If you haven’t considered what video content can do for your brand, you’re missing this third of internet traffic.

If you want to implement video content or improve your website’s existing video content, consider the following tips for marketing video content more effectively.

1. Assess Your Current Content Marketing Strategy

Modern marketing professionals understand the need to constantly benchmark their campaigns’ progress, assess the returns on their various marketing investments, and measure engagement among their audiences. If you want to improve your site’s video content or wonder what kind of video content would work well for your brand, start by assessing your current content marketing strategy. Figure out what works, what doesn’t work, and what may work better with some adjustment.

Once you assess your current situation, expect opportunities for improvement to crop up throughout your marketing campaign. Take the time to explore video content related to your industry or niche and see what your target consumers seem to enjoy, and then start brainstorming ways to generate compelling, engaging video content of your own.

2. Make Your Content More Interesting

Video provides the perfect opportunity to recycle popular pieces of content and augment existing content in various ways. For example, did you have a blog post last year that was particularly popular? Did a social media post go viral? Think of the marketing success you’ve seen recently and see whether any specific pieces of content jump out at you. Consider repurposing older content into new, engaging video content that will delight your audience.

video production

Consider live events as well. The Periscope app for Twitter and Facebook Live has proven very successful to various marketing campaigns. Live events encourage your target audience to quickly find you and engage with you, and they are far more likely to share these events on social media. Even after the event concludes, you can use the recording on your site or your company’s YouTube channel.

3. Encourage Sharing

Live events lead to the next tip, which is to make your video content shareable. Social media may be the most powerful marketing tool since the invention of the World Wide Web, and it is foolish to discount or undervalue the impact social media has on modern life. Maintaining a social media presence for a business can be difficult.

You need to determine which platforms and networks your customers prefer and focus your attention there. While it may be tempting and even seem logical to create profiles for your company on every social media outlet, casting a wide net like this is far more trouble than it’s worth.

Additionally, your audience will more than likely prefer one or two outlets. Younger crowds will typically appreciate Twitter and Instagram, whereas older audiences tend to prefer Facebook and LinkedIn for the professional end of things.

social sharing

Once you’ve committed to a social media platform, fill your page with compelling content. Video is incredibly shareable, and your target consumers can enjoy video content while working or performing other daily tasks, making it a great opportunity for you to engage with your audience on a consistent basis.

Videos typically go viral faster than any other type of content, so don’t forget this when generating video content for your audience. A fantastic video could quickly spread across social media and provide an incredible boost to your brand recognition and conversion rates. However, a gaffe or poorly timed video could be fruitless or, worse, endanger your brand’s reputation.

4. Stay in Touch with News

Some of the best video content campaigns are in touch with the times and popular culture. For example, the Arby’s marketing team regularly releases short stop-motion videos of its food and branded paper products. In these shorts, an artist uses Arby’s bags and boxes (and sometimes condiments) to create portrayals of scenes and characters from new movie and video game releases.

These clips delight younger audiences, and if you browse Arby’s social media profiles, you’ll more than likely see quite a few comments from consumers saying things like, “I’m buying Arby’s today just because of this ad.”

5. Know Your Audience

Arby’s video marketing tactics are successful, because it knows it younger audience members and their interests. The company found a way to capitalize on this using a few bits of paper and cardboard and a video camera. That is an incredible return on investment for a large company, and its content reaches droves of fans.

6. Be Authentic

Modern audiences and consumers are very discerning and wary. The average person on the internet has learned to ignore things like banner and sidebar ads automatically unless they’re immediately recognizable and valuable.

Strive for authenticity in your video content. You might consider doing a tour of your company grounds or a behind-the-scenes look at some of your processes. You may also want to livestream company events or find other ways to incorporate video content into the other ways you engage with your audience.

video editing

Your consumers will appreciate seeing the more human side of a brand and can sniff out dishonest marketing easily. Authenticity and honesty are the keys to generating interest and enthusiasm around your brand.

7. Generate Brand Awareness

Two of the biggest benefits of video content are its shareable nature and the higher-than-average propensity for going viral and reaching hundreds of thousands – if not millions – of people. To have a compelling effect, create video content that generates excitement and enthusiasm around your brand.

Instead of encouraging your consumers to share your content simply by asking them to do so, make them want to share your content by creating fun and valuable videos.

8. Reap the SEO Benefits

Search engine optimization (SEO) is a mainstay of modern marketing. Marketers are always tweaking their sites’ keywords, keyword density, content refreshes, link history, and various other elements to achieve the most positive SEO results possible. On the flipside, search engines Bing and Google are constantly adjusting their algorithms to keep the playing field as level as possible for everyone.

youtube mobile app

Video content is valuable, and there is so much video traffic that search engines now incentivize companies to feature videos on their websites for better SEO. You may want to invest in a video hosting provider or simply embed videos form your company’s YouTube channel.

9. Multi-Device Engagement

One of the best aspects of video content is that consumers can enjoy it on various devices. Mobile devices have finally overtaken desktop computers and comprise the lion’s share of internet traffic, so make sure your video content responds beautifully across devices.

10. Stick to Short and Sweet

Creating effective video content doesn’t have to be a large-scale production. Some of the most successful video marketing campaigns didn’t cost any more than the time it took to record them. When creating video content for your brand, keep things short and simple. A curious consumer is far more likely to watch a two-minute video than a 10-minute one, so get your point across quickly and effectively, and don’t rely too heavily on pageantry.

Ultimately, every brand will have different opportunities and face different challenges in the effort to create effective video content. These tips are just to get you started thinking about ways to create or improve video content.

Your biggest opportunities lie in your existing content strategy, how well you know your audience, and your business goals. Approach video content with a clear goal in mind and filming will be much easier than you may expect.

https://1stwebdesigner.com/brand-video-content/feed/ 1
Choose NoyanWeb for Your Digital Design and Branding Needs https://1stwebdesigner.com/choose-noyanweb-for-your-digital-design-and-branding-needs/ https://1stwebdesigner.com/choose-noyanweb-for-your-digital-design-and-branding-needs/#respond Fri, 07 Sep 2018 16:54:14 +0000 https://1stwebdesigner.com/?p=139388 Your company’s digital branding assets play a key role in helping you achieve your goals. Without a top-notch website and logo, it’s nearly impossible to stand out from the crowd. And, if you don’t have a cohesive branding strategy, your message won’t reach the intended target.

That’s why it’s critical to have a partner who understands your needs and is always one step ahead. You’ll want to work with a company that can handle all of your specific design, branding and marketing requirements. NoyanWeb offers all of this and more.

NoyanWeb is a creative digital studio specializing in web design, UI design, custom development and branding. They have the experience and eye for detail to make your next project a success.

NoyanWeb Creative Digital Studio

Web Design and Development

Simply having a website is no longer enough. Today’s websites need to both look and function on a higher level.

NoyanWeb will provide you with a custom, professionally-designed website that covers all the bases. Each site is built to your specifications and includes content management capabilities. Your site will also be responsive, looking great on both mobile and desktop devices.

But you’re getting much more than a great website at an affordable price. Each of their design packages comes with:

  • Fast Turnaround
  • 1 Year of Free Web Hosting
  • Free Domain Name
  • Free Email Address
  • Money Back Guarantee

Web Development Services

NoyanWeb’s expert developers can build custom front and back-end solutions that will further enhance your site’s functionality. Features like shopping carts, forms and social media integration can be added to help fuel the growth of your business.


Optimizing your website for search engines is vitally important. SEO can drive visitors to your site and give you an edge over your competitors. NoyanWeb has the vast knowledge and experience required to ensure that your website is properly indexed by major search engines. They can also provide you with a proven strategy to help you stay successful over the long term.

NoyanWeb Web Design Portfolio

Branding and Graphic Design

The value of great branding is undeniable. Consistent messaging across all platforms will help you reach customers, wherever they may be. It’s the engine that drives your business.

Covering the full spectrum of branding services, NoyanWeb will work with you to ensure that your message is heard loud and clear. They’ll develop brand guidelines that will act as a roadmap for all of your marketing efforts.

From there, advertising, content creation and social media management services will follow the established guidelines. Over time, you’ll find that this consistent approach leads to a brand that stands out as unique. It’s a surefire strategy for separating yourself from the competition.

Logo Design

Your logo says a lot about who you are. Therefore, it’s vital to make a strong first impression. NoyanWeb’s creative specialists will devise a logo that is as unique as your business.

Custom Graphics

Don’t settle for stock images! In order to fully build your brand, you’ll need graphic elements that reflect your identity. Images for your website, packaging and ads should be considered too important to be left to one-size-fits-all graphic warehouses. Instead, trust the team at NoyanWeb to create something that is the perfect fit for you.

NoyanWeb Graphic Design

Get Started with NoyanWeb’s Complete Branding Solutions

Let’s face it. There are plenty of options when it comes to hiring a firm to handle your web and digital branding needs. But not all are equally capable of producing great results at a reasonable cost.

NoyanWeb offers a unique balance of top-quality services at affordable rates. Their dedicated team has the knowledge and experience to help you get the most out of your brand.

Get in touch with NoyanWeb today and put your business on the path to success.

This article has been sponsored by Syndicate Ads.

https://1stwebdesigner.com/choose-noyanweb-for-your-digital-design-and-branding-needs/feed/ 0
10 Fantastic Examples of Progressive Webapps https://1stwebdesigner.com/fantastic-examples-progressive-webapps/ https://1stwebdesigner.com/fantastic-examples-progressive-webapps/#respond Thu, 06 Sep 2018 09:43:49 +0000 https://1stwebdesigner.com/?p=132833 The concept of a progressive webapp (PWA) is simple. Developers create websites that behave like native applications for all environments. These work like hybrid site-app combos where you have “webapps” that can run natively on a mobile device and just as well on a desktop web browser.

If you’re looking for some examples of PWAs then this collection is sure to please.

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

English Accents Map

english accents map

The English Accents Map site is one of the strangest yet most interesting progressive webapps I’ve found. It features pin markers for different accents in regions across the UK and the US.

Each marker links to a set of videos from YouTube. These videos have been created by people with that local accent, so you can listen and study how certain areas of the world speak English.

Really cool PWA and definitely one of the coolest concepts I’ve seen for a website.

React HN

react hn webapp

The React.js craze isn’t slowing down anytime soon and it’s certainly a staple for building any progressive webapp.

One example is the React HN site that pulls data from Hacker News and loads it all into a neat React.js webapp.

This is designed just like the HN homepage but it can operate like a native app on mobile devices. It doesn’t support account logins but you can do pretty much everything else, and it’s got a real snappy interface to boot.


currencyx converter

Looking for a free currency exchange rate app for your iPhone? Currency-X has you covered.

This free PWA works around a handful of currencies and runs with live data from APIs. This way the currency conversion rates are accurate and you can test them against pretty much every country from Kenya to Vietnam.

I do think the UX is lacking a bit and could be improved for mobile. But on the whole, this is one of the more impressive apps considering how much data it pulls.


pokedex org webapp

All you Pokemon fans are gonna love Pokedex.org for its simplicity and ease of use.

This webapp behaves like a literal Pokedex where you can search for monsters and get all their stats quickly. Data comes from the Pokeapi along with Wiki pages to ensure total accuracy.

And while this doesn’t distinguish between the different games it’s still an impressive webapp for the amazing price of free. Perfect for Pokemon players who want quick access to quick data.

GitHub Explorer

github explorer pwa

Web developers love GitHub for its massive curation of free resources. The site has become a go-to resource for code snippets and now with GitHub Explorer you can dig into those code samples yourself.

The site is still a work in progress but it lets you browse through two methods: users and repos.

You can search by username or by repo name and pull up data fast. This includes the full readme file, all directories, and recent updates. However the search feature doesn’t include every repo so it’s more like a demo app showcasing what PWAs can offer.


flipkart ecommerce

Believe it or not there are entire eCommerce shops that support PWA features. Flipkart is the only one I know of but their website is absolutely massive.

This India-based eCommerce site offers complete support as a native mobile application. You can search, browse products, and use your account to purchase items all with a native feel.

I’d argue this is the most complex PWA on the web and it deserves an award as one of the best UX’s I’ve seen all year.

Expense Manager

expense manager pwa

If you want to track some quick expenses on your phone then the Expense Manager app is a nice place to start.

This thing behaves more like a simple calculator but it can save data for the long term. The demo account clears data after one hour but you can try the Vaadin framework yourself if you want a longterm solution.

The Expense Manager is mostly used to help sell this framework and bring attention to the company. And for that I’d say it gets the job done with plenty of “wow” factor to go around.

Offline Wikipedia

offline wikipedia

Here’s another cool demo app that I think should actually be built into the core of Wikipedia.

Offline Wikipedia is a PWA site created by Jake Archibald. It’s fully compliant with all the ideas of progressive webapps so it works on smartphones, tablets, laptops and desktops alike.

The interface is also pretty snappy so it’s easy searching and finding Wiki articles. Probably one of the few PWAs that I think really could add value to the main site.


splittypie expenses

Never worry about splitting the bill again with Splittypie.

This app is fantastic and for the price of free you can’t beat it. You just visit the site in your browser and you create new “events” for tracking prices.

Whether you’re splitting a meal or the price of a ball game this app works for any device at the click (or tap) of a button.

Also the source code is freely available on GitHub if you want to use this as a base for your own PWA.

FT App

financial times pwa

The massive publishing giant Financial Times surprisingly has their own PWA and it works really well.

Their app runs just like a news site except it’s fully responsive to touch. This means it behaves exactly like a native application where you don’t see new pages load, they just slide into view.

I’d like to think the future of publishing is full of websites like this. We’re already seeing this with Google AMP but that’s only a small step towards full PWAs.

Get Kana!

get kana training webapp

Last but certainly not least is the Get Kana app. What’s cool is this site actually has a full application in the Android and iOS app stores.

But this progressive webapp is the next best thing for anyone who wants to try it out in their browser. It’s a Japanese learning app where you can learn the syllabaries for katakana & hiragana through flash cards.

Not something that everyone will find useful but absolutely one of the cleanest PWAs I’ve used. And best of all their code is freely available on GitHub if you want to dig into that too.

https://1stwebdesigner.com/fantastic-examples-progressive-webapps/feed/ 0
10 Free Mockup Templates for Promoting Mobile Apps https://1stwebdesigner.com/free-mockup-templates-mobile-apps/ https://1stwebdesigner.com/free-mockup-templates-mobile-apps/#respond Wed, 05 Sep 2018 07:47:49 +0000 https://1stwebdesigner.com/?p=133201 When it comes to presenting your work as a designer, it’s important to ensure your work is shown off as well as it possibly can be. For mobile apps, often the best way to achieve this is through mockup templates, which include devices such as the iPhone, iPad and Google Pixel.

By presenting designs within a mockup, it allows the viewer to visualize the design within a realistic situation, and within the device it was intended to be designed for.

There are now an incredible number of high-quality mockup templates available, many of which are free. In this article, we are going to round up ten of the best free mockup templates for featuring mobile apps.

Read about the latest design trends in mobile device mockups in web design here.

Unlimited Downloads: 500,000+ Mockup Templates, Fonts & Design Assets

iPhone Clay Mockup Templates (Sketch)

iPhone Clay Mockup Templates

Minimalistic Mockups for Presentations (Photoshop & Sketch)

Minimalistic Mockups for Presentations

Black Matte Devices Mockups (Photoshop & Sketch)

Black Matte Devices Mockups

Samsung Galaxy Mockup Template (Sketch)

Samsung Galaxy Mockup Template

Trendy iPhone 7 Mockup (Sketch)

Trendy iPhone 7 Mockup

Google Pixel Mockup Template (Sketch)

Google Pixel Mockup Template

Minimalistic Smartphones Mockups (Photoshop & Sketch)

Minimalistic Smartphones Mockups

Isometric White iPhone Mockups (Photoshop)

Isometric White iPhone Mockups

Animated iPhone Mockup Templates (Photoshop & After Effects)

Animated iPhone Mockup Templates

Simple Mobile Mockups Dark (Photoshop)

Simple Mobile Mockups Dark

Know of any other great free mockup templates for featuring mobile apps? Share them below in the comments!

https://1stwebdesigner.com/free-mockup-templates-mobile-apps/feed/ 0
Interesting Design Trends from the Portfolios of Web Designers https://1stwebdesigner.com/design-trends-web-design-portfolio/ https://1stwebdesigner.com/design-trends-web-design-portfolio/#comments Tue, 04 Sep 2018 06:00:06 +0000 https://1stwebdesigner.com/?p=131329 The portfolio design of a web designer is an ever-evolving process of redesign after redesign. It is their portal to prospective clients and employers and thus has to, in itself, show off the web designer’s wide-range of skills while pushing the boundaries of the latest design trends.

This area of web design is of particular importance to the overall aesthetic of the web and can give great insight into the direction that the current web design trends are taking.

Today, we’re going to take a look at some of the most recent web designer portfolio trends and showcase examples which implement these trends highly effectively.

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

Resume-Style Portfolios

Until recently, there was considerable focus on imagery on web designer portfolio sites. Now we see a shift towards more resume-style portfolios where the portfolio is a set of links to live products, projects, or previous companies.

This is likely, in part, a response to many companies looking for live portfolio work and projects, as opposed to pure visuals.

Design Trends Portfolios Web Designers

Floating Elements

Floating and randomly placed elements can introduce personality to a portfolio design. It signals a shift away from the very structured, template-like layouts that we have become so accustomed to (and quite truthfully now struggle to make a portfolio stand out).

It is particularly effective in combination with visuals such as past work or imagery.

Design Trends Portfolios Web Designers

Experimental color schemes

Likely a product of the brutalist web design trend, experimental color schemes are popping up more and more in web designer portfolio websites and producing some highly visual results. The schemes often involve gradient background colors, high contrast, and bright primary colors.

Design Trends Portfolios Web Designers

Unique spacing and layout

Many web designers are shifting away from the more generic grid-type layouts and defining their own unique layouts and spacing.

This has resulted in some truly unique results and make for some exceptional visuals such as in the example below. It uses a split layout while incorporating multiple text alignments, monochrome imagery, and vast areas of whitespace.

Design Trends Portfolios Web Designers

Diagonal scroll

Gone are the days of horizontal scrolling, and in its place is a far more usable alternative: diagonal scrolling. You can test it out here. A simple vertical scroll results in images that move diagonally across and up the screen, resulting in some lovely visual effects. It feels natural, sophisticated, and will no doubt catch on as the second half of 2017 nears ever closer.

Design Trends Portfolios Web Designers

Have you stumbled across any stunning web designer portfolios recently? Share them with us below!

https://1stwebdesigner.com/design-trends-web-design-portfolio/feed/ 2
10 Simple CSS Snippets for Creating Beautiful Blockquotes https://1stwebdesigner.com/css-snippets-blockquotes/ https://1stwebdesigner.com/css-snippets-blockquotes/#respond Mon, 03 Sep 2018 06:29:22 +0000 https://1stwebdesigner.com/?p=129817 Why reinvent the wheel designing elements that already have free designs online? Blockquotes remain a staple of text-heavy websites and they come in so many distinct styles.

I’ve curated my top picks for the best free blockquotes you can find. Every one of these designs uses pure CSS code so they’re easy to replicate.

Circular Quote

Perhaps the most unique and stylish quote of this entire post is this literature circular quote.

It rests on a bright orange background so this may not be practical for your typical layout. But with some minor color adjustments it would look nice on a white background regardless of the layout.

The most spectacular part is that every element is created with pure CSS including the rounded circle pattern. It’s a truly pragmatic blockquote that also pushes the boundaries of CSS.

BQ Patterns

For tamer examples check out these blockquote patterns created by developer Derek Wheelden.

This again relies purely on CSS3 with different classes for each blockquote. The last of the 3 has the footer element to cite the quote source. It’s an optional feature that some people like, certainly not necessary for a simple website though.

It goes to show how much you can achieve with unique fonts and some minor CSS tweaks.


It might be hard to believe but this notepaper blockquote is created entirely with CSS3 code. No background images, no vectors, just CSS gradients and transforms.

I can’t say how many people would find this design useful. It’s a fantastic notecard that really does replicate the style of paper. But regardless of how it can be used, this design is beyond incredible and it proves how far CSS has come.

The HTML is fully semantic with modern blockquotes and this should work in all modern browsers. A magical use of web technology if I’ve ever seen it.

Classy Blockquotes

Sometimes it makes sense to include a photo of the person being quoted. This may sound tough but you can clone these blockquotes by Andrew Wright to get this effect on your site.

Andrew’s pen uses placeholders for images so they do look a little… basic. But there’s nothing to stop you from changing some colors, updating the fonts, and adding a photo to spice up your quotes.

A very simple design and pretty easy to restyle on your own.

Simple Block

This is by far my favorite blockquote because it really can work on any website. Developer Harm Putman uses the cite attribute from the blockquote to populate a citation at the bottom.

I really like the dividing bars that clearly separate the blockquote from the rest of the content. This includes a small quotation mark icon fixed in the middle to let the user know this is a clearly a quote.

Sleek, elegant, and simple. Three traits that work well in any website.

Greyed Block

For a darker approach check out this greyed blockquote that can double as a pullquote if resized.

It has a pretty clean design using Font Awesome blockquotes and lively text. I think it’d look a lot better with a stronger font but it’s certainly legible with anything you use.

I consider this as a solid “base” for building on top of and styling your own blockquote from there.

Automatic Quotes

This design by Luke Watts is more of a pullquote than a blockquote. The quoted text pulls to the side of the body text, but it still draws attention with bright colors and quotation marks.

It’s called an automatic quote because it adds the quote marks into the design via CSS. So you can just wrap your text in the proper tag and it’ll automatically style it with quotations. Pretty sweet!

However as a blockquote this would be fairly basic. I think this works best as a pull quote and does its job well.

Raised Blockquote

You can do a lot with CSS box shadows to create depth and clarity. This raised blockquote by Lukas Dietrich is pretty simple and real easy to clone.

It has one background color and a pretty clear box shadow near the bottom. This also uses a custom Google font called Bitter for the upright quotation marks.

If you have a darker layout or if you’re willing to adjust the drop shadow a bit then this quote style can fit almost any web project.

Alternating Quotes

These alternating quotes by Tommy Hodgins prove that you don’t need much to create fantastic blockquotes.

By adding a small grey border to one side you separate the text from the rest of the page. It will clearly stand out against the page body which and makes browsing any page a whole lot easier.

Plus the alternating styles let you add these with any orientation you like.

Material Design Blockquote

Last but not least I found this cool material blockquote using similar colors and styles from Google’s material design rules.

The background icon is what really makes this stand out and feel like a true blockquote. I do think the font color is a tad light, but this can always be adjusted for use in your own website.

This is the coolest material-style blockquote you’ll find and it’s totally free.

All of these blockquote styles are fantastic but certainly not the only ones. You can find many more online with lots of variety to pick from. So if you’re looking to browse more check out the blockquote tag on CodePen to see what else is out there.

https://1stwebdesigner.com/css-snippets-blockquotes/feed/ 0
Getting Traction for Your Newly Launched Website https://1stwebdesigner.com/getting-traction-newly-launched-website/ https://1stwebdesigner.com/getting-traction-newly-launched-website/#comments Mon, 03 Sep 2018 05:11:23 +0000 https://1stwebdesigner.com/?p=129651 Website Launch Day. How it Goes, Every.. Single.. Time..

Day 1. Your site is now live. It is the best thing ever. Install Google Analytics. Remember to write a privacy page and disclaimer page about Analytics and cookies. Sit glued to your Analytics account for the rest of the day tweaking every aspect in the Analytics console. Oh yeah, while we’re at it, don’t forget to add the site to Google search console too. Great. Done. Sit back and relax. Have a beer. You have done well young Padawan.

Day 2. Enthusiastically dive into your Analytics account. “Hmm, not many views today. Ok I will give it some time.”

Day 3. Open Analytics. “Oh I have a couple of clicks. No, wait – those were me. Doh.” Hound a bit on social media about how great your site is… Check back on Analytics.



Day 5. Distress, sadness, and an overwhelming feeling of failure. “Maybe I’m not cut out for this web design lark?”

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


You are in this for the long haul and I am afraid to say there are no easy routes to success here. I am here to tell you it’s going to be tough. Perhaps tougher than you think. Have you got what it takes to succeed? Good! I admire your determination. Now, read on and find out about tried and tested ways to get traction for your website.

I hate to say this, but without visitors your website is dead

No matter how innovative the product or service is, or how asthetically pleasing the design, if people are not visiting your website the simple fact is – it is a dead website. The thing is though, you think your site is brilliant, and do you know what? It probably is! But who cares?! Who knows about it? Why should a perfect stranger be interested in it?

You could use social media or send out press releases, but with so many brands clamouring for attention, those messages can often have little effect.

Without Good Content Your Website is Dead

Again, it could be visually the best thing ever, but if there is no content, nothing of real substance, it is a dead website. Content is everything. Think carefully about headlines for page articles. Keyword research will help you a little here but use it as a guide only.

If your site is not primarily a blog, think about adding a blog section. It can be tough and hard work, but a blog is very important . Write at least 1 or 2 articles about your field every week. Let the world know you are an expert in your field. If you are not an expert, give them another reason to visit. Matthew Inman gets visitors by making people laugh. It might not work for everybody, but it sure worked for him. (5 million monthly views).

Give people what they want. Make your ‘about page’ about the visitor, not about you, i.e. written with them in mind. Enlist the help of a skilled copywriter if you feel out of your comfort zone. Most web designers probably are in this regard. They can make a site work well and look nice, analysing the code in depth. As for writing about themselves and their business in a compelling and engaging way, that’s another matter entirely.

First Things to do After Your Site is Launched

Get your site indexed. Submit your url to Google. You should also consider submitting it to Bing and Yahoo as well. You don’t necessarily have to do this as the search engines will pick up your website in time. However, this step will often speed up the process. (We give Google particular attention as they are the biggest player with over 70% of the world’s market share of search.)

Submit a sitemap in the Google search console and check that there are no issues with the site and that your site has a robots.txt file.

Keep calm. Frantically changing things around too soon won’t do you any favours in the search results, especially if it is a newly registered domain. Give it some time. Keep drip feeding new, quality articles periodically over the next couple of weeks.

Pitfalls to Avoid

1) Write for your users, not for robots. It’s ok to listen to SEO advice but if you are not careful your articles will lose their appeal and become spammy and your readers will not appreciate it. This has been said before, and many so called SEO experts that have fixated on certain things are having to constantly re-evaluate their approach.

If you want your site to do well in the long term, filling your page and site with spam is not going to work. Google is constantly looking at this. Do it right and you will be rewarded. Write content for your user first, and for search engines second.

2) Avoid any tool that says it is easy, quick, or cheap. Anyone making you promises in that regard will only do you harm in the long run.

Tried and Tested Tips that Work

Here are some top tips from people at the top of their game who have either tried this or witnessed first hand what happens when people do. These are not just my words, they are things that have been proven to work.

1) Invest in a short, aesthetically pleasing video.

“If there’s one thing every startup should invest in, it should be a short, aesthetically pleasing video that explains exactly how its product works. As a journalist covering startups, I guarantee no amount of selling a concept over the phone is as effective as a well-produced video that clearly communicates the benefit of the app or software. If there’s a good video, I almost always embed it in my article. Bonus points if it’s funny.” Omar Akhtar is the senior editor for The Hub, based in San Francisco

2) Write an article for a popular online resource in a similar field. Often you will get a credit and link to your website.

3) Offer something for FREE: Like an ebook, website template or plugin (maybe you have some code for a project that never saw the light of day) and then aggressively promote it. It will definitely attract a lot of new visitors. For web designers, try to get a free theme featured on WordPress.org and make sure to link to your website, or create a free theme in a niche that people are looking for and feature it prominently directly on your site. It will help immensely.

4) Submit your page to StumbleUpon. Be prepared to expect a high bounce rate, but it can create interest (sometimes a lot of interest at once). That said, it can be very hit and miss, so there are no guarantees here. People have also reported success with their paid results, but here we are particularly looking at organic methods.

Other Tips

  • Performance. Look at page speed (or site speed). Yes Google has made page speed part of its search algoritm, so it’s going to affect your search engine results (to what degree I am not sure, but it’s a fact). However, more importantly, people aren’t likely to stick around or come back for more if your page takes an eternity to load. This applies even more so to mobile. Start with your theme, keep it clean and functional. Don’t do with an image that could be done with css. Optimise images (especially for small screen widths). Look carefully at your typography and ensure it reads well on all devices.
  • HTTPS? Regarding search engine results, the jury is still out on this one for many people. Clearly if you are selling online or passing sensitive information an SSL is a must. Since you are just starting out you won’t have the worry of losing your position in Google so it’s probably a good idea to start with HTTPS from the off rather than have to switch down the line. The web is certainly moving that way, and it will show that you value your visitors security, which is always a good thing, and can go a long way to building trust.
  • Link building. Just to be clear here, we are talking about building meaningful relationships with other website owners and working to build a meaningful brand online. This takes time. We are not talking about artificial manipulation of the search engines with spammy link building campaigns.
  • Get social. Love it or loathe it, you cannot really afford to ignore social media. Promote your website on Twitter and Facebook. Whilst you may want to utilise some automated tools for sharing your articles (time is precious after all) remember to keep the human element, engaging with your followers whenever possible.
  • Learn from your mistakes. Of course, success comes from doing things “right”, but when you are just starting out you will likely make many mistakes. Don’t let fear of failure stop you. Successful people have often made a lot of mistakes, but the key thing is that they don’t quit. They keep moving until they arrive at their goal.
  • Above all else – Be patient, be persistent and keep positive.

Let’s face it, there are not many overnight sensations when it comes to a website. There may be the odd exception of course, but if you are like the vast majority of us, it is going to take time. Try to avoid the temptation to take shortcuts – to the dark side you will stray!

Ok, there is nothing new here. It has all been said before many times, but it is worth repeating. Be determined, and your hard work will pay off. 3-6 months of following the above advice and your site is bound to be getting relevant traffic and traction.

https://1stwebdesigner.com/getting-traction-newly-launched-website/feed/ 2
Tips for Increasing Your Creative Output https://1stwebdesigner.com/research-backed-tips-creative-output/ https://1stwebdesigner.com/research-backed-tips-creative-output/#comments Sun, 02 Sep 2018 06:59:03 +0000 http://1stwebdesigner.com/?p=128310 As a creative, no matter how expert you are at your craft, there will be times when you’re not producing as much as you could – and you know it. Our lives are filled with millions of distractions these days and it’s easy to get into the habit of following inefficient processes that make it hard to be productive.

And, ironically enough, our best tool is the same thing that creates the biggest obstacle to our creative flow: the computer.

As designers, we have to spend hours in front of screens, but studies show it’s not great for our health and overall wellbeing. After a number of sleepless nights, a bout of carpal tunnel, and frequent migraines, I decided to see if there was a way to fulfill my desire to create – but with more time spent away from the screen.

So here’s what I found. These research-backed steps will help you create the structure you need to produce far more creative work in less time – and feel amazing doing it.

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

Make the Choice

The first step in fixing any problem is awareness that it’s actually a problem. And the second step? Making the choice to correct it. Deciding to spend less time in front of a screen and actually get more done might mean seriously revamping the entire structure of your day – not an easy challenge to face.

You might be addicted to the feeling of busyness that you get from sitting in front of a screen all day. If you’re really committed to more creative output, it’s time to make a change.

Have a Process

As creatives, we tend to work based on our our shifting flows of energy and inspiration. But while this might be a nice, romanticized notion of the creative process, professionals know it’s not the best way to get sh*t done.

Let’s be clear: the difference between a professional and an amateur is process.

Everyone essentially has two brains fighting for control: One that thrives on process, and the other that thrives on distraction. Tim Urban calls them the “rational decision maker” and the “instant gratification monkey” in his TED Talk, “Inside the Mind of Master Procrastinator.”

The instant gratification monkey in your brain will convince you that getting distracted for eight hours on Dribble counts as productivity. Don’t be fooled. Use process to corral that monkey energy into your creative genius.

Mise en Place

I learned the practice of mise en place while working as a chef, and implementing it into my creative process has dramatically increased my output. Before any chef starts to cook, they gather all of the ingredients and tools they will need to prepare the meal around them. By bringing them close, the tools work almost like an extension of their own arm as they cook.

I’ve lost count of the number of times I’ve been immersed in a design, only to have my laptop run out of power – or have a great brainstorm session come to a halt because I ran out of Post-Its.

So prepare like a chef. Take five minutes to set up your workspace before you sit down for your next design session. Think about things like charging your laptop, opening all of the programs you need, sharpening pencils, and placing paper, Post-Its, and other supplies nearby.

Pencils Before Pixels

When it comes to efficiency in design, I believe the pencil is mightier than the pixel. While many designers swear by software to flesh out their ideas, I ideate and prototype using pencil and paper for as long as possible. That’s because no matter how many Photoshop shortcuts you know, you’ll never be able to ideate faster than you can with a simple pencil and paper.

The simpler the tool, the quicker you work – and the more rapidly you can get your ideas down. What’s more, starting work on pencil and paper means you can start showing your ideas to customers as quickly as possible.

Because feedback is such an essential part of design, the sooner (and more frequently) you get it, the better your work will become. Validating your ideas before transitioning to the screen is the best way to ensure your product fits your market – and you keep screen time to a minimum.

Turn Off Distractions

A study done at UC Irvine showed that the average worker is distracted every 11 minutes, and that it takes 25 minutes to return full focus to the original task after an interruption.

From social media notifications flooding our every device, to emails pouring in and the latest and most interesting information just a click away on your favorite (distracting) websites, we are constantly encountering distractions throughout our “productive” workdays. If you are truly committed to living up to your most productive potential, it’s time to turn off the distractions – or at least start asking some very important questions about them.

Start with this process of questioning the various online tools you use on a daily basis: What is it? Why is it useful? How much time do I need to spend on it?

Once you’ve determined exactly what these sites are giving to you – and what they’re taking away – it’s time to make decisions about which ones you can truly shut off during your work day.

If you need a little bit of help cutting out the noise, try RescueTime to see where you’re spending your time, Social Fixer to filter your Facebook newsfeed, or the Kill Newsfeed extension to get rid of it all together.


The Pomodoro technique is a research-backed time-boxing tool that has helped thousands of people ensure they’re using their time in the most productive way.

the pomodoro technique steps

Studies have shown that our attention span dwindles around the 40 minute mark – yet so many people push and struggle through this natural ebb in focus.

The Pomodoro technique encourages you take a short (emphasis on the short) break every 25 or 50 minutes. The idea is that the break lets you naturally re-energize your brain and body to keep producing great work over a sustained period.

Embrace “Smartcuts”

While taking shortcuts in design can get you into trouble, smartcuts include any tool, method, or resource that helps you design more quickly. Every designer has their own preferred set of smartcuts, which might include app-specific keyboard shortcuts, design patterns and color palettes, icon collections, sketch plugins, and more.

The idea behind a smartcut is that you don’t need to reinvent the wheel when you sit down to design. From utilising existing design patterns to icon libraries, embracing the design sprint methodology to learning keyboard shortcuts, there are so many processes that have been specifically designed to save you time and make your job as a designer easier!

So every time you find yourself doing a repeatable process, stop and see how you can either systemize it yourself to save time, or find an app that already systemizes that for you.

Putting it all into Action

Many creatives resist the idea of systems and structure, claiming that these “left-brained” tools will impinge on their intuitive flow and freedom. But the truth is, we need these structures to allow the freedom and flow to happen within them. All of these tools set the stage for our most creative energies to pour forth in their fullest expression.

Keep in mind that you can always take what works and leave what doesn’t – one method isn’t meant to work for everyone, and creatives in particular need to find their best fit. But whichever strategies you decide to try, they’ll help you reclaim your creative energy and harness it into producing your best work.

https://1stwebdesigner.com/research-backed-tips-creative-output/feed/ 1
Creating Memorable Icons, Logos and Favicons https://1stwebdesigner.com/icons-logos-favicons/ https://1stwebdesigner.com/icons-logos-favicons/#respond Sat, 01 Sep 2018 08:01:32 +0000 https://1stwebdesigner.com/?p=136038 The importance of good branding can’t be overstated. Something as simple as your company logo can make the difference between being forgotten, turned down for a more recognizable competitor or ultimately accepted.

There are many ways to give your company more identity, like using a catchy jingle or slogan. But some of the most important aspects of branding are the visual ones: your logos, favicons, and icons – the graphics that appear on your website.

Logo used in social media.

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

How to Design Unforgettable Icons

The #1 rule for designing website graphics is simplicity. Geometric shapes are common. This rule can occasionally be broken, but generally, you want something so simple a child could draw it.

Bright and flat colors, with no more than cartoon shading or a gradient, are optimal. That’s if you use colors at all; many logos are simply black and white. In any case, avoid using more than three, and have a distinguishable silhouette.

Use a program like Photoshop or GIMP, and never forget the transparent background! There’s nothing more unprofessional-looking than a favicon with a white background.


Your logo is the face of your company, the piece of art that represents your organization. It will be on your website, advertisements, videos and even social media avatars.

There are many kinds of logos and ways to present them. Image-only logos, or wordmarks made entirely of text, are popular. You could combine the two, or create an icon with a short tagline. Whether you go for some or all of these ideas remember the tips we previously mentioned: bright colors and simple shapes are best.

Match your logo to your site’s theme. If you have a minimalist white website, striking colors like red contrast well, while purple backgrounds will look best with an orange logo. Reinforce your palette by using its colors on buttons, bars and anywhere else that’s fitting.

Logo Collage


Icons are small-to-medium sized images commonly used by software developers or as a logo variation.

Desktop and app icons are often more complex, using pictures of mascots, objects, or emblems from the application. Using only simple letters or shapes is uncommon, so you may need to create something new, even if it’s just a shaded version of your logo.

However, similar rules apply. Don’t make the icon too complex or it will be hard to see. It should stand out clearly against even the busiest of wallpapers. Cartoon shading is still best; bright, flat colors contrast well against varying backgrounds.

If you’re using an icon as a button or smaller alternative to your logo, follow similar steps to creating the original. The two should be linked together. Google’s icon, a “G” using the colors of the main logo, is a great example.



The tiny image in the corner of your browser tab is a favicon – used to identify a website. They’re the easiest to create, being small and frequently a recycled design. But don’t be lazy! If you downsize your logo, you’ll have a blurry mess. Recreate it from scratch, or at least make sure it’s the right shape with no artifacts.

There’s generally only room for a letter or two in your favicon. If you just have a wordmark, use an image or only the first few letters. Remember, in a bookmarked list, your favicon should clearly convey which website is yours.

Instagram on a mobile phone

Capture Visitors with a Striking Logo

By now, you should understand the importance of branding and have a better idea of how to design timeless graphics. Since logos and icons are often small and simple, even non-artists and individuals shouldn’t have trouble making their own.

But if you do struggle, consider hiring a professional. It might be pricey, but it’s better than nothing at all. Otherwise, there are many logo and favicon generators out there. If you’re not sure where to begin, these tools can get you started.

https://1stwebdesigner.com/icons-logos-favicons/feed/ 0