Design Concepts Blog

Standard

http://www.creativebloq.com/web-design/10-design-concepts-web-developers-need-know-11135255

Going over 10 design concepts that every web developer needs to know

Design isn’t just visual

Main point: The design isn’t just about the visual or what we see, it is about the personality.

Why it’s important: I find this to be very true that most people like myself have been confused about. It effects the user experience which like this blog points out is far from just being visual.

Be User-Centric

Main point: The site user is the most important when it comes to designing your website.

Why it’s important: depending on who your audience is whether that be a future employer, customer, etc. you should design your website accordingly.

Design is in detail

Main point: Paying attention to detail

Why it’s important: detail can help benefit the users experience. However, It’s best to focus on the big picture like the structure of the page for instance and then go in and fine tune the details later. I found this to be true because too many times we get wrapped up in the details and forget to lay a strong structure. That is like adding furniture to a house before completion.

When designing, sketch often

Main point: Sketch before developing

Why it’s important: it helps you think and plan out what your strategy is going to be. Helps you explore different ideas and options. The great thing about this piece of advice is that it practically pertains to anything you are going to do in design.

Use White Space

Main point: White space is your friend

Why it’s important: this blog sums white space’s effectiveness pretty well. White space gives the users breaks so they can process the information. A page that has limited white space is therefore too busy, and can be a lot for the user to take in.

Grids aren’t just CSS frameworks

Main point: Grids can do more

Why it’s important: grids help establish a visual system for your users. It is just simply a tool, and like the blog points out, if used effectively can help the overall unity of the design.

When everything has emphasis, nothing does

Main point: The most important things on the page should have the most emphasis

Why it’s important: if everything has emphasis nothing will stand out and nothing will seem important. Emphasizing one thing gives your user a direction.

Keep an inspiration folder

Main point: keeping a inspirational gallery of images

Why it’s important: helps give you references, and also helps keep you evaluating how others design.

Design is all about problem solving 

Main point: approach design as a set of problems

Why it’s important: everything should have a purpose and you should set out thinking of design as if you have a problem and are trying to look for the best solution.

Know how to talk about and critique design 

Main point: give feedback constructively by calling attention to the problems with a design

Why it’s important: instead of being vague, address problems with the design and be specific about them. State why a problem is a problem rather than just stating the problem. Too often I point out things about my own design and don’t see why it is an issue I just see it as an issue. Knowing why something is a problem allows us to know what we need to address, and why we are addressing it in the first place.

 

 

 

 

 

 

 

 

Advertisements

Design Principles Blog

Standard

http://design.tutsplus.com/tutorials/9-essential-principles-for-good-web-design–psd-56

This blog goes over the 9 principles for good web design and I am going to point out what I find useful from each.

I liked the fact that the blog opens up with an intro talking about the challenges we are faced with when it comes to web design. Not only do we have to be concerned with the design or layout of our website when we are creating it, we also have to pay attention to the usability and whether or not the website delivers the information we need it to effectively.

The 9 principles that are listed in the blog are as follows

  • Precedence
  • Spacing
  • Navigation
  • Design to Build
  • Typography
  • Usability
  • Alignment
  • Clarity
  • Consistency

Precendence

The first design principle listed is precedence and mainly the blog talks about how a good web design effectively directs the viewers eye throughout the website.  Your website should have a varying amount of visual weight as the blog says, and I agree with this. Good design should have a hierarchy of some sort. For instance, important things, perhaps the brand, and the statement of the individual/company should be the first thing that stands out on the page. You could achieve this by making it bigger, placing it in a noticeable place where it stands out first thing (e.g. in the upper left ), and perhaps navigation should be a secondary element. The brand or identity is what our eye should be focused on first followed by the less important elements.

How to build precedence as this blog goes on further to say is by utilizing position, color, contrast, size and design elements. Where something is on the page can come to the individuals/companies benefit. Like stated previously, where something is on the page is important, and can help the user focus on important areas first all by where you place them. Also color is important and can help you want to catch the users attention and get them to look at what you want them to focus on. Perhaps your logo is the first important thing, so you want to create it using vivid and bright striking colors, or you want them to focus on the individuals/company statement so you put it first in larger type so it stands out first thing.  Adding contrast can really come to help you design your page effectively and help you add precedence to the page by making certain things stand (logo, statement, the individual,work) out as opposed to less important things (navigation,background). Size and Design elements can come to benefit you since of course we can make important things larger, and the secondary elements smaller in size since we by nature tend to focus on larger things followed smaller things in that order. Design elements such as arrows and icons can help point out what you want the user to notice much like a road sign or map.

Spacing

Space should be viewed as a good thing. I agree with this blog due to the fact that I believe less is more. Just because there happens to be space there, doesn’t mean we should fill it up entirely. Websites that do this come off as way too busy, where the user doesn’t know quite where to look. The article goes on to talk about how to use spacing effectively. For instance line spacing or leading as we like to call it, needs to be used effectively. Too much and the users eye gets lost. Too little and the user may not be able to read all the text.

Padding is another issue we face when web designing and we should pay close attention to. There should be space between the elements on the page. So text shouldn’t be touching images and vice versa. This makes the text more readable, and the image less crowded.

And of course white space is mentioned which simply is referred to as the empty space on the page. It is important since balances the page out and gives the page proportion without making the page appear to be too heavy and weighed down.

Nav

The navigation or nav for short is important. It leads the user to different parts of the website. If the user goes to your website and doesn’t know where to go, well then there’s a problem.

I agree with this part of the blog since I myself have visited many websites and it took me more than enough time trying to find out where to click to get to the persons work page, or contact page for example. This should not be the case rather it should be obvious and easy to find like at the top for instance. So make it appear as a button, change color when hovering over it, and naming it accordingly like home for home page, is all important because who really wants to visit a webpage that they can’t navigate?

When the user does happen to click on links, they should know where they are and always know how to get back to where they were. Linking back to the home page for instance, so they don’t get lost or frustrated with your site.

Design to Build

I like this section of the blog because it pertains to me quite a bit. There have been times my designs have surpassed my knowledge and time constraints. I would in return get overwhelmed. Knowing what to avoid, and knowing what fonts for instance can’t be used is very important. Trying to design according to what is possible is important. Taking short cuts can make your life easier and building your site in a simple condensed way, can save you time. So get rid of the unnecessary and build smart.

Typography

Of course taking four type courses has made me realize that there is a lot to consider when including typography in anything. When it comes to the web like the blog points out, you must consider font choices(retro, modern what feel are you going for should suggest what type you use), size (Variations headings are larger and there should be hierarchy), color (Higher contrast so it is more readable),line length (Not so long shorter and easier for the user to read line after line), spacing (lines of text and next to other elements should help user read text more clearly), and paragraphing (left-aligned versus justified text).

Usability

  • Making the web design usable.
  • Do what people expect as to not throw them off and/or confuse them.
  • Trying out design before using it.
  • Lay it all out. I find this helpful because it is much easier to tackle building a design with a plan versus going into it with no plan or idea what you want the website to consist of and why.

Alignment

  • Line em’ up (I found this out in Web 1 when things just look better when they have a structure to them and look cleaner when they are lined up)
  • Using grids help you with aligning things properly. I just recently found out that there were grids you could use for websites much like if you were using a grid in any application of the sorts.

Clarity

  • Thinking in pixels
  • Using anti-aliasing and cleaning up borders in your design
  • High contrast so you can notice your borders

And the last thing on this list from the blog is…

Consistency

  • Just making things match up. Making your design cohesive and all the elements from the font, coloring, photos..etc. should look like they belong together.
  • Consistency leads to quality of course

I really enjoyed reading this blog. I obviously found all if not most of the information to hold true to web design. Some of it holds true for design itself as well. It is best to learn the basic principles of a good design before applying it, in order to come up with something of better quality, that is effective to the user.

 

 

 

Web 2: 10 Inspirational Portfolio Sites/ 5 Designer Blogs

Standard

10 Inspirational Portfolio Sites 

Here are ten portfolio sites that I find inspirational and some reasons why I deem them as working well.

Un

http://teacakedesign.com/

  • Limited amount of links making it less overwhelming and easy to navigate.
  • Makes good use of navigation menus which helps keep the webpage content organized.
  • Use of one solid color for the background as to not distract from the rest of the content on site, yet bright and attention grabbing.
  • Use of clickable icons for twitter and email
  • A collection of various styles and collections of work displayed in slideshow format, making it easy to preview samples of the company’s range of works.
  • Button in upper right-hand corner allows you to automatically return to top of page with one click.

Deux

https://www.mobydigg.de/#!/

  • Unique way of displaying links by using icons which make page appear less cluttered by having fewer links displayed at once.
  • Cool use of endless scrolling effect where the first name of the company “Moby” appears as you scroll down the page.
  • Cool use of hover modes. When you hover over the images the image is overlaid in blue which indicates that you can click them.
  • As you continue to scroll all of the link boxes start to appear one by one following a grid-like structure and come together as a whole.

Trois

http://www.distillerystudio.net/#/projects

  • Simple classic use of black background helps all the images stand out on their own.
  • Projects page includes a collection of black and white images. When hovering over these images they appear in color, thus drawing your attention to that one specific area at a time rather than everything on the page competing for your attention simultaneously.
  • Cool use of photo grids
  • Easy-to-use side navigation bar.
  • Nice use of transparent text boxes that give info without detracting from the beautiful photography.

Quatre

http://www.conduitstudio.com/

  • Style of the page reflects their work which is mainly that of an international style.
  • Easy top navigation bar simple and highlights in yellow when hovering over each individual link
  • Has a company statement which is important to show what the company is about and what it stands for.
  • Includes a company logo on homepage
  • Nice type face pairings elegant such as a neo-classical typeface and sans serif typeface.
  • White seamless background makes this website simple and clean allowing everything else stand out.

Cinq

http://www.bluferine.com/

  • Designers statement on first page lets you know about the designer
  • Simple black and white color scheme gives slight contrast.
  • Neatly organized on page and good use of margins. Just because you have the whole page doesn’t mean you have to use it. Good use of negative space.
  • Logo appears on homepage
  • Type is clean and I like how black is used for the brand, and gray is used for the type of project. Shows some sort of hierarchy.
  • I like how everything is displayed on one single page rather than having to click on multiple links to go to separate pages just to view information. The information is just enough not too wordy, but straight to the point in his about section so therefore I think it was a good decision to utilize just the one page versus a few or several.

Six

http://fixate.it/

  • Simple memorable domain name
  • Cohesive in that it is simple from the simple line illustrations, mainly void of color.
  • Paragraph headers are big and bold and go along with the illustrations.
  • All of the pages flow together and therefore feel connected rather than disjointed.
  • Again nice use of space doesn’t feel too congested.
  • Scroll overs that give project title descriptions
  • Has ornamental design without being too over-the-top and acts as a nice frame for the content to sit inside of on the page

Sept

http://axel-aubert.fr/#aaven 

  • Shows different designs for the same product which showcases the designers process
  • Very clean imagery used and even though digitally rendered the products such as the snowboard for instance, shows the clients what the product will look like once the design is applied.
  • Includes a little extra details such as movements and tilts and animated birds which make it fun and unique
  • Simple straightforward logo

Huit

http://www.malet.co/portfoli/

  • Logo is nice and clean.
  • Layout is well aligned and good use of margin space.
  • Includes a good amount of illustrative work.
  • Not too complicated and lets the work stand out.
  • Slight splashes of color on homepage and in small elements throughout the page to add interest without going overboard.
  • Typefaces work well together.
  • easy to navigate page links are visible and there aren’t really any tricks everything is easy to find.

Neuf

http://www.simonecapano.com/

  • Responsive website works on multiple devices with varying screen sizes
  • Limited yet tasteful color palette
  • Slight texture to the background
  • Limited amount of links for simple navigation
  • Straight-forward and to the point

Dix

http://www.subsens.com/

  • Strips for images rather than traditional thumbnail images. Intrigues you to click on them to view more due to the way the images are cropped.
  • Gray to color hover effect when you move your cursor over the uls.
  • Key to divide work into different sections -(e.g. digital, graphic, photography and playground.)
  • You can use the key at the upper right to jump to different sections of the page if you don’t feel like scrolling
  • Has a design statement in the about section that tells you about the designer.

Now to the blogs yo 

http://design-milk.com/10-most-innovative-designs-from-ces-2015/

  • Talks about 10 different innovative designs from the Consumer Electric Show 2015
  • First mentioned was the Kinematic Dress by Nervous System. The dress is unique because it was created using a 3d printer and it moves and flows like chainmail armor, as if it were free from gravity.  The goal of this project was to construct “Large scale complex things, with no assembly required.” Composed of triangular panels with over 3,000 nylon hinges this dress can fold in on itself and unfold.
  • Other mentioned designs at the show included the Samsung Flex Duo Dual Door Oven, which can cook two different meals that require different temperatures at the same time. It includes a sliding door that gives you the option of cooking two meals at once or cooking one meal in one side, thus saving 30% of energy otherwise used in a traditional oven.
  • The Petcube a cube that uses wireless internet that can connect to your smartphone so you can interact with your pet when you are away. This technology will also be used in pet shelters so people can interact and potentially adopt pets.
  • A couple headphones made the list
  • A projector for the kitchen connected to the internet.
  • A virtual dressing room from Toshiba, so we can try on clothes before buying them online. It needs some work, but in the near future everyone will be able to shop from the comfort of their homes, and know what the clothes will actually look like before buying them.

http://www.webdesignerdepot.com/2015/01/css-you-can-get-excited-about-in-2015/

  • New CSS for 2015 selector level 4. New ways to use already existing selectors such as :not which says you do not want the CSS applied to a specific element.
  • Matches class selector means that we will be able to apply rules to groups of selectors all at the same time.
  • New blending modes are going to be available which will allow us to apply blend modes to backgrounds. So now you can do such things as blend text with background images,
  • Exclusions unlike a simple float will allow us to wrap text all the way around an image versus just to the side and beneath it.
  • Shapes will allow us to wrap text around non-rectangular objects.
  • CSS grid layout where you can create grids with css and position our designs on the grid.

http://designmodo.com/web-design-trends-2015/

  • Goes over new trends that we are going to see more of this year
  • According to this blog, we are going to see such things as people using one color, more stock photography, even more video backgrounds (My favorite), more creative website navigation, cards or tiles, even more fixed blocks, subtle parallax, more endless scroll pages, illustrations and flat design along with more.
  • Some things like flat design were already present in 2014 they will just be more widely used in 2015 as the blog points out.
  • This way we know what is in style and for those of us that like to stick with trends we can follow, or if you hate following trends you can take your own direction and steer clear of all of these things.

http://www.vandelaydesign.com/ultimate-guide-color-theory-designers/

  • A good blog on color theory it goes over the basics like complementary, triadic, analogous and tetradic, split-complementary color schemes and how they work as a review.
  • Showcases the importance of color theory when designing.
  • Gives you sites that you can use like paletton to choose pre-picked color palettes to take the guesswork out of picking colors yourself so you know they are already working.
  • Also shows you examples of websites that are using colors in an effective way.
  • Talks about how to get contrast which is crucial to good design and also goes into why you should avoid pure black.  I find avoiding pure black as one of the best pieces of advice a designer should know, due to the fact that pure black is rarely seen in nature, and if you avoid it, your designs will appear as more believable and realistic.

http://www.vandelaydesign.com/successful-freelancers/

  • This blog discusses several successful freelance designers and how they got to be in their position since we all know that it is hard to have a career let alone work freely.
  • It’s nice to know that they are not much different than their less experienced counterparts such as myself, however what sets them apart is their experience, their drive and for some organization and networking skills.
  • Some would say they are successful because they work really hard, stay organized and efficient. I liked how Rina Miele kept it real by admitting that she feels stressed and worried about pleasing her clients like anyone else, but she doesn’t let it hold her back. She admits that she puts forward all of her effort and when she is getting stumped on a project, she works on something else and comes back to it.
  • Some credit their success due to their luck and their connections with others like Matt Willey.
  • I found it interesting that even though we would consider these free-lance designers as successful many of them don’t consider themselves as being successful.
  • Others said they were successful since they got their work done, and afterwards they tried to push themselves farther out of their comfort zones in order to grow and become better designers because of it.
  • Another designer Jan Cavan loves to learn and admits that she never becomes too comfortable with her designs and is always trying to learn new ways to design and admits that blogging has helped her become more successful because it has gained her more exposure in the design world.
  • I found this blog really useful that it really inspires and is great advice to design students and up and coming designers alike.
  • Out of them all I mostly agreed with Andy Sowards advice that success cannot be defined due to the fact that success means something different to different people. He makes the point that there are people that think success is due to making money and being recognized but he believes that being successful is not a “destination” that one can arrive at, but rather a constant “journey” and you should never stop because we have to keep changing along with the world we live in to continue being so-called “successful.”
  • For the most part the common census was working hard, gaining knowledge and never stopping even if you think you are what most would consider as being successful.

 

 

 

 

 

 

 

 

 

 

W1: Portfolio Site

Standard

When looking for a portfolio site to blog about, I was looking for two things in particular no 1. seeing that their portfolio is organized and set up in a way that is fun yet easy to navigate, and no 2. seeing that their portfolio includes a wide range of work showing that they have a wide rather than narrow range of skills. Upon my search I found many different candidates yet one stood out to me and that was the portfolio site from Mike Hojgaard who is based in Copenhagen, København, Denmark. His site stood out to me cause it included a simple rather than distracting layout. His work included everything from album covers and cd sleeves, to posters, cd labels, logos, business cards, package design, t-shirt design, web design, book design and more. He has a very impressive range of works and has been working over 14 yrs with creative design and art direction in the advertising/ design industry. Everything from his resume, works, contact information was really easy to find and I feel like when showing and/or collaborating with other designers/companies it is essential for them to see what you have to offer without making them jump through hoops. Here is the link to his website check it out
http://www.krop.com/harmoni/#/4878/