Archive

Archive for January, 2018

Visual Studio Code Can Do That?

January 9th, 2018 No comments

About two years ago, I begrudgingly opened Visual Studio Code (VS Code) for the first time. The only reason I even did so is that I was working on a TypeScript project (also quite begrudgingly) and I was tired of fighting with the editor and the compiler and all of the settings that I needed to make a TypeScript project work. Someone mentioned to me that TypeScript “just works” in VS Code and I was pleasantly surprised to find that they were right.

Categories: Others Tags:

20 Best New Portfolio Sites, January 2018

January 9th, 2018 No comments

And it’s here! January 2018 has arrived in all its cold, cold glory, and I just spent the first few days of it looking at portfolio sites. I do it all for you, dear Readers. I do it all for you.

This month doesn’t have a particularly specific theme, unless you count pretty much every variation of minimalism. There’s nothing completely new, and nothing completely old. I’m seeing more and more effort being made to strike a balance between extreme design philosophies, and I have to say that I’m quite liking some of the results.

Note: I’m judging these sites by how good they look to me. If they’re creative and original, or classic but really well-done, it’s all good to me. Sometimes, UX and accessibility suffer. For example, many of these sites depend on JavaScript to display their content at all; this is a Bad Idea (TM), kids. If you find an idea you like and want to adapt to your own site, remember to implement it responsibly.

CRUX

CRUX takes home the award for commitment to a concept. They work a lot with video, so they went and applied the timeline concept to the navigation on their one-pager. We’ve seen this once before in a previous portfolio article, but CRUX takes a less minimalist approach to the concept.

Fons Hickmann

Fons Hickmann’s portfolio is a shiny new example of what I’m calling the “Brutal Powerpoint” style of design. (W000! My first made-up trend name of 2018 has just happened, people! And no one has told me to stop yet.)

It’s all about mixing elements of minimalism, brutalism, and presentation-style sites to create something that feels like it was torn from two completely different design manuals.

Ben Mingo

Ben Mingo’s portfolio is classically minimalist, spiced up with animation. It’s on this list primarily because its layout and typographical elements are just that lovely.

My only peeve would be that I can’t use my scroll wheel on the home page. Drag-to-navigate is a normal interaction on mobile, but it seems clunky and inefficient on the desktop.

Zero

Zero uses a moderately stylized form of minimalism for its agency site. That balance between style and classic minimalism results in a site that is easy enough to navigate, but is still loaded with personality and potential.

Adoratorio

Adoratorio is a slick-yet-simple example of minimalism gone animated. It’s clean, it’s pretty. I’m actually kind of impressed by the way they implemented that slideshow on the home page. I’m still not sure slideshows are the best thing ever, but I like the way this one was done.

Root Studio

Root Studio is here because it uses yellow in a perfectly pleasant way. It’s here because the typography is lovely and very, very readable. And because I turned off the JavaScript and everything worked perfectly.

Ugh, I told myself I was gonna get off that particular high horse for a while, but I still love it when I find a site that degrades gracefully. Whatever. Root Studio = good. Go look at it.

The Glyph Studio

The Glyph Studio uses a highly presentational design. Considering one of their clients is Wix, I’m assuming that’s what they were going for. While highly animated, everything is tasteful and, dare I say, elegant. They obviously had an art director working on their case studies.

Gabe Abadilla

I’d just like to give credit to Gabe Abadilla for embracing the inevitable nickname/meme and buying “gabadilla.com”. He’s a good sport. He’s also got a lovely one-page portfolio.

It’s nothing too experimental, or out of the ordinary. It just looks good and works better. I would define the design aesthetic as aggressively pleasant, more than anything else.

Jake Stangel

Jake Stangel combines pastels, minimalism, and background video to create a simple experience that just gets the point across. I do feel some of the text could use a bit more contrast, but the presentation of the imagery stands out more than enough to make up for it.

Ben Wegscheider

This one is on the list just for the “odd” factor. From the get-go, this portfolio hits you with animated effects straight out of that old ’70s sci-fi movie you have on VHS. And it doesn’t really stop. To counter the somewhat distracting animation, the rest of the site is dead simple, with large typography that mostly stays readable, even over everything else that’s going on.

Wibicom

Wibicom’s presentation-style portfolio is pretty standard, as these things go. I do find it interested that scrolling down on the home page takes you straight to the navigation menu.

No intro content, no frills beyond a bit of background animation. They just throw you straight into the browsing. The trend continues throughout the site, as they seem to depend more on their imagery to do the talking.

Sympozium

Sympozium is a French design agency with a lovely site that looks classically professional while incorporating a couple more modern trends like asymmetry. It’s clear that every page has a bit of art direction to it, which is mostly evident in the layout.

Round

Round uses a style of minimalism that almost feels like the old days, now. It brings back the simple grid, the thick lines and almost thicker type.

It also splits the navigation in an interesting way. The actual portfolio part of the site is organized as an almost separate entity, and browsing that part of the site will display portfolio-specific navigation. Head to the part of the site that tells you all about the studio, and the main palette changes, along with the primary navigation.

The experiences are similar enough that the transition doesn’t feel too jarring; but they clearly design the portfolio experience to focus on browsing through their work, and the rest for the user who’s ready to get serious.

Tao Tajima

Tao Tajima is a filmmaker, and his website features his work by pretty much constantly being in motion. Animation and background video (as well as embedded video) are pretty heavily featured.

IPG Mediabrands

It’s been a while since I’ve reviewed a site that was as corporate-sounding as IPG Mediabrands. Their site is (who could have possibly guessed?) very visually corporate as well. It’s like the bank brochures I read as a child — while waiting for the adults to get done with the bank stuff already — grew up and turned into websites.

And none of that is criticism. Take one look at their list of clients, and you’ll get why they went with the corporate look. Plus, they use yellow really well.

Contemple

Contemple went as wild with their design and animation as they did with their URL. And hey, if you’re going to make your site look like an advanced PowerPoint, why not go all out? There’s a lot of animation, but it’s pretty good animation.

Pierre Georges

Pierre Georges’ portfolio won’t blow any minds with weirdness. It’s just a clean, pleasant portfolio with big text, and much bigger images. Enjoy.

Jessica Chabot

Jessica Chabot’s portfolio takes a dead-simple, and makes it stand out with a few simple flourishes. That white space at the right, the white space in general. The site feels “feature-complete”, even with a bare minimum of content.

I’m not sure about that disappearing logotype, but hey. Can’t win ’em all.

Brad Geiger

Brad Geiger’s portfolio is an example of how post-minimalism is starting to trend back toward classic minimalism. We’ve got the now-familiar asymmetrical and staggered layout combined with the thick sans type and monochromatic tendencies of yesteryear.

Well, they do say life is about achieving balance. I think this site pulls it off.

Bibliothèque

Bibliothèque brings us a pretty-if-simple portfolio built around masonry layouts. Given this central concept, it’s pretty much all images. Just one giant image gallery, and some contact info. And it works.

Beautiful Handwritten Madelyn Script Family – only $17!

Source

Categories: Designing, Others Tags:

Presentator: Powerpoint for Webdesigners

January 9th, 2018 No comments

When it comes to the presentation of static drafts, a product such as Powerpoint is a valid choice. Presentator realizes this concept as a web app, for free.

Powerpoint, Not Only for Nostalgists

If you’ve been following our content for a while, you probably saw a few posts in which I described the use of Powerpoint presentations for web design clients. Just a bit over ten years ago, this was my standard approach. My colleague Denis Potschien also described his early days of the new millennium in a similar way.

And if your design approach is graphically oriented as well, meaning you take Photoshop drafts to the client, this approach is still valid today. However, instead of the static Powerpoint, you should go for a more flexible solution, such as Presentator.

Presentator is Like Powerpoint, But Different

Presentator is a project of the Bulgarian Gani Georgiev, who calls himself a full-stack developer and clearly aims at the target group of designers with this project. Presentator was initially released in spring of 2016 and has only been available in the current version since fall of 2017. A few days ago, version 1.5 was released.

Presentator: Interface With Two Applied Screens.

Presentator is open source, distributed under the license BSD-3. This makes it an equally good choice for both personal and commercial projects. You can also host the product on your own server. For that, it is available on Github.

According to the developer, more than 1,500 designers have already decided to use Presentator. Thanks to this community, Presentator could already be translated into tons of (western European) languages.

The functionality is quite similar to Powerpoint. Upload your page designs to Presentator, and connect them via hotspot, or set a target URL. This lets you simulate your interaction options. In contrast to Powerpoint, it is possible to post comments right on the respective design. This makes Presentator a good tool to receive easy feedback from colleagues and clients, which makes it even easier for the client to post his “Can we make this logo bigger?”.

Only a Partial Alternative to Prototyping Apps

At first glance, Presentator might seem like an alternative to competitors like UXPin or InVision. However, both of them can do a lot more than the small presentation tool from Bulgaria. Presentator has one unbeatable advantage. It’s free. If you use it extensively, you might want to consider donating, or at least contributing to the development, which also includes error reports or feature requests.

Gani also provides the online web app for free. Running it definitely isn’t free though, as there are no restrictions regarding the number of possible projects or the number of screens per project. A version control makes sure nothing gets lost, and you also get to take care of the versioning manually if you want to. I’d like to see that hosting bill.

Presentator: Creating a New Project

The collaboration is as easy as it gets. Colleagues are entered as additional project administrators. Send a password-protected preview link to the client. With the existing REST API, the project is future proof too, even if there is no use for it right now.

Conclusion: Fast and Simple

If you have the raw material, meaning page oriented drafts as JPG or PNG, there’s probably no faster way to get results than Presentator. The feedback function is especially attractive, and it’s free and fully viable for collaborations. Just try it.

We’ve presented more collaboration tools for web design in this post.

Categories: Others Tags:

Duplicate Content: Google Clarifies

January 8th, 2018 No comments

The dreaded topic of duplicate content is surrounded by lots of legends, assumptions, and theories. Now, there’s a clarification from Google.

Mueller Confirms: What is Duplicate Content and What Isn’t?

It might have been the Christmas feeling that motivated John Mueller, the search giant’s webmaster trends analyst, to deflate the duplicate content tire in an extensive tweet.

Here at Noupe, we also gave our opinion on the topic a few months ago, and gave you bunch of useful tips on handling duplicate content. After Mueller’s clarification, these tips are as relevant as ever.

According to Mueller, this is how Google actually views your URL structure regarding duplicate content:

Google’s John Mueller Clarifies. (Screenshot: Dr. Web)

It’s Pretty Simple

According to his statement, it does not matter if links to your primary domain end with a slash or not. Google recognizes that it is the exact same content, and won’t index it twice. It also does not matter if you run your domain on HTTP or HTTPS.

However, it does matter if your website works with both HTTP and HTTPS. Google considers that to be duplicate content. If, for whatever reason, you run your site on both protocols, at least place a 301-redirect from one protocol to the other, to show Google that the content is identical.

The same measure should also be used when your website is accessible via both www.mysite.com and mysite.com.

While it is irrelevant whether the primary domain ends with a slash or not, that is not the case for the following sub-structures. For instance, if your site contains a URL called mysite.com/subfolder/ and another one called mysite.com/subfolder, this counts as duplicate content. So, pay attention to consistent link placement and a correct redirection.

Generally, you should follow our tip from the article mentioned earlier, define the so-called Canonical Tag for every page of your web presence. This makes it easy for Google to see which version of your URL is the one you want to appear in the search results.

Take the five minutes and check which of the problems mentioned above affect your website. Then fix them.

Categories: Others Tags:

30 Beautiful Sans-Serif Fonts That You Can Download For Free

January 6th, 2018 No comments

The web is full of various free and premium fonts. You can find anything you may need, from vintage fonts to handwritten fonts in a matter of a minute. When you don’t know what font to choose, use sans-serif fonts. They are the most popular and favorite fonts of all the time.

Sans serif fonts can be used for any design, a website, t-shirt, flyer, banner, header, contact form, login form and more. In this post, we’ve featured 30 free beautiful sans-serif fonts which you can download right now. Let us know which one is your favorite in the comment section bellow.

1. Moderne Sans

2. HANSIEF – FREE VINTAGE FONT

hansief

3. Gerald Sans Geometric Font

gerald

4. BIFOCALS GROTESK – FREE FONT FAMILY

bifokals

5. Coves – Free Font

coves-free-font

6. Elianto – Free Font

Elianto-Free-Font

7. Atlantico Typeface (Free & Editable)

atlantico

8. Dense typeface

dence

9. Zero Free Typeface

zero-typeface

10. Ikaros || Free Typeface

ikaros

11. Linotte Typeface

linotte

12. Korb typeface

korb-fonts

13. Bjorn – Free Typeface

Bjorn-Free-Typeface

14. QUARTZ – Free Font

quartz-font

15. Blern (Free Typeface)

blern-font

16. Creata typefamily

creata

17. Quantify v2 Free Typeface

Quantify-v2-Free-Typeface

18. BAVRO FREE FONT

bavro

19. Qanelas Soft Typeface

qanelas-soft

20. Biko

biko-free-font-family

21. Hansief – Free Vintage Sans Serif

Hansief

22. Free Acacio Serif Font

Acacio

23. Adon Font

adon-font

24. Hover Classic Free Font

hoverfont

25. Tessellate (Font)

tessell-01

26. Jaapokki

jaapokki-sans-serif-font

27. Kiklo

Kiklo

28. Rhetoric Regular

Rhetoric-Regular

29. LIQUIDO free font

liquid-font

30. Free Yadon Serif Font

free-yadon-serif-font

Read More at 30 Beautiful Sans-Serif Fonts That You Can Download For Free

Categories: Designing, Others Tags: