最優(yōu)資產(chǎn)組合步驟

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.

作品集網(wǎng)站是設(shè)計師最重要的資產(chǎn)之一。 沒有它，很難找到下一份工作或客戶。

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.

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

1.規(guī)劃階段 (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:

信不信由你，你不是從設(shè)計開始的。 第一步是計劃您的網(wǎng)站內(nèi)容，但首先請問自己一個問題：

What are your goals for this website?

您對本網(wǎng)站的目標是什么？

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

該問題的答案將決定您包括的內(nèi)容以及網(wǎng)站的設(shè)計。

創(chuàng)建一個站點地圖 (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

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

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頁面上的投資組合頁面和聯(lián)系頁面。

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

列出所有內(nèi)容 (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.

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

2.探索各種創(chuàng)意方向 (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

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

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

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

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

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

探索調(diào)色板 (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.

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

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.

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

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

3.繪制并創(chuàng)建低保真線框 (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.

我們已經(jīng)完成了一半以上的過程，但尚未進行任何設(shè)計。 創(chuàng)建網(wǎng)站時釘住這些開始步驟可確保設(shè)計過程順利進行。

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.

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

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來為主頁繪制出許多不同的布局選項。 用盡所有選項后，我將繼續(xù)在Adobe XD中(您猜對了)創(chuàng)建低保真線框。

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.

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

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

4.使用線框作為指導來設(shè)計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.

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

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.

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

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

5.建立最終設(shè)計 (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.

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

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

我已經(jīng)在Squarespace上托管了我的網(wǎng)站，所以我以設(shè)計模型為指導來修改主題。

Monica Galvan)Monica Galvan設(shè)計)

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.

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

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.

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

monicagalvan.comonicagalvan.co的最終主頁設(shè)計

您的投資組合正在進行中 (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.

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

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

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

逐步觀察設(shè)計過程 (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.

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

Monica’s Design Process on YouTube Monica在YouTube上的設(shè)計流程 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)，這是一個巴西組織，致力于通過采取行動，賦權(quán)和知識共享的舉措來促進科技行業(yè)中的黑人女性平等。 對系統(tǒng)性種族主義保持沉默是不可行的。 建立您相信的設(shè)計社區(qū)。

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

最優(yōu)資產(chǎn)組合步驟

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。