We're Happier Together! NYC Devshop has joined the HappyFunCorp family! Learn more!

Devshop

Devshop Blog

11 results returned for "Design Process"

Tuesday, Jan 24th, 2017

Lizzie Healy

Lizzie
It's Hip to Write Script

There are countless design programs available for designers (and non-designers) to learn, each with unique tricks and tips. In my early stages of learning Adobe Photoshop, I spent roughly five hours watching and attempting to create coffee beans. I then Googled "PNG Coffee Beans" and clicked copy and paste. It got the job done.

Creatives express their design chops in many ways, and while they may excel at drawing or calligraphy, they may struggle with adapting to the scores of options available with design programs. You could take the time to watch one of the many video tutorials online walking you through each step, or you could learn a few easy hacks to get you through those beginning stages. Because sometimes you just need to put pen to paper, we're walking you through how to convert your hand drawn sketches, letters, and images into an SVG.

What the heck is an SVG you ask? An SVG stands for Scalable Vector Graphics. Gibberish, I know. Google provides equally gibberish answers. In my own plain language definition, it is an image that does not have a background, enabling you to place it as a layer on top of other images without the lovely white square background. This is helpful for things like logos and icons because they can be placed on a lot of different images without interrupting the design.

So here it is:

Step 1: Sketch It

Draw your design by hand, with pen and paper. It helps to use fat markers like Sharpies to create a starker contrast. Try to use white paper and a black pen because converting an image that uses black vs. white will be much more successful. It also helps to tend towards thicker lines instead of thinner, as the converter will pick these up more easily.

Step 2: Snap It

Take a picture of your sketched image. Avoid shadows on the paper, again think CONTRAST.

Step 3: Upload It

Upload the image to an SVG converter. There are a lot of sites that do this, but we used http://image.online-convert.com/convert-to-svg (because it came up first when we Googled it).

Step 4: Convert It

If you are using a converter that gives you the option to choose color, select grey or monochrome. Click "Convert File".

Step 5: Open It

Save the file and open it in a design program like Adobe Photoshop. It's actually that simple.

Wednesday, Nov 16th, 2016

Lizzie Healy

Lizzie
5 Design Disasters & How To Avoid Them

Designers do not get enough credit for their work. It takes research, restraint, and ultimately a good eye. Any average person may look at a website and think, "Hey, I can do that!" Setting to work building your website from a source bursting with templates and options, you end up falling prey to the many pitfalls of poor web design. You don't need to use every plugin option. Trendy isn't always the best answer. And simple elements may get overlooked without planning. Below, we take a closer look at the problems that many DIY web designers encounter and how you can fix them.

Too Many Bells & Whistles
The Problem: You want your users to know what your site offers, what they can find there, create value, direct where to go next, build SEO into your content, reinforce your Adwords, and tell a story about your brand. You want to have it all! Well, you can't. Not on your homepage at least.
The Solution: Less really is more when it comes to your homepage. Slow your roll, and just include the intuitive elements that will lead visitors to the next, more informative sections. Don't get me wrong, its important to do all of these things on your website. But for the homepage, you only have a few lines of text and a simple graphic to do so. Throw the kitchen sink at the visitor and they won't know where to look, rendering all that "useful information" useless.

Not Enough Bells & Whistles
The Problem: In your scramble to spin up a website, you forgot to include some key elements to make your users experience better. No search bar, no call to actions, and an unorganized content layout create a poor experience for visitors.
The Solution: A search bar should be easily found on your web pages. It saves visitors time and simplifies navigation. Keep your pages simple enough to quickly scan, with a clear hierarchy to guide your eyes through the page. Using call to action buttons to direct visitors to the next sections are invaluable. Planning this before starting to design is a key to success.

Endless Scrolling
The Problem: You designed a stunning website...on desktop. You completely forgot that that paragraph of text will extend to the length of two IPhones when viewed on mobile. Who is going to read all that?
The Solution: To create an effective responsive design, or web design that has been optimized for mobile, ensure that the horizontal grids created on your web page can collapse into vertical lists when a user is operating on a mobile device. Grouping or reorganizing content can help prevent the endless scroll that results from poor designs.

Hiding Contact Info
The Problem: Failing to put a phone number, address, email, or contact information in several, easy to find locations. You put all that time and energy into trying to direct users to your website, and then once they got there, you never included how they can actually reach your business!
The Solution: Your business should be everybody's business. Providing multiple ways that users can contact you caters to their specific preferences. Make sure that this information is on every page.

Being Antisocial
The Problem: Forgetting to link your social network sites. This is a HUGE bugaboo for me. I once received an email blast from a company with no Instagram link at the bottom. Curious as to why such an established company didn't have an Instagram page, I went searching for it. It was glorious. And I almost missed out on seeing it because of an oversight! (Yes, I did email them back and tell them it was missing. Marketing looking out for marketing).
The Solution: Many people, like myself, go searching for more than just the basic information listed on a website. We want the story and the background that makes a brand what it is. Forgetting to link your social media is a major fail.

Tuesday, Sep 27th, 2016

Andrea Torres

Andrea
In The Mood to Design

Getting in the mood to begin a creative process can be hard. You have a million ideas running through your head, and you need to narrow them down to create something concrete. Staying focused is key, especially when you are in the early stages of a web design project.

The process of researching and collecting design references is an important part of a collaborative creative process.

To get myself out of my head and into the heart of the design, I start with some form of a moodboard or style tile.

A moodboard is a collection of like minded design examples, organized to showcase a set goal or task. It creates the tone of the project, guides the team throughout the process, and supports those who are just joining in or working with a brand they are unfamiliar with.

A moodboard paints the vision you may see for the project, while bridging the gap to what goals the client wants to achieve for their audience. It's often difficult to see the wireframes or blueprints of a website without getting overwhelmed by additional details. Using a moodboard helps client and designer move forward with the design stages because they both have a visual understanding and can see the story of how this creative process came to be.

Personally, when I begin gathering inspiration for a project, I look for some of the following elements that relate to the product or design I'm creating:
1. Typography
2. Iconography
3. Color
4. Imagery
5. Patterns/textures

Once you have gathered all your elements, your next step should be to get organized. This is especially necessary if you are presenting to your clients. This will ensure you nailed all your key points and must haves for your users. It can also support you in speeding through your workflow.

The benefit of moodboarding is that the ideas are free flowing. Don't be afraid to take a risk. At this point, it's not the final design, so if you and the client don't see eye to eye they can be altered easily. This saves you time and money on your designs.

As the client begins to have an understanding of the theme, and the concept gets approved, your moodboard now becomes the foundation to your brand guide and projects goals. This process helps avoid confusion and surprises as you move through the design process. This way, everyone is a little less moody!

There are a wide variety of tools one can use to create moodboards if you want to move away from InDesign, Illustrator or Photoshop.

Gomoodbaord: http://www.gomoodboard.com/
Moodstream: http://moodstream.gettyimages.com
Musespeak: http://www.musepeak.com
Moodshare: http://www.moodshare.co
Olioboard: http://olioboard.com
Invision: https://www.invisionapp.com/
Niice:https://niice.co/
Canva: https://www.canva.com

Tuesday, Sep 13th, 2016

Paul D'Angelo

Paul
Ready, Fire, Aim

We've all been there before. You need something asap, and resources are scarce. You've been cobbling together a production ready site with the help of a rotating cast of freelancers and friends, and just need this final piece to get you fully operational. You are so close you can taste it. The final pieces are so obvious to you, you begin looking for help with little more than a 2 sentence overview explaining how you just need a quick fix and that a 2 week should be more than enough time.

You narrow down your search to three potential partners, and explain to them how easy this project will be, briefly outlining the simple quick fixes. When pressed for greater detail, you brush them off, emphasizing the urgency needed and how explaining now will simply slow things down. After a few exchanges over price, you settle on a team you like, and get started.

During kickoff, your team digs a little deeper in to your existing code. During the process, they identify a few issues that you had not anticipated, including some API's that you thought would be simple to integrate with, but in fact are not. You assure them that everything else will be a breeze, and agree on a few areas to begin working immediately. A few days later, those immediate areas also need extra clarification, and you still haven't figured out how to proceed with the previous API issue. As you head into the second and "last week" of the sprint, you find yourself scratching your head wondering how at the halfway point, you suddenly have more questions than answers.

This kind of misplaced urgency happens far too often, and virtually everyone loses in the process. While urgency is a key component in most scenarios, if misplaced it can be a counterproductive force that can cause delays or much worse. With a little patience, more in depth discussions prior to beginning the engagement would've allowed for a greater understanding of what was needed, with potential hold ups being identified earlier and mitigated. How do you protect yourself against such dastardly urges??

Slow down
Whether you are starting a new venture, adding a new feature, or simply behind the 8-ball for a deadline, be sure to give yourself adequate time to think through the problem thoroughly. The moments where you feel there is too much to do to stop and think are usually the times that it is most important to do just that. When in doubt, ask yourself what would Ghandi do? "I have so much to accomplish today that I must meditate for two hours instead of one."

Have a plan
You have spent the past 6 months working day and night bringing your idea to life, and you have a deep, intimate knowledge of every facet of your dream. Guess what? Joey Javascript that you just hired most likely is not a mind reader, and it's going to take time to get him familiar with the code, let alone immerse himself in how the platform is going to serve your mission. The clearer the picture you can paint for the team for both the immediate needs and how it relates to the big picture, the more efficiently they will be able to deliver.

Listen to your team
If the oncoming team doesn't have any questions at all, that should immediately set off all the alarms. Anticipate having to spend extra time clarifying issues and do not dismiss any questions or answer them half heartedly. Any Development team worth their code will give their best effort to deliver in a timely and accurate manner, and any questions are to that end. If you are frustrated that the answers seem so obvious and suspect the team is dragging their feet, please remind yourself of the previous revelation that most are not in fact mind readers.

Know when to compromise
You've been working tirelessly to get things just right, so there's no way you were going to give up now right? You can just impose your will on your team to get them to dig a little deeper, and get it to the finish line. While that sounds inspirational, it can also be dangerous. Not only can it create friction between you and your team, delaying launch just to ensure things are "perfect" can cost you valuable time. The sooner you get your product in front of people, the sooner you start collecting real data.

And know when to stand your ground...
Yes I know I literally just told you to compromise, but sometimes you do need to keep pushing for those final details and features. Nobody said this was going to be easy! How do you decide what's what? Ask yourself, is making this feature, functionality, screen etc being x% more perfecter going to lead to a x% greater chance of success of the product? If yes, then adjust your timelines accordingly, and make sure it's right. If not, and your current situation is "good enough", then get your product going as soon as possible, and can continue to refine as you go, armed with additional real user data to help guide you.

Urgency is a tricky thing. While it can narrow our focus and help us achieve great things during intense deadlines, it can also consume us and cause us to completely blow it. You could say that Urgency is to panic, as pressure is to stress, but that's a discussion for another time. For now, just remember to periodically slow things down, especially when you need them to move the fastest.

Thursday, Aug 18th, 2016

Lizzie Healy

Lizzie
Best Practices for Collaboration Between Designers and Developers

The design process it absolutely critical to building an application that is both beautiful and functional. These designs serve as a guide for developers, a brand and face for a company, and ensure a clean experience for users. With this all important task, its crucial to remember that no designer is an island. Creating the best designs requires another essential element: collaboration. Poor synergy between designers and development can leads to stress and tension for developers, designers, clients, project managers, and the rest of your team.


Throughout the course of a project, miscommunications between these two parties can occur often. Developers bouncing between projects can mix up where they picked up and left off. Designers can overlook minor styling elements like error messages. Disorganized site maps can lead to confusion, and designers and developers can run into problems when they don't see eye to eye. But many of these issues can be eliminated by simply implementing better practices for communication. Following these simple guidelines can help to ease many of the problems faced throughout the design and development process.

Obsessive Compulsive Design

Organization is absolutely irreplaceable. No matter how amazing designs are, if they are disorganized, they are not useful. Designers- make life easy for your developers by creating the cleanest, most well organized files possible. When labeling layers, include a title, breakdown, and a name that makes sense (to both designers and developers.) Sketch provides the option to annotate your documents, so take advantage of this! Properly labeling requires less clarification later on. Developers- don't be afraid to ask for clarification if you don't understand those labels! There's nothing worse than spending hours coding only to realize you've have been working off of an old mock. No matter what assets are being provided, they need to be on time, detailed, and complete.

Can you hear me now?

Clear communication is the simplest way to ensure that designers and developers are collaborating well. Designers and developers should be encouraged to communicate regularly to gain a better understanding about the status and elements within a project. Benefits go beyond just clear understanding. The extra input leads to more innovative and functional designs for the end user. Every designer has had the experience of staring at a design for a week straight and not noticing a typo, only to be immediately spotted from a fresh set of eyes. Been there, dseigned that.

Meet and Greet

Don't just meet a little, meet a lot. Meet to review the wireframes before designs begin to get made. Meet before a designer presents mock ups to a client to make sure they are realistic for development. From kickoff to presentation, someone from development should join in all design meetings with clients. The extra time spent is essential in preventing miscommunications and misunderstandings that lead to the dreaded response from clients that the finished product doesn't look like the mock ups.

Como Se Dice...Language

Use language that is constructive, descriptive, and detailed. People typically don't see things the same way based on their tastes, preferences, or past experiences. Avoid words like "trendy" or "chic", and instead opt for clearer terminology that describes more literally what you are looking for. Don't leave room for misinterpretation. Designers should have a firm understanding of the lingo used for development as well.

R-E-S-P-E-C-T

It's important that both designers and developers approach the project with respect everyone's opinion. Designers, put yourself in the developer's shoes and think how a developer would and vice versa. Be open minded and consider all ideas, even if they aren't yours. Both designers and developers are experts in their field, but that doesn't necessarily make them the authority with the final say. Sometimes a tie breaker vote from an outside party may be in order, but as long as the situation is handled respectfully a lot of problems can be avoided.

Wednesday, Jun 15th, 2016

Lizzie Healy

Lizzie
Time For A Redesign? The Importance of Updating Your Website

First Impressions: Make or Break
A website has between 2-4 seconds to engage with a new visitor before they navigate away from the page. 2-4 seconds for a user to determine: Is this site professional? Does it have useful information? Does it meet my needs? While the benefits of a well designed website are clear, (making your business accessible to anyone, reflecting your organization's brand, and serving as the best and most effective advertising), operating with a website that hasn't been updated recently could be driving away users and potential customers. Changes to the web occur at such a rapid rate that even a website that was created a few years back could be in need of some serious updates. If a user doesn't feel your website is interactive, functional, and informative, they won't hesitate to hop over to your competitor's page. So how can you design a website that meets the users needs and prevents those defectors?

What is "Good Design"?
There's an episode of Modern Family where Cam reorganizes his mother in law Gloria's kitchen "so it makes sense." While in the midst of cooking, Gloria asks Cam where the cutting board is, to which Cam responds, "where would you want it to be." This is the simplest description of an effective UI/UX design. Elements unfold in a simple, intuitive manner with one step leading the way naturally to the next in order to get to the desired end result. In the case of Modern Family, the cutting board goes to the left of the knives. In the case of UI/UX design, it means that a BUY NOW button shouldn't smack a user in the face if the price of the product is buried at the bottom of the page. Designs aren't about good screens, they're about good experiences for users. Modern interface focuses on the needs of the user, with trends being dictated from necessity.

UX design, or user experience design, considers how the product feels and whether there is a logical flow from step to step. When you first open the page, do you know what to do next? A good user experience requires logical steps within the application, like simple input methods, navigations, and menus. UI design, or user interface design, primarily focuses on how the product is laid out. A good UI includes things like designs that are consistent throughout the application. These components have to work together to provide an instinctive path for users to find the info they're seeking when navigating through your website.

How Do I look?
A website is often the customers first impression of your business, so it makes sense that this is where your business should look it's best. While users won't typically acknowledge a well designed website, they will always recognize a poorly designed website. In 2015, users spent an average of 2.8 hours a day on their phones. Even if your company has the most stunning website design for desktop, if your site is not optimized for mobile, you could be bleeding users. Your site needs to be optimized for a variety of different screen sizes, so that this smooth user experience can function just as logically on both mobile and web. Think of clutter on your website as the enemy of logical design. When you are designing your website to fit in the palm of your hand, having unnecessary text and useless elements is a big no no. While what constitutes good design is often up to interpretation, a few telltale signs can indicate that your website is in need of a makeover. Your website may be out of date if: It includes glossy or multicolored buttons, if white text dominates a black screen, or if an aggressive musical feature pops up as soon as a user navigate to the site (yikes). Beyond the aesthetic aspects, a few hints can indicate that your users think your website is out of date, like a high bounce rate. A bounce rate looks at the percentage of peeps who pop onto your website and just as quickly pop off, without navigating to a second page or clicking on anything. No clicks indicate that they couldn't find the information they were looking for. This could possibly be because they clicked onto your website by accident, but more likely indicates that your websites functionality is clunky, poorly structured, or filled with unnecessary features. We can glean from this click rate that the way your website communicates information is not clear and effective. Some simple changes can be made to update your website, such as including copy that is simple, on target, and effective. Some other changes require a more comprehensive update, such as making sure your website interacts with mapping and location technologies (especially important for brick and mortar businesses).

Do I really need to spend the money?
On the fence about updating your website? The cost can sometimes seem daunting, but the cost of not updating could even more detrimental to your business. When considering whether to pull the trigger on a new site design, we put together a little checklist for analysis. If you answered NO to 5 or more questions, seek immediate technical attention!


  1. Do the images on your website reflect your businesses overall message?

  2. Is your website responsive and mobile friendly?

  3. Does your site interact well with mapping and location technologies?

  4. Is your site quick, nimble, and easy to navigate?

  5. Is your website focused, providing users with easily accessible information?

  6. Does your website reinforce your businesses overall branding?

  7. If your user experience designed around the flow of a person?

  8. Is your website organized with some hierarchy to help highlight common choices?

  9. Is your websites design easy to digest, with clear, easy to read copy and no explanations needed?

  10. If your content fresh, up to date, and modern?

Wednesday, May 4th, 2016

Andrea Torres

Andrea
Miniseries Part III: Design Process

Design Process
You've signed on with Devshop, you've kicked off the fun, and now is the time to ask: How do I look? Part III of our miniseries takes a look at the design process for building your app. This is not about just colors and fonts, it's about how the market views your end product, and how you convey your brand to consumers. While every client's design needs vary, we like to identify your aesthetic at the beginning of the project to make sure that it reflects your brand. The design process for Devshop consists of three rounds: the Design Questionnaire, Design Check-In, and the Final Design Meeting. These rounds represent different milestones in your app, and help you and Devshop on track to complete the project in the projected timeline.

Design Questionnaire:
Let's get to know you a little better! During sign on and kickoff, we like to have clients provide us with answers to a design questionnaire to clarify the brands personality and give us a better understanding of your business. This includes questions like:

  • What competitors websites do you like?

  • Do you have a logo or need us to create one?

  • What are you trying to achieve with this app?

  • Who is your target market?

  • How are you marketing your app?

  • What is the projected timeframe of your app?

  • What is your brands personality?

  • What typography would you like to use?

  • What color scheme would you like to use?

  • What are colors/styles you want to avoid?

Design Check-In:
You've given us a little more information about what you want, now its time for us to work together to create it. The second milestone for design is the design check-in meeting, which occurs about 2-3 weeks after the kickoff meeting. During this meeting, we will review some Photoshop mock ups of your app, paying special attention to colors, typography and icons. We want your app to be looking its best, so during this stage we ask for your feedback on pictures, fonts, layouts, colors, icons and logos.

Final Design Meeting:
After a few weeks of meetings and phone calls where design feedback, edits and changes have been made, we will finally have reached the Final Design Meeting. Woohoo! This meeting occurs about 4-5 weeks into starting building your app. This is the meeting where we get a final look at how your app will look with review of high fidelity mock ups.

By this point, your app design is fully completed. Devshop has sent you each page, asset, and all content has been approved. Up next, stay tuned for details on how we develop the backend of your app!

Tuesday, Aug 12th, 2014

Steve Weiss

Steve
Missing The User Experience

Our team was racing through a project, a goal tracking app for companies based on individual employee goals and criteria a company would be graded on. We had already gone through several iterations, created mockups, implemented those designs, and had a good amount of functionality working. This thing was looking great! But during a meeting reviewing the current progress, the tone changed.

The overall tone from those who had not interacted with the app on a daily basis was "Wait, how does this thing work?" We had glossed over a very important concept: Usability. It's quite a big concept, but an easy one to miss when your head is down and you're focused on bringing an app to production.

Viewing an app from the perspective of a user can be difficult. It requires you to not only have functionality in mind, but to also second guess all of your work. If you make a decision on where to place a button or what to label a text field, will the majority of users understand what it's trying to accomplish? What about a first time user who has never seen the product before? Try to put aside all the hours you have spent viewing these pages and go back to square one.

We realized that many things needed labeling. We needed more buttons. We needed to create a first time sign in flow. (remember the Microsoft Word Paperclip/Wizard?) These things all required more work. It's an interesting dilemma to balance. Do you have the goal of making an app as simple and user friendly as possible so it's just so intuitive that anyone could pick it up? Or do you enter the process with a first time set of instructions in mind? It depends on the functionality, your design, and the opinions of your client. It's a complicated mix!

Sometimes the best solution is showing the app to someone who hasn't worked with it before, and just see how easy it is to navigate through. There is no substitute for actual interaction. Also, drop all defenses, because no explanation or justification should be necessary. You won't be sitting next to a user while they're clicking around.

Just imagine the frustrating image of being enclosed in a soundproof cube, watching a user interact with your product. You can't say or do anything. Now, do you beam with pride at your fantastic and intuitive user experience, or do you pound on the glass of this mythical cube in frustration (not unlike Bill Murray as the Ghost of Christmas Past in the cinematic classic "Scrooged")? Just something to keep in mind.

Thursday, Jul 24th, 2014

Tea Ho

Tea
Optimizing Images for Performance

I recently had the opportunity to listen to a talk given by Lara Swanson, engineering manager of performance at Etsy and author of Designing for Performance: Weighing Aesthetics and Speed. Lara's talk was about the importance of designing web applications with performance in mind, and touched on many ways to reduce page bloat, including optimizing HTML and CSS, responsive web design, and different tools one can use to measure and assess a web application's performance.

There's clearly a lot one can do when designing and developing an app to make sure it's accessible to people everywhere but if there's one thing I took away from Lara Swanson's talk, it was that you could significantly reduce your page bloat by optimizing your images.

On average, images take up over 60% of sites' page weight. Today's websites are incredibly image heavy, and designers are using everything from large hero images to background images that take up the entire window. So, here are some ways to optimize your images for performance:

1.Choose your image format carefully

JPEG
JPEGs are great for things like photographs, which require a large spectrum of colors. It does not support transparency.

PNG
PNGs are great if you need less than 256 colors (that is, PNG-8, not PNG-24). It supports transparent backgrounds, and can save at much smaller file sizes than JPEGs or GIFs.

GIF
GIFs are great if you want to turn a video of a cat into a series of animated images, but unless you're doing that, you might want to stay away. GIFs are incredibly heavy, and if you're doing simple color change animations or something, you can probably replace it with CSS3.

2. Reduce the amount of image requests
Using sprites can give you more page weight because you're combining images into one larger image, but can help your page speed by reducing the amount of server requests your page makes. Rather than making a new call for each image, you will just need to change your background image position to show off different parts of the sprite.

You can learn more about sprites here.

3. Replace images with CSS3 when you can
Where you once needed to create an image in photoshop or illustrator to handle transparency, gradients, shapes, and animations, now you can recreate those effects via CSS3. People have made everything from ticking clocks to the mona lisa using CSS3-check out some examples on CodePen. So if all you need is a simple button, you can definitely make that in CSS.

4. Compress and optimize your images
Save your files in the smallest size you'll need rather than doing inline styles to shrink them. Experiment with exporting images at different qualities and see how low the quality can be while still maintaining the look you want. 75 is generally a safe resolution for web.

There are other optimization tools you can run your images through that will compress your images without damaging their quality. Check out SmushIt and ImageOptim.

Read More
This was like a cliff notes version of one part of Lara's talk, but if you're interested in learning more about designing web applications with performance in mind, you can view her slides and watch her talk here.