This weeks lecture began with a quick overview of the marking criteria for our portfolio websites which I found particularly helpful. Points to consider were creating a brand identity through voice and tone, considered content and visual cohesiveness.

S.W.O.T Analysis

We kicked off with a class exercise taking 30 minutes to complete a S.W.O.T. Analysis on ourselves as designers. I have included my outcome below:

This was a particularly helpful exercise as it allowed me to consider area’s that I am strong in and which I can now actively strive to include as key components of my portfolio web site as it’s always a good idea to ‘play to your strengths’. It was also helpful to look clearly at my weakness, particularly those I feel are important for me to developed and overcome in order to progress within this module and course but also more broadly my career as a designer. I wanted the looking at opportunities to specifically focus on what I currently have available to me that will help me overcome my list of weakness. On reflection, it may also be helpful to look at opportunities that will help me to grow and developed my strength though I feel this will be a natural progression as I focus on a specific area of interest as a designer.

As I am a big fan of goal setting I now feel that completing a S.W.O.T. analysis on a quarterly basis throughout the year may be a great way to really specify what I am achieving and what’s getting in the way of me meeting my goals. I am very keen to repeat this exercise and will perhaps review how helpful it is in helping to set and achieve realistic goals in future.

 

The Goal

We then completed a goal exercise in which we spent 10 minutes listing the purpose of creating a portfolio website and problems we were trying to overcome. We discussed these and the top suggestions were narrowed down and placed with a hierarchy of Primary, Secondary and Tertiary Goals

 

This was a really helpful exercise as I believe it can be easy to get caught up in terciary goals and actually miss or compromise what should be our primary goals.  Additionally, I have included my goals below which take a slightly broader look at the goals I want to achieve in created my portfolio website with a greater emphasis on the development of skills (not solely outcome):

• Networking
• Become more contactable
• online profile to promote my work
• Demonstrating my skill level in my ability to produce a website
• Showcasing my work
• Learn better responsive design
• Improve CSS Skills
• Experiment with JavaScript
• Gain confidence creating grid structures
• Create my own multi-page websites
• Generate an online presence
• To display my process
• Demonstrate my personality through a clear tone of voice
• Generate a level of professionalism
• Showcase my strength as a designer
• Create something unique and memorable

This list has a lot more overlap than the list produced in our class exercise however I still feel that it has reinforced for me what some of my goals are in creating my portfolio website and how to prioritise them, see Bull’s Eye Diagram below:

 

 

Adham Dannaway’s Workflow to Design and Developed a Portfolio Website

There is so much in this article I feel like it would be great to work through it step by step as I create my portfolio website! For now, I want to do a quick overview of what jumped out to me as really helpful and what I will realistically be able to include in my portfolio website right now.

My main areas of interest are project planning, wireframes and responsive design and flexible grids.

Project Planning

The first suggested step here was defining your brief. I feel I have tackled this pretty well through our class exercises today however I have constructed the outcomes into a brief paragraph stated below.

My goal is to create an online presence that will promote my work, strengths and make me more contactable. I would also like to display my process and demonstrate my personality through a clear tone of voice leading to a unique and memorable outcome. I would like my outcome to incorporate a grid structure and responsive design to present my attention to detail in these areas.

I feel that perhaps I have gone into more detail than required by setting out clear design and structural intent in the above brief. However, I feel this is something that I need to place an emphasis on as I do not want to overlook it.

Initial research and idea generation

As I have already completed an elements collage I have a good idea of the general aesthetic I would like my site to have. My primary concern is what to do with the hero section. I love typography and feel that this could be a great way to go but that requires me to have really strong content. I also like portfolio sites that include an image of the designer as it helps to get a sense of who you’re working with however I’m not sure this fits with the lab theme. If I were to include an illustration I would probably mix it with typography left image illustration right however as I want to be versatile how do I present everything I do in 1 image. I have unpacked this further in the below brainstorm/ mindmap shown below.

I have completed research into specific web examples following the creation of the above mindmap in order to help get a better grip of what I think works and what I think doesn’t.

Create a timeline

Following research, Dannaway suggests creating a timeline of soft deadlines to help keep you motivated. I have created a timeline using a gnatt char as suggested in this weeks lecture. I think this to be a great visual. I have organised my time with keeping myself very much in the design stage for the next two weeks and then moving to development in the last two weeks. I find this a little daunting as I am not confident at coding websites and therefore am fighting the urge to jump right into web development. However, I know that time spend properly planing the design in the front-end will save so much time rather than jumping into coding and having to change it in tandem with developing new ideas.

Create content

I think content first is always a good idea as I believe design should be all about enhancing and guiding the viewer through the content rather than trying to fit content into a pre-created UI. However, I don’t want to restrict myself too much in terms of structure. At the moment I Know I want to include 4 projects I have completed including my The Galaxy app and this branding project I also want to include an about me section and already have a bio created. Finally, I want to include a contact section. I feel this is enough content to work with for now and will use throughout the wireframing stages of design. If more content is needed following decisions made in wireframing I will produce it at that stage.

Wireframing

Dannaway suggests wireframing by listing all of the elements to be included in a page and then organising them on the basis of priority. From there Dannaway creates a digital wireframe from a desktop-first approach. It is interesting to note when writing CSS Dannaway uses a mobile-first approach. As I have heard this to be a better approach, (creating the website mobile-first) media queries is not an area I am confident with so I will probably create my desktop view first and follow this with my mobile responsive design.

Dannaway’s approach to wireframing is quick and to the point and as he appears to have a very clear idea of what he wants to create this approach appears to work well. However, I do not feel I have the same clarity on how I want to layout my website therefore I think I will look at further approaches to wireframing.

Responsive Design and Flexible Grids

Dannaway describes his preference for grig structures as they provide a more organised design. He used a 12-column flexible grid which sounds a bit daunting to me. Dannaway also promotes using a flexible grid as it allows the website to scale to fit any device rather than having to create separate 3 fixed grids to fit mobile, tablet and desktop. This sound good in theory however I’m not sure how to use flexible grid in this way and will probably have to go with whatever I can make work. Dannaway also provides a link to an article by Joshua Mauldin who sums up how to use a grid, this is an article I would like to go through in some detail as I am not confident with using grid structures at this stage.

 

How to Get Value from Wireframes

Dustin Senos lays out how to get the value from wireframing in a short Medium article. I think Dustin sets out some really great points. He begins by talking about the process of idea generation and the purpose of wireframing. What I took away from this was that I really shouldn’t use wireframes to set out 1 or 2 detailed ideas for a website. Rather I should produce lots of small ideas with lots of variation and then pick at least 4 that I feel work best and continue to develop my ideas from there. I think this is a fantastic approach and way to use wireframes as it actually gives the wireframe a purpose beyond a basic preset website structure to show clients that generate very little discussion.

I am very excited to kick off my wireframing in this way and intent to incorporate the S.C.A.M.P.E.R. diagram presented in this weeks lecture into my approach as well.

What have I learnt?

• If trying the identify the strength and weakness of a brand or business a S.W.O.T analysis can be a great way to do this a S.W.O.T. analysis can also be useful for identifying strengths and areas to promote on a website.
• Determining primary, secondary and tertiary goals can be a great way to priorities the requirements of a website.
• Creating a clear brief for yourself if one is not provided can b a great way to kick of your research.
• Wireframes can be great for idea generation and for finding multiple solutions to a problem.

How can I apply this to my work in future?

• I plan to complete S.W.O.T. analysis’ on a semi-regular basis throughout the year to help me to keep track of what I’m achieving and what’s getting in the way of me meeting my goals.
• I found brainstorming ideas to be a nice approach, to begin with as it allows you to get everything out on paper before becoming too influenced but the work of others found in more thorough research and this approach I intend to repeat in future.
• Using a Gantt chart is a great way to plan and track work as everything is presented in a clear visual. This is definitely something I want to return and create at the beginning and throughout new projects to track progress and motivate me as I go.
• I really love the approach laid out by Dustin Senos to wireframing and intend to incorporate this into my web design process in all future projects.