最優資產組合步驟

The portfolio website is one of the most important assets for a designer. Without it, it can be tough to find your next job or client.

作品集網站是設計師最重要的資產之一。 沒有它，很難找到下一份工作或客戶。

The temptation is high to redesign it every few months to keep it fresh, especially if you’re a fairly new designer. But rather than chase trends, follow these 5 steps to make sure your redesign has a purpose and brings you closer to your goals.

每隔幾個月重新設計以保持新鮮感的誘惑很大，特別是如果您是一個相當新的設計師。 但是，不要追逐趨勢，而是按照以下5個步驟操作，以確保重新設計具有目的性并使您更接近目標。

1.規劃階段 (1. The planning stage)

Believe it or not, you don’t start with design. The first step is to plan out your website content but first, ask yourself this one question:

信不信由你，你不是從設計開始的。 第一步是計劃您的網站內容，但首先請問自己一個問題：

What are your goals for this website?

您對本網站的目標是什么？

The answer to this question will dictate the content you include as well as the design of the website.

該問題的答案將決定您包括的內容以及網站的設計。

創建一個站點地圖 (Create a sitemap)

Start with the end in mind. If your goal is to get a new job then you’ll need to navigate the user to your portfolio. You’ll also want to include an about page so they can learn more about why they should hire you, and a contact page to reach out to you. Sketch out a sitemap including these key webpages

從結局開始。 如果您的目標是找到一份新工作，那么您需要導航用戶到您的投資組合。 您還需要包括一個關于頁面，以便他們可以了解更多有關為什么要雇用您的信息，以及一個聯系頁面以與您聯系。 繪制包括這些關鍵網頁的站點地圖

You may want to link one page to another. In this example, I link to both portfolio and contact pages on the about webpage.

您可能需要將一個頁面鏈接到另一頁面。 在此示例中，我鏈接到About頁面上的投資組合頁面和聯系頁面。

Design by Monica Galvan 莫妮卡·加爾萬 ( Monica Galvan)設計

列出所有內容 (Make a list of everything)

Take time to list every little thing you want to include on your site. Do you want to include a section linking to Instagram or Behance? Do you want to include a blog? Maybe you have links to articles you’ve written elsewhere. Write it all down. You might not end up including everything but it’s better to have the list first and eliminate later.

花時間列出您想包含在網站中的所有小物件。 您是否要包括一個鏈接到Instagram或Behance的欄目？ 您要加入博客嗎？ 也許您有指向您在其他地方撰寫的文章的鏈接。 全部寫下來。 您可能并沒有囊括所有內容，但最好先列出列表，然后再刪除列表。

2.探索各種創意方向 (2. Explore various creative directions)

You’re the art director of your website, you set the visual tone. Start to research other websites in line with your goal. Gather photos, illustrations, typography, any design you find inspiring. These will help you determine the visual direction of your site

您是網站的藝術總監，您可以設置視覺效果。 開始根據您的目標研究其他網站。 收集照片，插圖，版式以及任何啟發您的設計。 這些將幫助您確定網站的視覺方向

創建多個情緒板(不僅僅是一個) (Create several moodboards (not just one))

After you’ve gathered a few dozen images, use your preferred design software to divide them into themes.

收集了幾十個圖像后，請使用您喜歡的設計軟件將它們劃分為主題。

I love to use Adobe XD to create moodboards. Since this phase of the design process is about speed and getting ideas out quickly, I find myself spending too much creating perfect layouts if I use any of the other Adobe programs. Adobe XD makes it super easy to drag and drop images and overall has a good user experience.

我喜歡使用Adobe XD創建情緒板。 由于設計過程的這一階段是為了加快速度并Swift提出想法，因此，如果使用其他Adobe程序中的任何一個，我都會花太多時間來創建完美的布局。 Adobe XD使拖放圖像超級容易，并且總體上具有良好的用戶體驗。

探索調色板 (Explore color palettes)

I also choose a few colors from the images to create a color palette to go along with the mood. You don’t have to use all these colors on your site but you may be inspired to use a few.

我還從圖像中選擇了幾種顏色來創建調色板以配合心情。 您不必在網站上使用所有這些顏色，但可能會啟發您使用其中的幾種。

For the redesign of my website, I created 6 moodboards. Notice how each offers a completely different mood. It’s important to consider all options rather than narrowing down on one.

為了重新設計網站，我創建了6個情緒板。 注意每個人如何提供完全不同的心情。 重要的是要考慮所有選擇，而不是縮小選擇范圍。

Design by Monica Galvan 莫妮卡·加爾萬 ( Monica Galvan)設計 Design by Monica Galvan 莫妮卡·加爾萬 ( Monica Galvan)設計 Design by Monica Galvan 莫妮卡·加爾萬 ( Monica Galvan)設計 Design by Monica Galvan 莫妮卡·加爾萬 ( Monica Galvan)設計 Design by Monica Galvan 莫妮卡·加爾萬 ( Monica Galvan)設計 Design by Monica Galvan 莫妮卡·加爾萬 ( Monica Galvan)設計

3.繪制并創建低保真線框 (3. Sketch and create low-fidelity wireframes)

We’re more than halfway through the process and still haven’t designed anything yet. Nailing these beginning steps when you create your website ensures a smooth design process.

我們已經完成了一半以上的過程，但尚未進行任何設計。 創建網站時釘住這些開始步驟可確保設計過程順利進行。

Start mapping out the layout of your site with wireframes, starting with the homepage. I suggest starting with either pen and paper or digital sketching on an iPad.

從首頁開始，使用線框開始繪制網站布局。 我建議從iPad上的筆和紙或數字素描開始。

I use Procreate on and iPad Pro to sketch out as many different layout options for the homepage. Once I’ve exhausted all options, I move on to creating low-fidelity wireframes in (you guessed it) Adobe XD.

我使用Procreate on和iPad Pro來為主頁繪制出許多不同的布局選項。 用盡所有選項后，我將繼續在Adobe XD中(您猜對了)創建低保真線框。

For color backgrounds, I use a dark gray. A lighter gray with an X across is a photo. Long rectangular boxes are type ranging from headline to body copy.

對于彩色背景，我使用深灰色。 帶有X的淺灰色是照片。 長矩形框的類型范圍從標題到正文。

Here’s how the sketches compare with their tightened low-fidelity versions.

這是草圖與收緊的低保真版本的比較方式。

Wireframes by Monica Galvan線框作者： 莫妮卡·加爾文 ( Monica Galvan) Wireframes by Monica Galvan線框作者： 莫妮卡·加爾文 ( Monica Galvan)

Line up all wireframes next to each other and analyze each option. We’ll use these to help us design in the next step.

將所有線框彼此并排排列，并分析每個選項。 我們將使用它們來幫助我們進行下一步設計。

Wireframes by Monica Galvan線框作者： 莫妮卡·加爾文 ( Monica Galvan)

4.使用線框作為指導來設計UI (4. Use wireframes as a guide to design the UI)

Now it’s time to start designing. Take each wireframe and begin to add color and photos to bring the design to life. You may be inspired to create several design options but create at least one design for each wireframe.

現在是時候開始設計了。 拿起每個線框，開始添加顏色和照片，使設計栩栩如生。 您可能會被啟發創建多個設計選項，但為每個線框至少創建一個設計。

Here are some of the wireframes I transformed into a landing page design. Notice how some elements may change. You don’t have to follow the wireframe exactly, use it more as a guideline, and refine as you go.

這是我轉換為目標網頁設計的一些線框。 注意某些元素可能會如何變化。 您不必完全遵循線框，可以將其更多地用作準則，也可以隨時進行細化。

Design by Monica Galvan 莫妮卡·加爾萬 ( Monica Galvan)設計 Design by Monica Galvan 莫妮卡·加爾萬 ( Monica Galvan)設計 Design by Monica Galvan 莫妮卡·加爾萬 ( Monica Galvan)設計 Design by Monica Galvan 莫妮卡·加爾萬 ( Monica Galvan)設計 Design by Monica Galvan 莫妮卡·加爾萬 ( Monica Galvan)設計 Design by Monica Galvan 莫妮卡·加爾萬 ( Monica Galvan)設計

5.建立最終設計 (5. Build the final design)

This step will depend on how you develop your site. Maybe you’re creating a completely custom website and handing off to a developer. Or maybe you’re using a platform and modifying a theme.

此步驟將取決于您開發網站的方式。 也許您正在創建一個完全自定義的網站并移交給開發人員。 或者，也許您正在使用平臺并修改主題。

I already hosted my website with Squarespace so I used my design mockup as a guide to modify the theme.

我已經在Squarespace上托管了我的網站，所以我以設計模型為指導來修改主題。

Monica Galvan)Monica Galvan設計)

Again, you’ll notice how your design will adapt. I decided to stick with a traditional white background instead of the cream option in my mockup as I realized it would clash too much on my case study pages.

同樣，您會注意到您的設計將如何適應。 我決定在樣機中堅持使用傳統的白色背景，而不是使用奶油選項，因為我意識到這樣做會在我的案例研究頁面上產生太多沖突。

After testing the design on mobile and desktop, I realized it was important to change the size relationship and boldness of the typography in the logo and headlines for a better user experience.

在移動設備和臺式機上測試了設計之后，我意識到更改徽標和標題中字體的大小關系和粗體性對于獲得更好的用戶體驗非常重要。

monicagalvan.comonicagalvan.co的最終主頁設計

您的投資組合正在進行中 (Your portfolio is a work in progress)

Your portfolio is never finished. There will always be something to update or a new project to add.

您的投資組合永遠不會完成。 總會有一些要更新的內容或要添加的新項目。

It can be overwhelming to redesign your portfolio website but these 5 steps will help push you in the right direction.

重新設計您的投資組合網站可能會讓人不知所措，但這5個步驟將幫助您朝正確的方向發展。

逐步觀察設計過程 (Watch the design process step-by-step)

Sometimes it’s easier to observe the design process first-hand. I walk you through the entire process in less than 5 minutes in this video.

有時，親眼觀察設計過程會更容易。 在此視頻中，我將在不到5分鐘的時間內引導您完成整個過程。

Monica’s Design Process on YouTube Monica在YouTube上的設計流程 UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個巴西組織，致力于通過采取行動，賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/follow-these-5-steps-before-you-redesign-your-portfolio-website-3e70512fa6c4

最優資產組合步驟

總結

以上是生活随笔為你收集整理的最优资产组合步骤_重新设计投资组合网站之前，请按照以下5个步骤进行操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。