**在网络上释放您的创造力** TIT工作室为您量身打造一个美观且实用的网站，清晰地展示业务、品牌风格与文化，提升公司企业形象。联系微信 sheshuiapp
### 了解平面设计 网页设计不仅仅是插入代码和记住用户体验趋势。它还很大程度上涉及图形设计。 平面设计和网页设计是非常不同的原则，但它们并不相互排斥。网页设计师必须具备图形设计知识才能在编写网站时解决数学问题。 当根据网站的用例、潜在受众和设计趋势确定最美观的网站设计选择时，图形设计也是必要的。 Photoshop 和 Illustrator 是尝试不同图形设计方法的绝佳程序。同样，您可以通过[Udemy 等平台的课程](https://www.udemy.com/course/graphic-design-theory-for-beginners-course/?utm_source=adwords&utm_medium=udemyads&utm_campaign=GraphicDesign_v.PROF_la.EN_cc.US_ti.6020&utm_content=deal4584&utm_term=_._ag_115479778221_._ad_502820277020_._kw_learn+graphic+design+online+free_._de_c_._dm__._pl__._ti_kwd-7872404384_._li_1013509_._pd__._&matchtype=e&gclid=CjwKCAjwy42FBhB2EiwAJY0yQgVkXdrWRWRva2Jrf6GV3KSWuI7cKNizUhiUJYVHr_lvuYzFrHlzfRoCH3AQAvD_BwE)学习许多图形设计的基础知识。 ### 了解如何制作网页设计模型原型 网站原型设计是网页设计的重要组成部分，也是从头开始创建网站过程的主要部分。 原型网站涉及各种模型，展示网站的潜在外观。原型将包括网站中涉及的 HTML 和其他代码，以提供网站本身更实用、更真实的演示。在某些情况下，网站原型可以只是最终产品的草图。 拥有原型设计技能是网页设计师成功的关键，因为它证明您了解为潜在客户提供最终产品的可视化想法的价值。在构建网页设计作品集时，能够进行原型设计也是一项宝贵的技能。 ### [创建投资组合](https://university.webflow.com/courses/21-day-portfolio-course) 大多数潜在客户和雇主不会关心您的学业或教育。许多人甚至不关心您在网页设计方面拥有的多年经验。相反，他们关心你的投资组合。 网页设计作品集本质上是您的数字文件，其中包含您的网页设计工作的示例。网页设计作品集可以包括完整的网页、过去的项目、原型、应用程序、模板、主题、屏幕截图等。这应该是您的网页设计冒险中有趣的部分，所以发挥创意吧！ 在您自己的网站上托管您的网页设计作品集是明智的，因为您知道，您是一名真正的网页设计师。我们建议您的网页设计组合在主题方面保持简单，这样您就可以真正正确地展示您的原型。如果您需要一些从哪里开始的提示，请查看 Webflow 的[设计作品集课程](https://university.webflow.com/courses/21-day-portfolio-course)。 ### 使用 Webflow 进行设计和构建 许多流行的内容管理系统可供网页设计师在构建网站时使用，本质上是网页设计师将时间花在其中的“工作室”。Webflow 是一个值得尝试的新的直观平台。 Webflow 是一种可以彻底改变网页设计师构建网站和学习网页设计的方式的平台。将 Webflow 视为您的基本平台 - 您可以在其中构建网站、试验原型、练习网页设计师的技能等等。 Webflow 使得使用可视元素而不是无形式代码从头开始构建自定义网站成为可能。您可以访问大量可以构建到项目中的 SEO 控件。从本质上讲，Webflow 是 Web 开发人员未来的 CMS。 您将能够更快地构建项目和网站，几乎不需要持续维护或需要多年的编码知识。使用 Webflow，原本需要三天才能完成的工作只需不到 24 小时即可完成！ ### 将您的作品放在各种市场上以获得被动收入 一旦你的作品集得到了加强，并且你对自己作为网页设计师的能力充满信心，那么可能就是时候开始寻找潜在的就业机会或出售你的技能的地方了。 [像Coded Market](https://coded.market/en/)这样的平台应该是您的第一站。市场很棒，因为如果您已经有 WordPress 模板或主题，您可以简单地在 Coded Market 上出售它们。这是作为自由网页设计师赚取被动收入的绝佳方式，而无需直接与任何人合作。潜在买家只需付费下载您的主题或模板并自行安装即可。 请记住，在市场上销售主题的网页设计师通常会提供终身或有限的支持。这意味着，如果有人购买了您的主题并在安装时遇到问题，您需要在那里提供安装支持。这将使您看起来更专业，并提高您作为网页设计师的整体声誉。 ### 搜索内部网页设计工作 如果您想彻底改变职业，但又不太喜欢[自由网页设计](https://webflow.com/blog/freelance-websites)，您可以选择在实际组织中担任内部网页设计师。如果您正在寻找高薪、福利和稳定性，这可能会很棒。 请记住，如果您专门为某个组织或公司工作，您将不会有那么多的创作自由。[您可以在Indeed](https://www.indeed.com/q-Web-Design-l-Tucson,-AZ-jobs.html)或[Flexjobs](https://www.flexjobs.com/jobs/web-design)等平台上轻松找到适合所有级别和技能的网页设计工作。 ## 开始网页设计之旅的其他提示 除了上面列出的步骤之外，这里还有一些额外的技巧，可以帮助您在网页设计领域取得成功并提高您的技能。 ### 了解有关 SEO 的更多信息 当要让网站在谷歌搜索页面上排名时，搜索引擎优化至关重要。SEO是最大限度地优化网站以使其排名尽可能高的过程。 网页设计师或多或少对此负有责任，因为搜索引擎优化功能通常内置于网站的核心基础中。了解 SEO 将帮助您成为更受欢迎的设计师，并增强您本已令人印象深刻的技能。 花一点时间研究网页设计中常见的 SEO 实践 - 简单的 Google 搜索将为您提供大量信息。如果您对 SEO 的工作原理一无所知，我们推荐您[阅读《SEO 初学者完整指南》 。](https://blog.bufferapp.com/beginners-guide-to-seo) ### 更好地沟通 网页设计似乎是内向者的梦想。看起来这似乎是一个充满孤独的夜晚的职业，迷失在代码中，几乎不需要与他人交流。然而，事实并非如此。 专业工作的网页设计师如果想在内部营销场景中与自由职业客户以及可能的同事良好合作，就需要进行有效的沟通。无论您的利基是什么，网页设计都不是一个人的表演。 因此，提高沟通技巧非常重要。您与潜在客户合作顺利吗？你能与其他网页设计师、平面设计师和其他专业人士良好合作吗？您能否接受上级的指示，并以有意义的方式将网页设计实践应用到这些指示上？请记住，有效的沟通可以成就一个项目，也可以毁掉一个项目。 ### [加入网页设计师的在线社区](https://titstudio.com/discuss/) 如果您喜欢网页设计，但不太喜欢长时间独自工作并与客户断断续续的沟通是多么孤独，请尝试加入在线社区。 加入网页设计师在线社区有很多好处。这是一个绝佳的社交场所，可以了解热门的用户体验趋势、了解其他人在做什么、获得灵感，甚至可以在这里或那里结交一些朋友。一些最受网页设计师欢迎的在线社区包括 SitePoint、[Designer News](http://www.designernews.co/)和 UX Mastery。 您还可以寻找由网页设计师在现实生活中进行的体育活动。Meetup 是一个很好的平台，可以帮助您寻找其他网页设计师并在本地结交一些您所在领域的朋友。 如果您想了解网页设计领域正在发生的事情，创建自己的 Twitter 帐户也不会有什么坏处。拥有 Twitter 帐户不仅有利于您的营销，而且您还可以使用它来关注网页设计领域的顶级人物，例如 Sara Soueidan 和 Neil Patel。 ### 寻找批评的机会 你应该不断努力改进你的工作。这是你进步的唯一方法！如果有专业人士或同行对你的新项目提出诚实和建设性的批评，这真的很有帮助。 如果您在网页设计领域没有同事，请不要担心。大量在线资源可以将您与其他网页设计师联系起来，例如 Reddit 的[r/web\_design](https://www.reddit.com/r/web_design/)和[r/design\_critiques](https://www.reddit.com/r/design_critiques/)。只需发布您的作品并寻求反馈即可。就这么简单！ # UI 设计的 58 条规则 正确的用户界面可以将应用程序从实用性提升到令人难忘的程度，从而区分一次参与的用户和一次又一次返回的用户。 旨在成为您 UI 设计之旅的终极路线图。无论您是希望更新方法的经验丰富的设计师，还是渴望学习诀窍的新手，这些规则都是为帮助您创建不仅具有视觉吸引力而且具有直观功能的界面而量身定制的。为了驾驭这个复杂的地形，我编制了 8 个类别的 58 条规则，共同形成了用户界面设计的“优雅公式”。本文案例网站大多数采用 Webflow搭建的，这是一项按月付费建站平台。如您需要搭建独立站，请联系微信 sheshuiapp
## 如何制作个人网站 ### 第 1 步：了解为什么要创建个人网站 考虑您个人网站的主题和目的。您可能需要一个空间来记录您的旅行或发表您的创意写作。[或者，您可能需要一个平台来推广您蓬勃发展的烘焙业务，一个作为自由网页设计师](http://docs.titstudio.com/books/8dd48/page/2024)吸引更多客户的渠道，或者一个可以帮助您找到新的全职工作的文案组合。 无论您创建个人网站的原因是什么，花时间考虑您的兴趣以及您希望如何在网上展示它们（和您自己）都很重要。 如果您的目标是获得更多业务，您的个人网站可以在帮助您推销您的技能和才能以及建立您的职业生涯方面发挥重要作用。 [](http://docs.titstudio.com/uploads/images/gallery/2024-01/EkUimage.png) 例如，[Fabio Formata](http://fabioformato.com/)的这个个人网站清楚地传达了他作为电影制作人和视频设计师的技能。这是一个很好的例子，说明了集中精力如何打造更强大的个人网站。 当您知道自己想要传达什么信息时，您就可以告知要建立的网站类型。它可以是由“关于我”部分和联系信息组成的简单主页，也可以是更复杂的内容，例如销售您创建的产品的[电子商务网站。](https://webflow.com/ecommerce) ### 第 2 步：确定您的受众 大多数网站都是针对有特定兴趣的人。了解您想要联系的人与您最初创建个人网站的原因同样重要。 [](http://docs.titstudio.com/uploads/images/gallery/2024-01/hKYfk5P47mDHCzEZ-pFhimage.png) 这个个人网站是在 Webflow 中为职业足球运动员[Liucija Vaitukaityte](https://liucija.webflow.io/)构建的，重点关注视频、统计数据和其他对其粉丝或普通爱好者有吸引力的内容。 像 Liucija 一样，在构建网站时，询问；您想讲一个关于您自己的故事吗？您与目标受众有哪些共同兴趣？如果您的网站旨在营销自己，那么潜在客户在登陆您的页面时会寻找哪些技能？找出您的受众，并决定他们应该从您的网站收集哪些信息。 您编写的内容、包含的图像和视觉效果以及网站的组织方式都应精心设计以吸引目标受众。 ### 第 3 步：选择您要创建的个人网站类型 现在您已经了解了自己想要表达的内容以及您的受众是谁，让我们来了解一下个人网站所属的基本类别，以及哪一类最适合您。 #### 一页网站 个人网站不一定是一项艰巨的任务。为了在互联网上表明您的主张，基本的主页可能是完美的选择。 [](http://docs.titstudio.com/uploads/images/gallery/2024-01/yYYIXiwrzMhzMlQM-oV7image.png) [DJ Daniela Monroe](https://daniela-monroe.webflow.io/#music)的这个单页网站采用 Webflow 构建，突出显示了她的 Soundcloud 曲目，以及指向她活跃的社交媒体帐户（包括 Instagram、Facebook 和 YouTube）的链接。 单页网站通常由首屏主页以及“关于我”和联系信息等其他部分组成。这些[类型的网站](https://webflow.com/blog/types-of-websites)主要是提供信息的，不需要复杂的功能。 如果您拥有活跃的社交媒体作为您的主要在线中心，那么您的个人网站可能只需要一页网站即可。 #### 博客 创建博客相对简单，是您第一个个人网站的绝佳选择。它可以让您网站的访问者清楚地了解您独特的观点、您的技能，最重要的是能够以更个性化的方式与您联系。 首先，您需要问自己是否喜欢写作的艺术和技巧。提出独特的博客文章、撰写它们并与观众分享它们的前景应该会让您感到兴奋。为了拥有一个成功的博客，您需要保持定期的发帖节奏并持续吸引目标受众。 [](http://docs.titstudio.com/uploads/images/gallery/2024-01/ovDrRoxqYPjWlPG7-6nXimage.png) Adelaide Perr 的[博客](https://www.adelaideperr.com/)就是一个很好的例子。它不仅涵盖自行车运动，还讨论了如何克服相关的生活困境，从而吸引了更广泛的受众。 博客是一个饱和的空间。但最好的博主都对他们所写的内容有着真实性和热爱。开设一个关于对您来说最重要的事情的博客。 #### 作品集 作品集的严格目的是向他人推销您的技能和才能。如果您从事摄影、设计、写作或其他创意工作等领域，那么作品集是必不可少的。您的个人作品集可以提高您的专业知识的知名度，建立您的个人品牌，并帮助您吸引新客户。 包含“关于”部分、服务、特色项目以及联系方式；设计师[Glenn Catteeuw](https://glenncatteeuw.com/)的这个网站拥有作品集所需的一切 - 全部通过现代且引人注目的设计呈现。 与简单的博客或一页网站相比，作品集需要管理更多元素。但即使对于网页设计师初学者来说，也有简单的方法来构建网页。Webflow 有许多[投资组合模板，](https://webflow.com/tag/portfolio-websites)您可以使用它们在短时间内启动并运行您自己的投资组合。 ### 第 4 步：准备内容 我们建议您的网页设计采用内容优先的方法。这样，您就知道要包含什么内容，并可以设计您的网站来迎合该内容。您不需要所有内容的最终草稿才能开始，但准备一份粗略的副本将使您更准确地了解网站完成后的外观。 #### **您的打开登陆页面** 将您的打开登陆页面或主页视为您的第一印象。首先，要有一个强有力的标题、一些表达你是谁的附带文字，以及一个强烈的视觉效果来开始你的主页。 以下演员[盖乌斯·查尔斯](https://www.gaiuscharles.com/)的个人网站以大文字和戏剧性图像开头，吸引访问者并让他们想了解更多。 [](http://docs.titstudio.com/uploads/images/gallery/2024-01/8zTSZB0mxkmwN67W-6Mrimage.png) #### **关于我的一个** 您想让人们了解您是谁以及您的全部内容。让您的访客了解一下您的背景。包括有关您自己的信息，这些信息有助于您实现更大的目标。 作家兼物理学家克里斯·费里 (Chris Ferrie) 的这本“关于我”的[作品集](https://www.csferrie.com/about)出色地突出了他所拥有的关键优势和过去的经验。 [](http://docs.titstudio.com/uploads/images/gallery/2024-01/ERTFJzT8sSnurMLr-cBSimage.png) 您的“关于我”页面不必太长。只需分享有关您自己、您的技能以及您希望网站访问者了解您的任何其他信息即可。 #### **照片和其他视觉效果** 视觉和文本之间需要取得良好的平衡。没有人愿意翻阅无穷无尽的文字，也不想看到一堆没有任何背景的照片。 使用有助于讲述故事并补充文案的图像。如果您想超越，请聘请平面设计师来创建一些自定义插图或制作一些手绘字体以添加一点个性。 #### **特色项目** 如果您的个人网站要用作作品集或简历，则应包含您过去工作的示例。寻找能够充分展示您所做工作的项目，并体现您的技能和才能的精髓。 #### **建议和推荐** 这更适用于具有营销角度的投资组合或小型企业网站。 从同事和其他为您工作过的人那里获取报价。如果您有 LinkedIn 个人资料，则可以将您在那里收集的推荐作为起点。不要害羞地去联系那些曾经与你共事过的人，他们可能对你作为一个专业人士有好话要说。 #### **撰写博客文章** 如果您想将博客作为个人网站的一部分，最好在启动博客之前先整理几篇文章。定期发帖会让人们想回来看看有什么新鲜事。使用[内容管理系统](https://titstudio.com/services/web-building)(CMS) 可以轻松发布更新和进行编辑。 ### 第五步：针对搜索引擎优化内容 [搜索引擎优化 (SEO)](https://titstudio.com/services/seo)使网络爬虫可以更轻松地扫描您的内容并确定其内容。良好的搜索引擎优化既涉及网站的幕后技术工作，也涉及对您希望在自然搜索结果中排名的单词和短语的策略性使用。在开始将内容放入网页设计之前，进行 SEO 跑腿工作总是一个好主意。 高质量的内容是搜索引擎优化的重要组成部分。你的写作应该有一定的深度和重要的细节。通过包含您不断更新的博客，您将获得另一个内容流，供网络爬虫扫描您的网站。 如果您以前从未做过搜索引擎优化，那么它可能会有点棘手。如果您想了解更多信息，请查看[SEO 和 Webflow：基本指南](https://webflow.com/blog/seo-and-webflow-the-essential-guide)。 ### 第六步：找到你的灵感 也许您最喜欢的网站使用您喜欢的[颜色组合。](https://webflow.com/blog/best-color-combinations)或者也许您见过一种很酷且时尚的字体，它非常适合作为网页设计中的标题。受别人设计的影响是可以的，取自己喜欢的来塑造自己的视觉审美。不知道从哪里开始？查看这[22 个鼓舞人心的网页设计趋势](https://webflow.com/blog/web-design-trends-2022)。| 阶段 | 内容 | 时间 |
|---|---|---|
| 需求确认 | 页面结构梳理，功能清单确认 | 2 天 |
| UI/UX设计 | 样式草图、响应式界面设计稿 | 7-10 天 |
| 前端开发 | HTML/CSS/JS 动效及响应式布局实现 | 7 天 |
| WordPress开发 | 后台结构搭建，功能实现，ACF自定义字段开发 | 10 天 |
| 联调与测试 | 兼容性测试，性能调优，Bug修复 | 3 天 |
| 客户培训与交付 | 后台操作培训文档或视频交付 | 1 天 |