Trang

Hiển thị các bài đăng có nhãn website. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn website. Hiển thị tất cả bài đăng

26 thg 8, 2018

15 WEBSITE GIÚP BẠN THÔNG MINH VÀ HỮU ÍCH HƠN

Những trang web vô cùng thú vị và hữu ích.

1. www.vocabulary.com – Đây là trang web thú vị nhất, thông minh nhất để giúp bạn học thêm từ mới tiếng anh một cách cực kì nhanh chóng.
2. www.coursera.org – Coursera là một công ty giáo dục liên kết với các trường đại học hàng đầu và các tổ chức giáo dục nổi tiếng trên thế giới nhằm tạo ra các khóa học online miễn phí dành cho bạn65 trên thế giới nhằm tạo ra các khóa học online miễn phí dành cho bạn.
3. www.spreeder.com – Là một trang web miễn phí giúp tăng cường tốc độ đọc và hiểu của bạn.
4. www.lumosity.com – Một công cụ online sáng tạo, bổ ích giúp tăng cường khả năng của não bộ. Dù bạn ở bất kì lứa tuổi nào, trình độ học vấn nào, các trò chơi trong Lumosity hoàn toàn có thể giúp bạn thông minh hơn, nhanh nhẹn, sắc bén hơn.
5. www.ted.com – Trang web này chứa hàng trăm video về các cuộc nói chuyện từ các chuyên gia, các nhà khoa học với cách diễn đạt thông minh, dễ hiểu và dí dỏm, lôi cuốn. Khoa học trở thành đề tài thiết thực, nóng bỏng và hấp dẫn qua những video thú vị, và bạn sẽ tìm được kiến thức, cũng như nguồn cảm hứng mới cho bản thân trong nhiều lĩnh vực, đề tài của cuộc sống.
6. www.howtodothings.com – Trang web dạy bạn làm bất kì điều gì, có hướng dẫn từ a đến z.
7. www.freerice.com – Là một website phi lợi nhuận của Chương trình Lương thực Thế giới Liên hợp Quốc. Bạn phải trả lời các câu hỏi liên quan đến từ vựng, và mỗi câu trả lời đúng, bạn đã góp phần mang gạo miễn phí đến cho những người nghèo.
8. www.stumbleupon.com – Đây là một trang web tìm kiếm hữu hiệu. Nó giúp bạn tìm kiếm những website khác về nội dung liên quan chủ đề bạn quan tâm. Bạn có thể đánh dấu, bình chọn và chia sẻ những thông tin, hình ảnh, video bạn có như trên mạng xã hội quen thuộc khác.
9. www.howstuffworks.com – Một trang web cho những ai tò mò và ham thích tìm hiểu mọi thứ được thiết kế và vận hành như thế nào, từ chiếc điện thoại di động đến tế bào gốc.
10. www.flipkart.com – Một website thiết kế thông minh như một cửa hiệu sách, giúp bạn dễ dàng lấy sách và đọc.
11. www.goodreads.com – Một trang web lý tưởng để bạn xây dựng hẳn một thư viện online cho riêng mình. Đây là kho lưu trữ sách điện tử đồ sợ nhất thế giới, cung cấp cho bạn cả những giới thiệu và đánh giá hữu ích về cuốn sách bạn muốn xem.
12. www.wikipedia.org – Bạn đã quen thuộc với trang web tra cứu này? Hãy tiếp tục đọc và đóng góp cho nó nhé.
13. www.poemhunter.com/poets – Nơi bạn có thể đọc thơ của những nhà thơ nổi tiếng thế giới.
14. www.quora.com – Dõi theo những người thú vị với các chủ đề hấp dẫn và ghi chép lại nhận xét, đánh giá của bạn.
15. www.todayifoundout.com – Học được một vài điều thú vị và bất ngờ về thế giới đương đại.
[Nguồn: Life Hack]

2 thg 5, 2013

10 cách để phân tách vùng nội dung trong thiết kế web


Một vấn đề đơn giản bạn thường gặp trong thiết kế web là tách nội dung thành hai phần riêng biệt khác nhau. Là một nhà thiết kế, tôi thường dùng một đến hai thủ thuật để làm việc này. Vậy tại sao lại không kết hợp các thủ thuật với nhau?
Hôm nay, chúng tôi sẽ cho bạn thấy 10 cách tuyệt vời giúp tách riêng biệt hai phần nội dung. Mỗi ví dụ đều lấy từ các trang web thực tế và bạn có thể tham khảo.

Tương phản là vua

Đây là cách tách các phần nội dung đơn giản và phổ biến nhất. Tất cả những gì bạn cần làm là chọn hai màu tương phản cho phần nội dung.

Thường là màu trắng và một màu tối hơn như màu đen hoặc màu đỏ tươi. Màu sắc tương phản là công cụ thiết kế mạnh mẽ nhất, sử dụng một cách khéo léo bạn sẽ có một thiết kế bắt mắt.

Làm mờ nhanh

Làm mờ nhanh ngược lại với ví dụ trên. Thay vì dùng màu tương phản và những đường line là tương phản nhẹ và tách riêng biệt.

Ý tưởng này dùng cho các tình huống mà bạn muốn có một sự khác biệt nhỏ giữa phần hình ảnh và nội dung nhưng chúng vẫn liên quan chặt chẽ với nhau.
Ví dụ trên sử dụng đường mờ nhỏ để tách các biểu tượng và phần văn bản. Một lần nữa cả hai liên kết với nhau bằng một đường line mỏng.

Các tam giác nhỏ

Các tam giác nhỏ có thể kết hợp với một số kỹ thuật khác, nhưng thường sử dụng những đường kẻ như ví dụ dưới đây. Có thể đảo ngược lại hình tam giác.

Dùng tam giác nhỏ khi bạn muốn gây sự chú ý đến một cái gì đó. Nó thường dùng cho các bộ sưu tập theo chiều ngang. Tam giác di chuyển khi bạn chọn các mục khác nhau

Các bài tách rời

Tôi không chắc ai đã khởi xướng nhưng nó đã trở nên phổ biến trong một đến hai năm gần đây. Đây là một giải pháp thanh lịch hơn rất nhiều so với việc dùng các đường kẻ ngang cứng nhắc.

Không nhất thiết phải là những đường răng cưa. Bạn có thể thay đổi về khoảng cách, chiều cao… Bạn cũng có thể sáng tạo những ý tưởng độc đáo mang tính cạnh tranh hơn.

The Cutoff

Ví dụ này xuất phát từ cùng một trang web, thiết kế của Colin Grist cho một websitetuyệt vời. Hãy xem cách ông phân biệt 2 phần nội dung:

Ông dùng một đường line nhưng thay vì dùng màu sắc tương phản, ông chỉ cắt bớt hình ảnh. Giải pháp đơn giản tuyệt vời và hoạt động rất tốt. Có thanh cuốn cho phần chọn bên dưới.

The Silhouette

Nó giống như giao diện sổ lưu niệm, bạn chỉ cần bỏ đường line để không gây nhàm chán. Tuy nhiên, đồ họa cần thêm nhiều hình ảnh hơn.


Tôi thật sự thích cách mà nhà thiết kế này làm với các lớp tòa nhà. Nó thật sự gây ấn tượng. Bạn có thể thử với một số hình ảnh khác như các ngọn núi, nước, cây …

Overlay

Lớp phủ là một cách khác để phân biệt hai phần nội dung một cách tinh tế. Nó trông phong cách hơn và phổ biến với cách làm mờ.

Nó có thể dễ dàng thực hiện trong Photoshop với opacity layout, nhưng sử dụng CSS thì đơn giản hơn. Hãy chắc rằng bạn sử dụng màu sắc bằng RGBa và chọn giá trị phù hợp để có sự phân chia rõ ràng.
Thủ thuật sử dụng lớp phủ cho navigation và các menu bar khác, cũng có thể cho quảng cáo và thiết kế giao diện UI. Nó thật sự là một kỹ thuật tuyệt vời cho bất kỳ dự án nào.

Thước aka

Tôi thật sự thích giao diện này và tôi sẽ dùng nó cho các dự án sắp tới. Ví dụ bên dưới dùng thước đặt theo chiều dọc.

Bạn có thể sử dụng kỹ thuật này như một yếu tố tĩnh đơn giản nhưng thiết kế này đã làm được tốt hơn. Sử dụng như một navigation.
Ví dụ có một kỹ thuật tốt, đơn giản bằng những điểm ngang. Nếu bạn muốn một thiết kế đơn giản, cách tốt nhất là chia bằng một line nhỏ. Còn gì dễ dàng hơn nữa?

Slice

Tôi đã suy nghĩ không biết gọi thiết kế này là gì nhưng trông nó rất tuyệt.

Có một số biến thể của ý tưởng này. Cơ bản đều là bổ sung phần nội dung và một số vị trí đánh bóng. Nó sẽ trở nên hoàn hảo hơn nếu bạn thêm vào một chút sáng tạo.

Kitchen Sink

Nếu đây là thiết kế giúp ích cho dự án của bạn, hãy nhớ rằng bạn có thể sử dụng một trong các thủ thuật.

Cũng như những thiết kế khác, tôi nghĩ thiết kế trên là một ví dụ tốt trong việc kết hợp nhiều phương pháp nhưng vẫn hấp dẫn và không quá rối. Chúng ta có thể thấy sự tương phản trong mày sắc, lớp phủ, những line đơn giản và scrapbook, tất cả đều trên cùng một thiết kế.
Các thiết kế nhất quán và lặp đi lặp lại và bạn không chỉ dùng cho mỗi phần khác nhau.

Kết luận

Mười ví dụ về việc tách nội dung có vẻ đơn giản nhưng tôi tin nó sẽ giúp ích cho bạn.
Hãy cho chúng tôi biết bạn thường sử dụng kỹ thuật nào trong các thiết kế của bạn.

Nguồn : Vnwordpress

7 thg 9, 2012

Beyond Wireframing: The Real-Life UX Design Process


We all know basic tenets of user-centered design. We recognize different research methods, the prototyping stage, as well as the process of documenting techniques in our rich methodological environment. The question you probably often ask yourself, though, is how it all works in practice?
What do real-life UX design processes actually look like? Do we have time for every step in the process that we claim to be ideal? In this article, I’ll share a couple of insights about the real-life UX design process and speak from my own experience and research.

User-Centred Design: Truth Vs. Fiction

A few years ago, I joined one of the biggest e-commerce companies in Eastern Europe. When I entered my new office, I immediately spotted a huge user-centered design (UCD) poster on the wall. The whole process was described in detail that left hardly any doubts about the step-by-step approach to design. Exciting interior design for an aspiring UX designer, right? I stared at the poster with great hope and imagined how exciting following the ideal UCD process would actually be. Guess what? They didn’t apply a single step from the poster to the actual process. They never did any research, nor any serious analysis of user behavior. Yikes, they didn’t even prototype! This fancy poster simply hung shamefully on the wall.
For the next three years, we worked hard to put user experience design at the heart of a developer-driven culture. We forgot about the poster and structured our own process, which fitted well with the company’s capabilities and allowed us to constantly optimize our main service. Why didn’t we use the crystal-clear theoretical approach? Because we couldn’t afford to go step by step through a classic UCD process with a lot of different activities. It would have taken too much time, and therefore it was economically invalid — the budgets for our projects were way too tight.
To deliver a user interface on time, we were forced to get really lean. We used a classic UCD process as inspiration and created a process that was simple but actionable for the company. We defined the problem, defined the scope of the project, iterated through paper prototyping and wireframing, pushed code to production as fast as we could, and always used multivariate split-testing and detailed Google Analytics event tracking.
Post-launch was the time to measure and plan optimization, which we executed immediately. Unfortunately, only huge projects had budgets for qualitative testing. Huge projects were also full of preliminary diagrams (site maps, flow charts, conceptual diagraming) — a enormously recommended activity to find order in a complex mess of information.
All in all, our process was simple but efficient. Of course, in general terms, it was a UCD process, but compared to any popular approach and a famous UPA poster, we used about 20% of the recommended tools and studies. We assumed that users don’t benefit from poster unicorn processes. Users benefit from the hard work of a product team; therefore, a simplified process is better than a robust unactionable theory.
UPA UCD Poster
Designing the user experience. (Large version)
Suddenly, I started to wonder how others managed to apply UCD. There’s a lot of talk about wireframes, but what does our work look like beyond wireframes? Was I the only one with a simplified approach? What can we do to create successful designs? What does the process beyond “the poster” look like? Is there a pattern that works well for the majority of designers?

The Reason For Research

Luckily enough, I was about to find some answers to my questions about the design process. I was forced to perform a worldwide reality check on my opinion about the classic UCD approach and design processes. Sharing this reality check is the raison d’être of this article.
  • If you’re fresh in the UX design world, learning how more experienced designers work might be useful.
  • If you’re a seasoned designer, treat this article as an incentive to reconsider your approach to design. We’re all rushing our designs every day. This is the time to take a breath, see what others are doing and think about what works and what doesn’t work in our real-life approach — beyond a UCD poster.
You may wonder what force persuaded me to revise my approach to the design process. The answer is simple: my own startup. Together with my friends, we created paper prototyping notepads to make our process more efficient, and then we created our own collaborative wireframing application. We suddenly became quite popular, took VC investment and decided to face the challenge: to create a user experience design toolset to support teamwork in the design process.
We felt that we were trying to fight Godzilla (or Tywin Lannister, if you prefer Game of Thrones to old Japanese movies). If my UX teams couldn’t apply a classic UCD approach, how could I be sure that using any theoretical framework would enable me to design a toolset that fits anyone’s real-life process? I couldn’t. Is there any pattern in design processes that we actually apply in our companies? I had no idea.
We felt that we needed to find out the truth about real-life design processes and we needed it now. It appeared to us that our research might be of vast importance to the community and even beyond. A simple equation: a great tool for the design process equals less work for designers on the tools side, equals more time for creative work, equals better designs for all of us.
The stakes were great, and there was just one right thing to do: get out of the building, get our hands dirty with research, find out and learn about the real-life design process (if it exists), and literally hunt out pain points in it to make the work of our team much easier and more pleasurable. We packed our stuff and crossed the great pond, so to speak, to do some serious research in San Francisco and Silicon Valley. Read on if you want to know what we found out about the design process!

The Customer Development Process And Tons of Individual In-Depth Interviews

The life of a modern startup is full of UX design work, even if the founders don’t realize it. Drake Martinet (Wall Street Journal, Stanford University) considers the whole lean startup movement to be a mere application of design principles to the business environment. I couldn’t agree more.
When starting a new project, you actually need to talk to people from your target group. Here comes what are well known as IDIs (individual in-depth interviews): moderated, individual interviews in which you try to learn as much as you can about the problems of your interlocutor in a particular area of their life.
Our target group was user experience designers, so we scheduled above 50 interviews (personally and via Skype). Each focused on the same theme: the real-life UX design process. We asked designers to tell us stories of their usual process based on one of their projects. During the interviews, we asked a ton of in-depth questions to learn as much as we could about the process.
We hardly asked about problems in the design process, though — we tried to spot them in the stories on our own and then confirm our judgment by asking questions (for example, “I understand that X was troublesome in this particular project?”). We tried as hard as possible not to push any views onto our interlocutors. Letting them speak was important.
We interviewed UX heroes Mike Kuniavsky, Indi Young, Luke Wroblewski, Peter Merholz, Brandon Schauer, Jeffrey Kalmikoff and John Zeratsky and some lesser-known but excellent UX designers. Among our interlocutors were in-house UX designers, designers from consultancies and freelancers. Surprisingly enough, the problems that usually trouble UX designers were similar in all three groups.
It was an intense learning experience, and I highly recommend considering such preliminary research in every project. It will give you a ton of ready-to-use knowledge — a kind of canvas to work from.

The Process That Emerged From Designers’ Stories

First of all, we didn’t find any unicorns, but we did find racehorses in excellent condition. While all of the processes that emerged from the stories were somehow simplified UCD processes, they were tailored to the specialities of the designers. Flexibility is what helps us survive in the diverse jungle of projects. Processes morph to fit projects.
The approach to an e-commerce website differs from the way we design mobile apps in the healthcare industry (guess where context analysis matters most?), and government clients differ from corporate stakeholders and startup entrepreneurs, and so on. With few exceptions, though, the process looks surprisingly similar. There is a visible pattern that we all use to design interfaces in different environments:

1. COLLECTING INFORMATION ABOUT THE PROBLEM

Every UX designer needs to be a kind of detective in the early stage of a project. We need to find out as much as we can about the three Ps (people, problem, project). Activities in this stage, in contrast with the classic UCD approach, are vastly simplified:
  • Meeting with the client (no matter whether externally or internally) and identifying the product’s requirements (often in the form of a standardized product requirement document);
  • Benchmarking and trend analysis (oh yes, most of the designers we interviewed do that).
We seldom perform user interviews, but writing user stories is one of the commonly accepted attachments to the product requirement document. Our user stories are sometimes created based on personas, which are hardly ever backed up with data. Field studies and task analysis are hardly used by any of the designers we interviewed.

2. GETTING READY TO DESIGN

This is clearly the ideation part of the process. It’s completely conquered by analog tools. I haven’t met a single designer who doesn’t use quick messy sketching or some other paper prototyping form at the early stage of a design process!
Designers try to act on the material gathered in the first step of the process and find a design worth refining. This stage is not about documenting; it’s about artistic fury and creative explosion. Many of us use Adaptive Path’s multipage templates to quickly create very generic sketches.
Unfortunately, testing lo-fi prototypes is not popular. We prefer to take the risk of choosing one option with a stakeholder and begin the refinement process. Not very UCD-like, but that is the reality.

3. DESIGN

In contrast to the anti-documentation agile approach, most of the interviewed designers create wireframes and prototypes to document the experience and then hand them to the developers.
Refined sketches from the previous stage are still rather lo-fi and are usually not tested. Hi-fi design is left for visual designers. In Aristotelian terms, we create the form, while developers and visual designers fight to create the matter. Heuristic evaluation is definitely out of fashion, while expert review backed up with a cognitive walkthrough is quite popular.

4. APPROVAL

This is surprisingly an important part of the design process. Research documents and deliverables usually also serve as persuading factors in the “buy-in” process. This does not differ between in-house UX designers, freelancers and folks from consultancies.
Buy-in is the unfortunate peak of our process. None of us want to see our work go directly to the trash, and I’ve seen some great projects rejected just because the story behind the design process wasn’t particularly persuasive.
And guess what? A lot of the interviewed designers actually create a special presentation to tell stakeholders the design story. The presentations show stages of the process, deliverables and interactions, and they aim to give stakeholders lazy access to all of the information.
The four points mentioned above form a pattern visible in the majority of design processes that we went through with our interlocutors. You might have noticed that not a lot of iterative research is done in these processes. Sadly, the classic usability study is not a permanent part of the process. Why? The answer is simple: budgets are tight. Problems that appeared in the company that I used to work for appeared to be common. Tight budgets are forcing UX designers to tailor their processes and skip costly research.
I believe the best answer to this problem is guerrilla research methods. Startups do adapt guerrilla research as a part of the customer development process, but more “mature” companies, in my opinion, are strangely afraid of spontaneous and methodologically questionable yet efficient and cheap research methods. One of the challenges of the UX design community in the coming years will be the popularization of guerrilla research methods and bringing them into our real-life design processes.

Houston, We Have Several Recurring Problems

During our research, we tried to spot recurring problems in the design processes of our interlocutors — a so-called pattern of pain. Surprisingly enough, similar problems appeared in almost all individual interviews. Apparently, a lot of us live arm in arm with three tough unresolved problems that tend to slow us down:
  1. Spreading an understanding of the design process
    How to engage the whole team in the process and show them that UX designers are not people who lack talent in visual design yet still insist on drawing something? How to teach that there’s user experience beyond wireframes?
  2. Communication within the team
    How to communicate with a team throughout the process and actually use different perspectives of teammates to evaluate design deliverables?
  3. Demonstrating the process to get buy-in
    How to present the design process to stakeholders and developers to actually get buy-in, both formally and psychologically?
One of the UX designers we interviewed said the following:
Do you know what the most painful thing is in my job? Bureaucracy. Having to go to meetings. I would rather design than fight over the picky details. We should make at least part of the workflow online instead of in person. Have the approval process online, instead of in a meeting.
Another said this:
It’s really hard to show the process to clients and spread some understanding of the importance of design.
We have probably all tried to solve these problems countless times, but we still lack efficient and fast methods. This results in less time for creative work and research.
My hypothesis is this. We as UX designers need to resolve the three painful problems identified above to have more time for creative work and research. We need to demonstrate our work beyond wireframes, spread understanding of UX design and, in fact, sell ourselves both internally (within the product team) and externally (outside the product team, in front of clients and stakeholders). This is the recipe to increase our effectiveness.
Our real-life UX processes need adjustment, and since we share the pattern of the process and the pain points, we can solve them together. This is most likely the most positive outcome of this research.

Outcome Of The Research

The research shows that UX designers are constantly modifying the classic and complex UCD approach. Less emphasis on iterative usability studies and a narrower range of design activities (compared to classic UCD) are the main traits of the current real-life design process that have emerged from our research.
A process tailored to the capabilities of our companies and our clients proved to be generally effective, but it still causes some recurring troubles that should be eliminated.
This is, generally speaking, the state of our field. Don’t get me wrong: I don’t mean to criticize classic UCD — it still serves as an inspiration for our work. After all, I’m happy that I worked in that office with “shame” hanging above my head (yes, I mean the UCD poster), which constantly reminds me of the need for adjustment in the process. I’ve learned that what matters, though, is an actionable process — possible to use, adapted to the company’s culture and financially effective.
After talking with dozens of UX designers, I’ve started to wonder, however, whether we should actually create a poster that shows this version of the process. It could help a lot of aspiring UX designers take their first steps in the field and could be effective as an educational tool for our internal and external clients.
After all, our work is not nearly as expensive and time-consuming as the old poster says.
P.S. A study of the process and the problems spotted in it inspired us to create “The UX Design System” — it’s a work in progress, and I’d love to hear your feedback.

Source : smashingmagazine.com

20 thg 5, 2011

Design And Develop A Complete Website (A Tuts+ Mini Series, Pt 2

Final Product What You'll Be Creating

This entry is part 1 of 2 in the Design & Develop A Complete Website Session - Show All
Next »

Today, in part 2 of this massive tutorial, we’re continuing this session with the second day of design. We’vealready designed the homepage – so now we’ll be designing the four support pages that form the rest of the complete site design (Portfolio, Blog List, Blog Post, and the Contact Form Page). Let’s dive in shall we?


About the Mini Series

You’ll find lots of web design and development tutorials out the net… but very few tuts that take you from start to finish. Lots of tutorials are only for design, and others are only for coding. Today we’re starting a new series where we’ll design and develop a complete website from scratch; We’ll take you from the initial wireframe to the full site design (including 5 pages). Then we’ll be coding the design (in Nettuts of course) and finally converting this complete XHTML theme to a working WordPress theme!

Check out the entire process as it happens at our Session Page!


Project Objectives!

Let’s briefly review our project objectives that we set up on Day One:

Our aim is to design and develop a simple site design with a modern layout that’s conducive to CMS systems like WordPress. We won’t be applying any wild and crazy style effects in our design (the point here is to keep it simple), but we are going to approach the entire process, from start to finish, as a study in layout and a proper use of margins and padding.

We’ll be using the 960 grid system from start to finish – and this won’t be any different for our Day Two design session.

A Brief Course Outline. We might break this up differently once we hit the coding phase, but this should give you a good idea of where we’re heading with this series:


Let’s Continue! Day Two of the Design Phase

Let’s start by taking a peek at what we’ll be creating:

Today’s design phase is also divided in four parts and we’ll design all the other pages of Iconify in this session. As we designed the homepage already, our primary task has been completed – so we just need to fill in the blanks for the rest of the sitemap.

This is a crucial step that’s often overlooked in lots of design projects, but designing some specifications for these support pages is something you won’t want to skip. Remember, a website design isn’t complete after just setting up the homepage – at the very least you’ll need a couple extra templates designed for the additional pages that make up a site.

As our layout is pretty straight forward, we’ll just be swapping out the primary content area for each page. The universal site elements (Header, Navigation, Footer) will all stay the same from one page to the next. This is important to keep a consistent foundation for the site so users always know where they’re at.


Part E: Design the Portfolio Page

The Portfolio Page is the first support page that we’ll design. Remember that we’re using the 960 Grid System for the entire site design, so we’ll be using the same basic layout and column structure as we setup on the homepage design.

Step E1: Basic Setup For Portfolio Page

Create a duplicate of the index.psd file and rename it to portfolio.psd. Open it up with Photoshop. Delete everything from within content layer group except the bg layer.

Now create the “breadcrumbs” and “notes” layers for the portfolio page. For the “notes” background shape, use the same layer styles as we did it for recent project‘s bar rectangle. Use image E – 1a as a guideline.

E - 1a

Next, we are going to use a simple technique to work in a handful of different column variations inside this one page for our portfolio items.

Step E2: Creating Portfolio Items

Use the image creation technique from Day One (Step C3) to create two column portfolio items as shown in image E – 2a. If you recall, we’re simply drawing in rectangles that fit the column guides, applying a layer style, and then cropping in images to create a subtle border effect.

Now repeat this same technique for three column and four column portfolio items. Use image E – 2b and E – 2c as a guideline. Note that we’re flipping between the different 12_column and 16_column guide layers to get this perfect. Finally, organize your layers as shown in image E – 2d.

E - 2a
E - 2b
E - 2c
E - 2d

Part F: Design The Blog List Page

The Blog List page is intended to be the location where “excerpts” of each blog post are shown. These “excerpts” are also called “loop” elements – and usually are comprised of a title, thumbnail image, a short text preview and some meta information (like the date, author, tags, etc.).


Step F1: Creating the Blop “Loop” Elements

Just like we did with the last page, we’ll start by creating a duplicate of portfolio.psd page and renaming it to blogs.psd. Inside the blogs.psd file, delete everything inside the content folder except bg,breadcrumbs, and pages layers. Now we have a blank blogs file, we can begin to populate it with some content.

For the first time we’re going to use a standard two column blog layout – one for content and another one for the sidebar. Use image F – 1a as guideline to design the blog and sidebar content – notice that we’ve placed the vertical separation line between two of the column layers so it’s perfectly spaced.

The actual designing here is pretty simple so we’re not going to go into too much detail – just follow the set rules for the type layers (the red text on the examples), and use all of the styles that we’ve already setup in our other pages. Take special note about the spacing between elements (also marked in red text) as that’s going to tell you exactly where to place everything.

When you’re done, organize your layers as shown in image F – 1b.

F - 1b

Part G: Design the Blog Single Post Template

Now that we have our Blog List page setup, we need a template for each full blog post. This is a pretty hefty page in terms of content because we also need to plan ahead for a commenting system and lots of other little details. Pay special attention to the example images in this section!

Step G1: Creating Blog Posts Page

Once again, start by resaving the blogs.psd file with a name of blog-post.psd. Inside blog-post.psd, delete all the blog list content so we can start fresh. In the content section, grab your text tool and start to populate with some text and image as shown in image G – 1a.

Step G2: Design The Popular Blog Post Box

Draw a rectangle and apply the same layer styles of recent project‘s bar from the index.psd file. Populate it with content and position as shown in image G – 2a. For the horizontal ruler styles please check image G – 2b.

G - 2a
G - 2b

Step G3: Design The Comments Section

Draw a rectangle with 630px width and any height for now. Name it bg and place it inside a layer group named comments. Copy the layer styles from popular post box’s bg, then paste to this layer. Use image G – 3a as a guideline.

G - 3a

For the comment boxes’ arrows, draw a triangle inside the comment box (enable Add to shape area while drawing) measuring 10X10px rotate the arrow and position them as shown in image G – 3b and apply the layer styles as shown in image G – 3b.

G - 3b

We are leaving a 40px left margin for the second comment to indicate that this is a reply. By using this same technique, we can go even more deep – showing a third, fourth, or even fifth reply depth by just indenting another 40px for each level. We’ll do the same in our XHTML version, so remember these basic style rules.

Step G4: Design The Comment Form

Draw another rectangle with same style as of comments‘s bg layer and name this layer bg. Place it inside a layer group named comment form. Use image G – 4a as a guideline.

G - 4a
G - 4b
G - 4c

Part H: Design Contact Page

Once more time, copy blogs.psd and paste it with a name of contact.psd. Open it in Photoshop. Delete everything except breadcrumbs and sidebar from content layer group. Copy comment form and paste it as shown in image H – 1a. Once again, type in the content as shown in the image.

You’ll notice that a lot of this is repetition by now – we’re just copy/pasting in content, fitting it to the guides that we want to use, and using the same typography and layer styles from the previous pages.

Things should be moving pretty quickly by the time you’ve finished this page. You can repeat this same basic process for as many pages as you need to mockup – just stick to the column guides and use the same basic typographic and layer-style rules for each new design and should be able to knock any more of these that you might need very quickly.


End of Day 2

This concludes the second part of our massive tutorial! By now, we’ve successfully designed our website. In the next session (coming soon over at Nettuts), we’re going to begin the coding process, so check back here (and at Nettuts) as we post the new portions of this tutorial!