你鼓舞了我是世界杯主题曲吗_选择方法和鼓舞人心的网站列表

你鼓舞了我是世界杯主题曲吗

by Kristoffer Andreasen

通过克里斯托弗·安德烈森

选择方法和鼓舞人心的网站列表 (The pick and choose approach and a list of inspirational websites)

In the past couple of years I have created quite a few websites. In the beginning, I hardly knew how to code or design. But I had a goal and a vision for my site. It was definitely a long term goal at the time but I knew it was possible. I have since created and redesigned the websites multiple times in a 1-year span. It’s just never quite done in your own opinion.

在过去的几年中,我创建了很多网站。 一开始,我几乎不知道如何编码或设计。 但是我对网站有一个目标和愿景。 当时肯定是一个长期目标,但我知道这是可能的。 从那以后,我在1年的时间里多次创建和重新设计了网站。 根据您自己的看法,从来没有完全做到这一点。

Setting out on a path to create websites has taught me that beautiful websites are a result of a wide variety of skills combined into one product. At first, I definitely neglected the design part and thought my own aesthetic sense would be sufficient to create the look and feel I was going for.

踏上创建网站的道路告诉我,精美的网站是多种技能结合在一起的产物。 一开始,我绝对忽略了设计部分,并认为我自己的审美意识足以创造我想要的外观。

I couldn’t have been more wrong. Design is a huge part of creating websites. In my opinion it serves one of the most important purposes for the website: conveying professionalism. A website is usually connected to a business and, in this case, the purpose is to convert visitors into customers.

我不可能错得更多。 设计是创建网站的重要组成部分。 在我看来,它是网站最重要的目的之一:传达专业精神。 网站通常与企业相关联,在这种情况下,其目的是将访问者转化为客户。

Professionalism is an extremely important indicator for me to become a customer. I’m definitely biased from working in the field myself, and I tend to consider beautifully crafted websites as a factor when deciding between products. And this could be for any product. Not just modern tech products. A beautiful website has an even bigger impact when dealing with smaller companies, as it might become an important advantage over competitors.

专业精神对于我成为客户至关重要。 我绝对不愿意自己从事这一领域,因此在决定产品时,我倾向于将制作精美的网站视为一个因素。 这可能适用于任何产品。 不只是现代科技产品。 一个漂亮的网站在与小公司打交道时会产生更大的影响,因为它可能会成为超越竞争对手的重要优势。

I learned the hard way I’m not the best designer. After creating what I believed to be finished products, I looked at them and concluded they looked nothing like the popular sites around the web.

我学到了不是最佳设计师的艰辛方法。 在创建了我认为是成品的产品之后,我看了看它们并得出结论,它们看上去并不像网上流行的网站。

After I acknowledged the difference, I started looking for the individual differences in the segments of the page. What made their websites look stunning, while mine was plain?

确认差异后,我开始寻找页面各部分中的个别差异。 是什么让他们的网站看起来很漂亮,而我的却是普通的?

The answer wasn’t just one thing. It was both individual elements, and the general composition of the page. My solution to this problem turned out to be an approach that stuck with me for a while.

答案不只是一件事。 它既是单个元素,又是页面的一般组成。 事实证明,我对这个问题的解决方案一直困扰着我一段时间。

选择并选择您喜欢的元素 (Pick and choose the elements you love)

The solution for me was to create a folder with inspirational sites. Not because all these sites created a perfect design but because they managed to style individual elements beautifully. My inspirational sites have primarily been selected based on their landing page. This does not mean the other pages on the sites aren’t executed beautifully. Have a look around the sites and find inspiration for your own sites.

对我来说,解决方案是创建一个包含励志网站的文件夹。 不是因为所有这些网站都创建了完美的设计,而是因为它们设法对单个元素进行了精美的样式设计。 我的励志网站主要是根据其目标网页选择的。 这并不意味着网站上的其他页面执行不佳。 环顾四周,寻找自己网站的灵感。

我的一些励志网站 (A few of my inspirational websites)

Let’s dive into my list of 8 inspirational sites, and discuss which elements make these sites so enjoyable.

让我们深入研究我列出的8个鼓舞人心的网站,并讨论哪些元素使这些网站如此令人愉悦。

Product Hunt and Desk both have beautifully styled individual elements on their landing pages.

Product Hunt和Desk的着陆页上都具有精美样式的单个元素。

Product Hunt has a few features I find specifically beautiful. The subtle hover effects on the featured products and the border radius invite the user to explore the site.

Product Hunt具有一些我认为特别漂亮的功能。 特色产品上的细微悬停效果和边框半径邀请用户浏览站点。

Apart from these elements, the general layout is surprisingly simple and effective. Users simply cannot get lost on the page, as all products are featured as a popup in the app.

除了这些元素之外,总体布局令人惊讶地简单有效。 用户不会在页面上迷路,因为所有产品都在应用程序中显示为弹出窗口。

Desk.com features multiple elements I would recommend ‘stealing’ for your own website. The testimonials on the landing page are beautifully executed. Subtle animation with a beautifully styled logo bar and a simple color for each customer. It can be pretty tricky to recreate but will provide an excellent challenge in a learning process.

Desk.com具有多个元素,我建议您为自己的网站“窃取”。 登陆页面上的推荐书精美执行。 微妙的动画效果,带有精美的徽标栏和适合每个客户的简单颜色。 重新创建可能非常棘手,但在学习过程中将带来巨大挑战。

Desk continues to excel at using a variety of colors on their product page desk.com/product. It shows how gradients can be included to provide awesome backgrounds for information display.

Desk继续在其产品页面desk.com/product上使用各种颜色方面表现出色。 它显示了如何包括渐变以提供令人敬畏的背景来进行信息显示。

Infogram and Linkfire provides another source for great inspiration. I am usually not a big fan of parallax effects as it tends to be misused on a lot of sites. However, Infogram really captures a simple way of using it on a single colored background compared to the regular image parallax effects. Apart from this, they managed to create an individual style in all the elements. They have included stylish carousels and individual gifs that load on hover. All elements that drive the user to increase interest in the product.

Infogram和Linkfire提供了另一个启发灵感的来源。 我通常不太喜欢视差效果,因为它经常在许多站点上被滥用。 但是,与常规的图像视差效果相比,Infogram确实捕获了一种在单色背景上使用它的简单方法。 除此之外,他们设法在所有元素中创造出个性化的风格。 其中包括时尚的轮播和悬停时加载的单独gif。 促使用户增加对该产品兴趣的所有要素。

Linkfire initially has the look and feel of a generic template site. After the section above the fold, a few interesting designs are shown. The application functionality is shown on an iPhone, where hover effects display the individual parts. Furthermore, the next section features live data with a simple parallax background effect displaying a grid of records. Both beautifully executed.

Linkfire最初具有通用模板网站的外观。 折叠后的部分之后,显示了一些有趣的设计。 该应用程序功能显示在iPhone上,其中悬停效果显示各个部分。 此外,下一节将介绍具有简单视差背景效果的实时数据,并显示记录网格。 两者都执行得很好。

In addition to the individual elements on the page, both websites feature a elegant navigation bar transition. The sites start with a transparent navigation bar that gets a visible on scroll. This allows the websites to fully leverage space above the fold.

除了页面上的各个元素之外,两个网站还具有优雅的导航栏过渡。 这些站点以透明的导航栏开始,该导航栏在滚动时可见。 这使网站可以充分利用首屏上的空间。

Two more great sources for inspiration. MapBox provides a very extensive landing page showcasing an abundance of features included with the software. One of the things that stand out is their use of gifs to display the functionalities. They managed to keep the gifs simple and relevant for the product. Furthermore, all the ‘icons’ or circle images used are custom to their site. Generic free icons found around the web does not really cut it when it comes to creating your own brand through your website.

另外两个启发灵感的重要来源。 MapBox提供了一个非常广泛的登录页面,其中显示了软件随附的大量功能。 突出的事情之一是它们使用gif来显示功能。 他们设法使gif文件简单且与产品相关。 此外,所有使用的“图标”或圆圈图像都是针对其站点定制的。 通过网站在网站上创建自己的品牌时,在网络上找到的通用免费图标并不能真正解决问题。

Another great feature is one of the bottom sections, where they feature the different industries with Mapbox implementations. This involves a subtle animation when switching between browser images that easily could be used for other websites.

另一个重要功能是底部部分之一,其中介绍了使用Mapbox实现的不同行业。 在浏览器图像之间进行切换时,这涉及到微妙的动画,而这些图像很容易用于其他网站。

The National Trust for Historic Preservation is an outlier among these software companies. However, it still features a beautiful web design. The initial slow zoom on the background image is the first element executed with grace. Generally throughout the website, they managed to stick to simple effects that all contributed to usability without comprising the design. In addition to the effects, they have beautiful components. The image captions are all different, which emphasizes the different nature of their projects. Lastly, they tend to abandon straight lines to give the site a little more edge. This works well with the simple layout.

在这些软件公司中,国家历史保护基金会是一个例外。 但是,它仍然具有漂亮的网页设计。 对背景图像的初始慢速缩放是第一个以宽限期执行的元素。 通常,在整个网站上,他们设法坚持简单的效果,而这些效果都对可用性有所贡献,而没有包含设计。 除了效果外,它们还具有漂亮的成分。 图像标题都是不同的,从而强调了它们项目的不同性质。 最后,他们倾向于放弃直线,以给该部位更多的边缘。 这适用于简单的布局。

Pexels has been one of my go-to places for high quality stock images. They managed to create exactly what I was looking for. A simple design to get me the right images fast. There is no excess functionality to disturb and the grid is flawless. The image grid is utilized on a large number of popular websites but Pexels manages to keep it distinctly simple. This kind of grid layout is definitely worth recreating in your own projects.

Pexels一直是我追求高品质库存图像的地方之一。 他们设法创造出我想要的东西。 一个简单的设计可以快速为我提供正确的图像。 没有多余的功能要打扰,并且网格是完美的。 图像网格已在许多受欢迎的网站上使用,但Pexels设法使其变得非常简单。 这种网格布局绝对值得在您自己的项目中重新创建。

Treehouse has embraced simplicity. The landing page features a simple call-to-action form above the fold, which definitely has an advantage over a simple image and a button in my opinion. Apart from this, their website features a nice and delicate navigation bar animation that invites the user to check out the free trial. For a great example of testimonials, check the beautifully executed stories page with simple animations and combinations of text and images.

树屋已经接受了简单性。 着陆页在首屏上方有一个简单的号召性用语表格,在我看来,它绝对比简单的图像和按钮更具优势。 除此之外,他们的网站还具有精美精致的导航栏动画,邀请用户签出免费试用版。 有关推荐的一个很好的例子,请通过简单的动画以及文字和图像的组合检查执行精美的故事页面。

All these designs are beautiful in my own opinion. You might have a completely different opinion on the design and layout of a website. The important thing is the approach to creating sites. Find a list of inspirational sites and save them. Pick and choose the individual elements you love on other sites and recreated them with your own unique styling and content. Apart from being a way to create beautiful sites, it is an easy way to find challenges to improve your programming skills.

我个人认为所有这些设计都很漂亮。 您可能对网站的设计和布局有完全不同的看法。 重要的是创建网站的方法。 查找鼓舞人心的站点列表并保存。 在其他网站上挑选您喜欢的单个元素,然后使用您自己独特的样式和内容重新创建它们。 除了创建漂亮网站的方法之外,它还是发现挑战以提高编程技能的简便方法。

Happy coding!

编码愉快!

翻译自: https://www.freecodecamp.org/news/the-pick-and-choose-approach-and-a-list-of-inspirational-websites-361b2048c114/

你鼓舞了我是世界杯主题曲吗

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/396482.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

共享程序集GAC

原文标题: 原文地址:https://www.cnblogs.com/1996V/p/9037603.html 共享程序集GAC 我上面说了这么多有关CLR加载程序集的细节和规则,事实上,类似于mscorlib.dll、System.dll这样的FCL类库被引用的如此频繁,它已经是我…

弹簧触摸开关原理图_10年老电工经验之谈:常见的开关电源那些事儿

随着电控系统中对控制回路安全性要求提高,控制回路的工作电压是越来越趋于直流低压化。由此,控制回路内各种使用直流电源的传感器、中小微型直流继电器等电器装置是日益增多。也正因如此,电控系统内不同品牌的开关电源也相应地多了起来。因牵…

erlang mysql连接超时_Erlang数据库-(一)Erlang与Mysql的连接

下载:http://download.csdn.net/detail/hjhjava/7088277把该文件的东西全部编译好,然后根据下面的解释就可以操作Mysql的。很简单~-record(row,{a1 0, a20}).%% 第一个参数是该链接的名字(根据它来操作Mysql),第二参数是本机号(ip地址)%% &a…

SQL SERVER 中 GO 的用法2

具体不废话了&#xff0c;请看下文详解。 12345678910use db_CSharpgoselect *,备注casewhen Grade>90 then 成绩优秀when Grade<90 and Grade>80 then 成绩良好when Grade<80 and Grade>70 then 成绩及格else 不及格endfrom tb_Grade如果只是执行一条语句&…

js中判断值不等于undefined

文章&#xff1a;JS 中判断空值 undefined 和 null转载于:https://www.cnblogs.com/Tpf386/p/9804496.html

reddit_我在3天内疯狂地审查了Reddit上的50个投资组合,从中学到了什么。

redditI’ve always enjoyed critiquing applicants’ portfolios at the design studio where I work. And I also often ask for feedback on my own designs on Reddit’s webdev subreddit.我一直都很喜欢在我工作的设计工作室里评估申请人的作品集。 我也经常在Reddit的we…

【BZOJ1001】[BeiJing2006]狼抓兔子

挺简单一个题&#xff0c;最小割模板 我的感觉就是可能建图的时候会比较麻烦吧&#xff0c;毕竟三个方向。 #include <cctype> #include <climits> #include <cstdio> #include <cstring> #include <iostream>#define debug(x) std::cout <&l…

管理活动目录域服务实训_管理学院学生党支部开展实践教育基地服务活动

红星E校有态度 有温度 可关注为进一步加强党的建设&#xff0c;深化管理学院学生党支部与实践基地的互动性&#xff0c;2020年9月11至12日&#xff0c;管理学院学生党支部协助白鹤村村委实践基地完成第七次人口普查相关工作&#xff0c;共计6名预备党员参与。工作开始前的培训会…

mysql 汉编码 的选_peewee连接mysql汉语言数据编码_mysql

peewee连接mysql中文数据编码系统是win7 x64python 2.7.6的site.py里面编码设定为 utf-8py文件首行指定 #coding:utf-8mysql 5.5.38安装时指定代码为utf-8peewee的连接数据库代码为&#xff1a;db MySQLDatabase(host 127.0.0.1, user root, passwd 1, database mz, chars…

配置windows失败,还原更新,请勿关机

最近给同事装系统&#xff0c;偶尔会出现如下问题&#xff1a; 如果是这种情况&#xff0c;只能耐心等待了&#xff0c;因为关机也没用&#xff01; 转载于:https://www.cnblogs.com/lijy/p/5327844.html

使用Express和MongoDB构建简单的CRUD应用程序

by Zell Liew由Zell Liew 使用Express和MongoDB构建简单的CRUD应用程序 (Building a Simple CRUD Application with Express and MongoDB) For a long time, I didn’t dare venture into back end development. I felt intimidated because of my lack of an academic backgr…

python元类的使用_python中元类用法实例

本文实例讲述了python中元类用法&#xff0c;分享给大家供大家参考。具体方法分析如下&#xff1a;1.元类(metaclass)是用来创建类的类2.type(object):返回一个对象的类型&#xff0c;与object.__class__的值相同&#xff0c;type(name,bases,dict):创建一个新的type类型&#…

使用uicollectionView时需要注意的问题

1.UICollectionView使用流水布局——UICollectionViewFlowLayout时&#xff0c;需要满足条件&#xff1a; 每个item(即cell)的大小是一样的&#xff0c;不仅是宽度&#xff0c;还有高度。这样&#xff0c;当collectionview的宽度发生变化时&#xff0c;item能将其动态填充。ite…

hiveql函数笔记(二)

1、数据查询 //提高聚合的性能 SET hive.map.aggrtrue; SELECT count(*),avg(salary) FROM employees; //木匾不允许在一个查询语句中使用多于一个的函数&#xff08;DISTINCT。。。&#xff09;表达式 SELECT count(DISTINCT symbol) FROM stocks; 表生成函数&#xff1a; exp…

jQuery 常用的方法

<!DOCTYPE html><html lang"en"><head> <meta charset"utf-8"/> <title>品牌列表案例</title> <script src"js/jquery-2.1.1.min.js" rel"script"></script> <script…

swift 从手机选照片_19元起!定制专属手机壳!还可免费打印照片...

△剧透&#xff1a;文末有福利现在的年轻人体内涌动的都是追求有趣有特色的灵魂希望自己是这条gai最独一无二的仔撞衫撞包撞手机壳可以说是当代年轻人三大时尚忌讳尤其是手机壳极为重要毕竟换壳≈换机只需要几十元买新壳就可以拥有换新机般的仪式感不过作为手机壳老手都知道在某…

新手也能学会本地调试微信,natapp 官网映射

本地调试微信的新手指引~ 照着配置&#xff0c;一定可以配置成功&#xff0c;实现本地调试微信&#xff0c;公司好几个同事按照我写的步骤&#xff0c;都独立配成功了。 1.首选在natapp注册一个账号&#xff0c;申请免费隧道或者购买隧道&#xff0c;我买了一个月9元的付费隧道…

在JavaScript中反转字符串的三种方法

This article is based on Free Code Camp Basic Algorithm Scripting “Reverse a String”本文基于Free Code Camp基本算法脚本“ Reverse a String ” Reversing a string is one of the most frequently asked JavaScript question in the technical round of interview. …

c实现三角形角度大于一个值_初中数学三角形知识点小结

▊ 三角形两边定理&#xff1a;三角形两边的和大于第三边。推论&#xff1a;三角形两边的差小于第三边。▊ 三角形中位线定理三角形的中位线平行于第三边&#xff0c;并且等于它的一半。▊ 三角形的重心三角形的重心到顶点的距离是它到对边中点距离的2倍。在三角形中&#x…

【Spring】使用Spring和AMQP发送接收消息(下)

为什么80%的码农都做不了架构师&#xff1f;>>> 上篇讲了RabbitMQ连接工厂的作用是用来创建RabbitMQ的连接&#xff0c;本篇就来讲讲RabbitMQ的发送消息。通过RabbitMQ发送消息最简单的方式就是将connectionFactory Bean注入到服务层类中&#xff0c;并使用它创建C…