ui设计师与开发人员的沟通_开发人员和设计师的27种免费资源

ui设计师与开发人员的沟通

Design is the face of your product, service or content, without good designs, even if the content is amazing, there are chances that it might not appeal a larger audience to “have a look”.

设计是产品,服务或内容的代名词,没有好的设计,即使内容令人惊叹,也有可能无法吸引更多的受众“看一眼”。

But, there are so many tools available on the internet which makes our lives (as a designer/front-end developer or a content creator) more easy, and I am going to talk about many of them which I use, in this blog.

但是,互联网上提供了许多工具,使我们(作为设计师/前端开发人员或内容创建者)的生活更加轻松,我将在此博客中讨论许多我使用的工具。

Did someone say “design”?
有人说过“设计”吗?

It’s been so many years I’ve been making content, and taking free initiatives, and one thing that used to scare me was posters and info-graphics.

多年来,我一直在创作内容并采取自由行动,而过去令我感到恐惧的一件事是海报和信息图形。

I always wanted to spend my time in making content, not worrying about promotional posters, and then I started searching on Internet about tools which can help me with that, and came across some amazing ones.

我一直想把时间花在制作内容上,而不用担心促销海报,然后我开始在Internet上搜索可以帮助我解决这些问题的工具,并发现了一些惊人的工具。

Slowly, I came across free and open source vectors, images, design inspirations which we can use. If you are like me, trust me, this blog is going to make your life a lot more easy ( ° ͜ʖ °)

慢慢地,我遇到了免费的开源矢量,图像,设计灵感,我们可以使用它们。 如果您像我一样,请相信我,此博客将使您的生活更加轻松(°͜ʖ°)

But wait, I bet there are a lot more resources out there apart from these as well, so if you come across one, do mention it in the comments as well, I will edit this article, add more and of course, I will give you proper credits.

但是,等等,我敢打赌,除了这些资源之外,还有很多其他资源,因此,如果您遇到一个资源,也要在评论中提及它,我将编辑本文,添加更多内容,当然,我会给出你适当的学分。

Let’s get started!

让我们开始吧!

Since we are talking about design, let’s mention some sources from where you can take design inspiration.

既然我们在谈论设计,那么让我们来谈谈一些可以从中获得设计灵感的资源。

I know it is very tough to come up with poster designs from scratch, so probably, you can take a little idea on what’s trending these days.

我知道从头开始提出海报设计非常困难,所以大概,您可以对当今的趋势有所了解。

But remember, take inspiration only, make sure your content/poster/design is original!

但是请记住,请仅取灵感,请确保您的内容/海报/设计是原创的!

1.行为 (1. Behance)

https://www.behance.net/

https://www.behance.net/

Image for post

If you are looking for some inspiration in graphic design, typography, branding, UI design etc. Behance is an amazing place to start with.

如果您正在图形设计,排版,品牌,UI设计等方面寻找灵感,那么Behance就是一个很棒的起点。

Being a part of great company like Adobe, it has a huge community, and you can get a lot of ideas, and if you are good at design, why not put your content here? It can make you popular.

作为像Adobe这样的伟大公司的一员,它拥有庞大的社区,您可以得到很多想法,如果您擅长设计,为什么不将内容放在这里? 它可以使您受欢迎。

2. Pinterest (2. Pinterest)

https://pinterest.com

https://pinterest.com

Image for post

More like a social media website for designers, you can get some really amazing designs here.

更像是设计师的社交媒体网站,您可以在这里获得一些非常出色的设计。

Plus, you can select the tags, or topics which you are interested in to get daily design inspiration.

另外,您可以选择感兴趣的标签或主题来获得日常设计灵感。

3.运球 (3. Dribble)

https://dribbble.com/

https://dribbble.com/

Image for post

Again, a very amazing website to look for top designs in various domains.

同样,这是一个非常出色的网站,可以在各个领域中寻找顶级设计。

If you are a UI designer, you might want to check out some top Mobile/Web designs on this website.

如果您是UI设计师,则可能要在此网站上查看一些顶级的移动/网络设计。

Talking about designs, you might have noticed that designs with vectors and illustrations look so cool, don’t they?

在谈论设计时,您可能已经注意到带有矢量和插图的设计看起来很酷,不是吗?

Let it be mobile app design, or web design, people use vectors so much.

不管是移动应用程序设计还是网页设计,人们都在大量使用向量。

Good news, there are many websites that offer you free and open source vectors which you can use in your projects.

好消息,有许多网站为您提供免费和开源的向量,您可以在项目中使用它们。

4.拉出 (4. Undraw)

https://undraw.co/

https://undraw.co/

Image for post

I can say that it is the best website to look for vectors for your projects.

我可以说这是为您的项目寻找载体的最佳网站。

I’ve been using these in my side projects from so long now, and I can say that they have a vector for all your needs.

从现在开始,我就一直在我的辅助项目中使用这些工具,我可以说它们具有满足您所有需求的载体。

Simple to use, simple to download, try it out.

简单易用,易于下载,请尝试一下。

5. FreeIllustrations xyz (5. FreeIllustrations xyz)

https://freeillustrations.xyz/

https://freeillustrations.xyz/

Image for post

Even though my favorite is undraw, I love freeillustrations so much, they have a wide range of vectors which can match your story.

即使我最喜欢绘制,我也非常喜欢自由插图,它们有各种各样的矢量可以匹配您的故事。

For example, the transport illustrations mentioned in the above screenshot is a collection of 12 illustrations which might be very useful if you are conducting an event, or making an app related to transportation.

例如,以上屏幕快照中提到的运输插图是12个插图的集合,如果您正在举办活动或制作与运输相关的应用,这可能会非常有用。

6.脸红 (6. Blush)

https://blush.design/

https://blush.design/

Image for post

The amazing collection of illustrations on Blush is definitely going to make you super excited.

腮红上惊人的插图集肯定会让您兴奋不已。

Are you going to try them out in your next side project?

您要在下一个副项目中尝试它们吗?

7.绘图工具 (7. DrawKit)

https://www.drawkit.io/

https://www.drawkit.io/

Image for post

A collection of various illustration packs and libraries, you can surely find many cool SVGs here.

各种插图包和库的集合,您一定可以在这里找到许多很棒的SVG。

8.卢卡萨丹 (8. Lukaszadam)

https://lukaszadam.com/illustrations

https://lukaszadam.com/illustrations

Image for post

Completely free even for commercial projects, Lukaszadam provides many wonderful illustrations

Lukaszadam完全免费,甚至用于商业项目,也提供许多精彩的插图

9.哎呀照片(9. Ouch pics)

https://icons8.com/illustrations

https://icons8.com/illustrations

Image for post

Ranging from abstract to macaroni, this website will have SVGs for all your needs, do check it out.

从抽象到通心粉不等,该网站将提供满足您所有需求的SVG,请检查一下。

10.胡安人 (10. Humaaans)

https://www.humaaans.com/

https://www.humaaans.com/

Image for post

Their landing page attracts me so much!

他们的目标网页非常吸引我!

They mentioned it right on their landing page, Illustrations for every occasion.

他们在登录页面“各种场合的插图”中都提到了它

11. Freepik (11. Freepik)

https://www.freepik.com/

https://www.freepik.com/

Image for post

Yes, I saved it for last in the vectors category, one of the best and most used resource for designers, you can go here for vectors, posters, graphic design, stock photos, PSDs, and even icons.

是的,我将其保存在向量类别中,这是设计师最好和最常用的资源之一,您可以在这里找到向量,海报,图形设计,图库,PSD甚至图标。

Now you have so many places to find illustrations for your next project, are you excited to use them?

现在,您有很多地方可以找到下一个项目的插图,您为使用它们感到兴奋吗?

Alright, now that we have seen where to go for design inspiration, and where to find illustrations, let’s have a look at where we can find some cool icons as well.

好了,现在我们已经知道了在哪里可以找到设计灵感,在哪里可以找到插图,让我们看看在哪里也可以找到一些很酷的图标。

12.简单的图标 (12. Simple Icons)

https://simpleicons.org/

https://simpleicons.org/

Image for post

Want to use the icon of any famous brand in your designs? You can find almost all on simple icons, for free.

是否要在设计中使用任何知名品牌的图标? 您几乎可以免费在简单的图标上找到所有内容。

13.字体很棒 (13. Font Awesome)

https://fontawesome.com/

https://fontawesome.com/

Image for post

When talking about icons, how can we forget Font Awesome?

在谈论图标时,我们如何忘记“真棒字体”?

One of the most famous place to look for vector icons and social logos for your website.

查找网站的矢量图标和社交徽标的最著名的地方之一。

14.平面图标 (14. Flat Icons)

https://www.flaticon.com/

https://www.flaticon.com/

Image for post

Ranging over 3,345,000 vector icons, flaticon claims to be the largest database of free icons.

Flaticon涵盖超过3,345,000个矢量图标,声称是最大的免费图标数据库。

But, it’s not completely free, so yeah, before using the vector icons from here, make sure they are free to use.

但是,它不是完全免费的,因此,是的,在从此处使用矢量图标之前,请确保它们可以免费使用。

We have covered so many things so far, but since we are talking about illustrations and vector icons, how can we forget about animations, let’s have a look at that too.

到目前为止,我们已经讨论了很多事情,但是由于我们正在谈论插图和矢量图标,因此我们如何忘记动画,我们也来看看。

15.动画 (15. Animaticons)

http://animaticons.co/

http://animaticons.co/

Image for post

Beautiful, and customizable animated GIF icons which work almost everywhere and are easy to use.

漂亮,可自定义的动画GIF图标,几乎可以在任何地方使用,并且易于使用。

16. Lottiefiles (16. Lottiefiles)

https://lottiefiles.com/

https://lottiefiles.com/

Image for post

Let’s see what they say -

让我们看看他们怎么说-

Lottie is an open-sourced animation file format like no other. It is smaller with higher quality and allows for you to create animations that can be interacted with.

Lottie是一种开源动画文件格式,与众不同。 它体积更小,质量更高,可让您创建可以交互的动画。

We have already covered so many resources, but, we are missing one huge domain, stock photos, let’s see various resources where you can get them for free.

我们已经介绍了很多资源,但是,我们缺少一个庞大的领域,即图片,让我们看看可以免费获得的各种资源。

You will require these for many purposes,

您将出于多种目的需要这些,

Designer? You might need to add one in your postersDeveloper? Websites and apps contains images as wellContent creator? You might need this for your blog/post/promotional posters

设计师? 您可能需要在postersDeveloper中添加一个? 网站和应用程序也包含图像内容创建者? 您的博客/帖子/促销海报可能需要此标签

17.Unsplash(17. Unsplash)

https://unsplash.com/

https://unsplash.com/

Image for post

I can’t tell how many times I have used photos from this website, it’s probably one of the best resources out there.

我无法告诉我使用该网站的照片的次数,这可能是那里最好的资源之一。

18.免费的照片 (18. Free Photos)

https://freephotos.cc/en

https://freephotos.cc/en

Image for post

Free stock photos for all your needs.

免费的库存照片,满足您的所有需求。

19.爆发 (19. Burst)

https://burst.shopify.com/

https://burst.shopify.com/

Image for post

Free, high-resolution images for personal and commercial use, this website has a great collection of images.

供个人和商业使用的免费高分辨率图像,此网站上有大量图像。

20.摄影创作者 (20. Photo Creator)

https://photos.icons8.com/creator

https://photos.icons8.com/creator

Image for post

Want a unique photo for your poster/website that no one else has? Create one. Photo Creator allows you to create your own customized stock photo.

想要您的海报/网站上没有其他人的独特照片吗? 创建一个。 Photo Creator可让您创建自己的自定义股票照片。

We have discussed so many categories till now,

到目前为止,我们已经讨论了很多类别,

  • Design inspiration

    设计灵感
  • Illustrations

    插图
  • Vector icons

    矢量图标
  • Animations

    动画制作
  • Stock photos

    库存照片

But, we have missed something important that you are going to need as a designer. Make a guess?

但是,我们错过了您需要作为设计师的一些重要事项。 做一个猜想?

Yes, you guessed it right, fonts. These two are amazing resources when it comes to fonts, check them out -

是的,您猜对了,字体。 当涉及字体时,这两个是不可思议的资源,请检查一下-

21. Google字体 (21. Google Fonts)

https://fonts.google.com/

https://fonts.google.com/

Image for post

So many free and amazing fonts to use, I bet you already know about google fonts, but if you don’t go check it out.

有这么多免费且令人惊叹的字体可供使用,我敢打赌您已经了解Google字体,但是如果您不去查看的话。

22.大丰 (22. DaFont)

https://www.dafont.com/

https://www.dafont.com/

Image for post

Looking for some good fonts for your next poster? Check out the top/trending fonts on DaFont.

在为下一张海报寻找一些好的字体? 查看DaFont上的流行字体。

It’s a huge list resources, but hang on, the best is yet to come.

这是一个巨大的清单资源,但是请耐心等待,最好的还没有到来。

We have seen almost everything now, but wait, we are still missing somethign major. The tool to actually make designs.

现在,我们几乎已经看到了所有内容,但是,等等,我们仍然缺少某专业。 实际进行设计的工具。

Not everyone can have Adobe Photoshop and/or Illustrator, they are costly softwares, but don’t worry, there are many free online alternatives!

并不是每个人都可以拥有Adobe Photoshop和/或Illustrator,它们是昂贵的软件,但是请放心,有许多免费的在线替代品!

Let us see some free design tools that can help you in your next poster design, UI design, or infographics.

让我们看一些免费的设计工具,这些工具可以帮助您进行下一个海报设计,UI设计或信息图表。

23. Canva (23. Canva)

https://www.canva.com/

https://www.canva.com/

Image for post

Looking for a design for your

寻找适合您的设计

  • Instagram post

    Instagram帖子
  • Logo

    商标
  • Posters

    海报
  • Presentations

    简报
  • ebook

    电子书
  • YouTube thumbnail

    YouTube缩略图
  • Facebook post

    Facebook帖子
  • Cards

  • Blog Banners

    博客横幅

Or any other design?

还是其他设计?

Canva provides you templates for almost everything, go check them out.

Canva为您提供几乎所有内容的模板,请检查一下。

24.豌豆 (24. Photopea)

https://www.photopea.com/

https://www.photopea.com/

Have a look at the interface -

看一下界面-

Image for post

Does this remind you of something?

这是否使您想起某些事情?

PHOTOSHOP!

照相馆!

Yes, Photopea provides you with a very similar interface with very similar features as Adobe Photoshop, and that too for free!

是的,Photopea为您提供了一个非常相似的界面,并且具有与Adobe Photoshop十分相似的功能,并且也是免费的!

25. Adob​​e XD (25. Adobe XD)

https://www.adobe.com/products/xd.html

https://www.adobe.com/products/xd.html

Image for post

Woah, yeah, finally, something free from Adobe.

哇,是的,最后,Adobe提供了一些免费软件。

I have been using this product from a very long time now, and I can’t appreciate it enough.

我已经使用很长时间了,对此我还是感激不尽。

UI/UX Design, wireframes, prototyping, poster design, this software allows you almost everything with a very minimal and easy to use interface. I love Adobe XD.

UI / UX设计,线框,原型,海报设计,该软件以非常简单易用的界面为您提供几乎所有功能。 我喜欢Adobe XD。

26.视觉 (26. InVision)

https://www.invisionapp.com/

https://www.invisionapp.com/

Image for post

A very powerful design studio, free for personal use.

一个非常强大的设计工作室,免费供个人使用。

27.菲格玛 (27. Figma)

https://www.figma.com/

https://www.figma.com/

Image for post

Free for personal use (up to 3 projects) and very similar to Adobe XD, this product is quite useful when it comes to UI/UX design.

该产品免费供个人使用(最多3个项目),并且与Adobe XD非常相似,在进行UI / UX设计时非常有用。

We’ve come a long way, haven’t we?

我们已经走了很长一段路,不是吗?

Since you managed to read all the way till here, I will mention one bonus resource for you ( ͡~ ͜ʖ ͡°)

由于您一直都在阅读,直到这里,我将为您提到一种奖励资源(͡〜͜ʖ°)

The above mentioned resources can help you with almost everything, but one thing is still remaining, ‘color combination’

上面提到的资源可以为您提供几乎所有的帮助,但仍然存在一件事,即“颜色组合”

So here’s the last resource for today, an amazing website to pick up color combinations for your project/poster.

因此,这是今天的最后资源,一个很棒的网站可以为您的项目/海报选择颜色组合。

色彩猎人 (ColorHunt)

https://colorhunt.co/

https://colorhunt.co/

Image for post

Hundreds of color palettes, I am sure you are going to use this website for your next project.

数以百计的调色板,我确定您将使用此网站进行下一个项目。

概要 (Summary)

Let’s see what all resources did we mention in this blog -

让我们看看我们在此博客中提到的所有资源-

设计灵感 (Design Inspiration)

  • Behance

    行为
  • Pinterest

    Pinterest
  • Dribble

    运球

插图(Illustrations)

  • Undraw

    拉开
  • FreeIllustrations

    免费插图
  • Blush

    脸红
  • DrawKit

    绘图工具
  • Lukaszadam

    卢卡萨丹
  • Ouch pics

    哎呀照片
  • Humaaans

    胡曼人
  • Freepik

    Freepik

图示 (Icons)

  • Simple Icons

    简单的图标
  • Font Awesome

    字体很棒
  • Flat Icons

    平面图标

动画制作(Animations)

  • Animaticons

    动画
  • Lottiefiles

    Lottie文件

库存照片(Stock Photos)

  • Unsplash

    Unsplash
  • Free Photos

    免费照片
  • Burst

    爆裂
  • Photo Creator

    照片创作者

字型(Fonts)

  • Google Gonts

    Google Gonts
  • DaFont

    大丰

设计工具(Design Tools)

  • Canva

    坎瓦
  • Photopea

    豌豆
  • Adobe XD

    Adobe XD
  • InVision

    视觉
  • Figma

    菲格玛

颜色组合(Color Combinations)

  • ColorHunt

    色彩猎人

That’s it, I hope you liked the article. Do let me know if any of the above mentioned resources helped you, and don’t forget to comment more resources which you use for design.

就是这样,希望您喜欢这篇文章。 请让我知道以上提及的资源是否对您有所帮助,并且不要忘了评论更多用于设计的资源。

Web: http://madhavbahl.tech/
Instagram:
https://www.instagram.com/theleanprogrammer/
LinkedIn:
https://www.linkedin.com/in/madhavbahl/
Github:
https://github.com/MadhavBahlMD
Email: theleanprogrammer@gmail.com

网址: http //madhavbahl.tech/ Instagram: https //www.instagram.com/theleanprogrammer/ 领英(LinkedIn): https //www.linkedin.com/in/madhavbahl/ GitHub: https : //github.com/MadhavBahlMD 电子邮件:theleanprogrammer@gmail.com

翻译自: https://medium.com/javascript-in-plain-english/27-free-resources-for-developers-and-designers-aaa9019abed

ui设计师与开发人员的沟通

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值