How Developers “Design”
39
How Developers “Design” Ahmed Bolica
-
Upload
ahmed-bolica -
Category
Design
-
view
1.102 -
download
1
Transcript of How Developers “Design”
How Developers “Design”
Ahmed Bolica
About BolicaAhmed Bolica , Co-Founder of Alexandria Web Designers Work as Senior UI Developer and UX Designer more thank 4 years plus my own business as founder of Bolica Web Design also in Media and Marketing team in TEDxYouth Alexandria .. Having strong expertise in web design technology and trends also have a good knowledge on web design learning tracks ,...
Ahmed graduate from Faculty of Commerce, I didn’t really find my passion in accounting, auditing and creating carefully-stacked excel sheets; I found it in DESIGN!I set about with self-study courses and soon my enthusiasm and determination helped me land my first job in web design, taking me into my new promising career.
In 2005, I started my own blog, and ever since I have been seeking untapped kicking edges of web designing and developing. And as I believe in my true potentials that never failed me, I won’t be unrealistic if I said that I confidently aspire to be one of the most remarkable designers in the whole world.
www.Bolica.net
About AlexWDAlex WD is a community that has a mission of bringing together enthusiastic and ambitious web designers, in Alexandria and all over Egypt, to connect, share knowledge and get hold of best job opportunities.
By providing web designers with proper resources needed and presenting a pool of talented web designers for companies, a great link will be created that will definitely elevate and strengthen the web field in Alexandria and Egypt.
There are more plans coming ahead incha Allah so try not to miss any of our news.
We need members support to spread awareness about the community and feedback is far more than appreciated all the time.
Feel free to contact us [email protected]
www.alexwd.net
Web Design Vs.
Web Development
Web Design Vs. Web Development
Web designers are architects of the web. They focus on the look and feel of the website; and so, they should be visual arts experts, who are skilled in color scheming, graphic design and information flow. Designers are typically more in tune with their right brain hemisphere, utilizing their creativity, intuition and imagination, to design amazing user experiences.
The education requirement of a web designer is debatable. While a degree may not be needed, a full portfolio of your past work is a must. Of course others would argue that a degree from a university is just as important. Also, you should be skilled in software such as Adobe Illustrator, Photoshop and Dreamweaver.
According to a Visual.ly infographic, there are 1,336,300 available jobs for web developers compared with a meager 200,870 open positions for web designers.4 Not only is the hiring demand a huge difference, but also the salary difference is stark. The median salary for a web designer is $47,820 while the median salary for a web developer is $85,430.
A web designer:Focuses on look and feel of a websiteUses HTML, CSS, and JavaScriptIs competent in color scheming, graphic design, and information flowCreates a great user experienceIs right-brained: Strong intuition, creativity, & imaginationPortfolio is worth more than a degree
A web developer:Creates the inner workings of a websiteIs competent in programming languages (PHP, .NET, Python, C, Ruby)Develops the user interfaceIs left-brained: logic, linear thinking, technicalHands-on coding experience is required (either your own products or github)
Why Web Developers Should Know Web Design
1. Improve your graphic design skills. Learning the design process will immerse you to different graphic design tools and design inspiration.
2. Improve your web design taste. If a web developer learns how to design, he or she can easily differentiate a stunning website from a terrible one. It’s more about improving the aesthetic eye, that is, visual skills will become more refined and the web designs skills will naturally conform to your acclimated aesthetics.
3. Competitive web development. Learning the design process will help the web developer understand the business requirements more. He or she can be edgier because he or she can bring some excellent look and feel apart from the interactivity he or she brings to the table.
Why You Should Include Your Developer In The Design Process
Understand design to understand the user
It’s sometimes easy to forget that the work we do is for real users. Our clients have real problems they are trying to solve. Putting too much focus on the technical challenge of development can hold us back. It can prevent developers from really truly contributing to the solution. Learning and understanding design helps negate that. Getting involved earlier in the design process will keep you grounded, more aware of design problems, and closer to your users.
The Developer can improve our understanding of what is possible .But we need developers not only to block infeasible ideas. They might also suggest ideas that we’ve dismissed as impossible. We sometimes filter our own ideas because of the limitations of our technical knowledge, especially if we do some coding ourselves. We figure that if we cannot think of how to build an idea, then it cannot be possible. Developers have a huge amount to add to discussions about design
The Developer will have a greater sense of Ownership There is one final reason for including the developer in the process: They will feel more engaged with the project. Too often, developers are at the end of a long chain of decision-making. Their voice isn’t heard because they’re brought into the process far too late. This leaves them feeling no ownership over the project.
5 design concepts that every web developer needs to know
1. Design isn't just visualDesign is the entire experience from the moment users enter your site to well after they've left.
2. Be user-centricDesigns should enable your users to reach their goals with speed, effectiveness and, most importantly, pleasure.
3. Design is in detailDetails are capable of making a 'good' design 'great'. Attention to detail in a user experience can be the difference between a satisfied user and an annoyed one.
4. Use white spaceBreaks are important for processing information, especially when there's a fair amount to process. It's why we have paragraphs and sentences instead of just a single, long block of running text.
5. Design is all about problem solvingYou should approach design as a set of problems that require solutions. Everything on the page should have a reason for being there and be solving a specific problem for the user or design.
Colors
Selecting Your Own Color Scheme
The Impact of Color in Your ProjectsColor is one of those things that seems really simple -but can be really difficult to get just right. And, as it's one of the really visual, focal parts to any design, then it's so, so easy to notice when something doesn't quite sit right. If such a major part of your design doesn't feel right, or represent your company, service or brand well, then it can make all the difference between users that stay and explore and those that disappear.
how you can start choosing a suitable color scheme for your project.
https://color.adobe.comhttp://www.colourlovers.com/http://coolors.co/http://color.hailpixel.com/
Choosing Color Schemes From Photos
Have you ever looked at a photo and thought how magical or breathtaking the colors appeared? Sometimes, these beautiful colors can be translated into a usable color scheme that you can put into action. All it takes to choose a great color scheme from a photo is a little practice and a lot of patience - for if you're a perfectionist like me, then you'll spend a while tweaking the colors until they're just right.
http://www.pictaculous.comhttp://www.degraeve.com/color-palette
Better Type Design
Too many type facesOne of the biggest mistakes that people make, is to use too many typefaces and styles. Try to limit any piece to 2 or 3 different type faces and styles. This means that the body should all be one font and size. Choose one header and stick to it, maybe a subhead as well. Don’t be afraid to make the fonts very different from each other. Using 2 very similar fonts can look like you made a mistake and accidently chose the wrong font.
SpacingBe careful not to crowd the typography. If you are having problems fitting something in, resist the urge to squish it together. Select a condensed font, or just shrink everything down and allow some breathing space. This applies to the edge of the page too, allow some white space around the text.
AlignmentPlease don’t just throw everything center aligned (unless that’s a deliberate design decision). Think about using a grid. Have everything on the page in relation to something else. Use guides and clean things up. Don’t throw things in the corners of a page either, that looks like you couldn’t decide where to put anything.
Size mattersReally think about the size of the text. Titles are nice bold and large, but if you set your paragraph too large, it tends to feel cheap. Think about it. You go to a nice restaurant and the menus are often written in smaller print, it makes it feel classy. (Make sure it’s not so small it’s hard to read). If you are using heading and paragraph text, don’t be afraid to make the headings much larger than the body.
ReadabilityWhatever you do, make sure that people can read your message. Dark text on a dark color, not a good idea. Even worse, tying to apply small type over a high contrast photo. Remember less is more, this has never been truer than behind text that is supposed to communicate a message.
ColorWhat color is best for type? Generally, believe it or not, black or white is often best. Why would I say that? Because the grayscale tones are pushed to very strong values. If you use color, consider muting the saturation a bit. Brightly colored type can be difficult to read. Beware of vibrating colors such as a red directly on a green. Rainbow colored gradients are probably not your best choice.
GroupingGroup related pieces of information together. This will clean things up a lot. Examples: Look at a movie poster, all the credits are grouped into an attractive block. This block can now be treated as a single design element. For examples of bad grouping, open the yellow pages.
LeadingThis is the spacing between lines of text. It’s much classier to open up the spacing. It’s more inviting to read when there is resting space for the eyes in between lines. As a rule of thumb, try to use at least 2 points higher than the type size. For example: 10pt type should have a 12pt leading for maximum readability.
Design Elements
UI kits UI kits are a fantastic starting point for many projects. You can quickly mockup a professional solution and then
customize the files into a bespoke solution in no time at all.
Icons
http://www.flaticon.comhttp://fontello.comhttp://thenounproject.comhttps://icomoon.io
Photography
"Creative Commons is a non-profit that offers an alternative to full copyright."
http://thestocks.imhttps://www.flickr.com/creativecommons
Frameworks
What is a framework?
A framework is a standardized set of concepts, practices and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature.
In the world of web design, to give a more straightforward definition, a framework is defined as a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the development of websites, as a basis to start building a site.
Grid-System
The main idea behind grid-based designs is a solid visual and structural balance of web-sites you can create with them. Sophisticated layout structures offer more flexibility and enhance the visual experience of visitors. In fact, users can easier follow the consistency of the page, while developers can update the layout in a well thought-out, consistent way. However, it’s quite hard to find your way through all the theory behind grid systems: it isn’t easy at all. Some important notions and related key-facts can help to learn basics and keep essential techniques in mind.
Bootstrap
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.
Bootstrap helps you kickstart the development of webapps and websites.
CSS3
Questions
Thank You !http://www.fb.com/bolica
http://www.linkedin.com/in/bolica
